@m4l/styles 6.3.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LAppBar.js

@@ -0,0 +1,118 @@
+const e = (p) => ({
+  M4LAppBar: {
+    styleOverrides: {
+      "&.M4LAppBar-root": {
+        display: "flex",
+        width: "100vw",
+        maxWidth: "100vw !important",
+        overflow: "hidden",
+        minHeight: "52px",
+        height: "52px",
+        alignItems: "center",
+        padding: "8px 16px",
+        background: p.vars.palette.background.default,
+        borderBottom: "1.5px solid",
+        borderColor: p.vars.palette?.border.default,
+        justifyContent: "space-between",
+        gap: "40px",
+        [p.breakpoints.down("sm")]: {
+          width: "100%",
+          marginLeft: "0",
+          gap: "12px"
+        },
+        "& .M4LAppBar-containerLogo": {
+          "& .M4LImage-root": {
+            width: "34px!important",
+            height: "34px!important",
+            borderRadius: "4px",
+            padding: "2px"
+          },
+          "& .M4LAppBar-containerImageTypography": {
+            display: "flex",
+            alignItems: "center",
+            gap: "12px",
+            width: "163px",
+            height: "36px",
+            "& .M4LTypography-root": {
+              textWrap: "nowrap",
+              textTransform: "uppercase"
+            }
+          }
+        },
+        "& .M4LAppBar-containerIconMenuToggle": {
+          display: "flex",
+          width: "36px",
+          height: "36px",
+          minWidth: "36px",
+          minHeight: "36px",
+          alignItems: "center",
+          borderRadius: "4px",
+          borderColor: p.vars.palette?.border.default,
+          justifyContent: "space-between",
+          "& .M4LAppBar-iconMenuToggle": {
+            background: p.vars.palette.background.surface,
+            width: "36px",
+            height: "36px",
+            minWidth: "36px",
+            minHeight: "36px",
+            [p.breakpoints.down("sm")]: {
+              background: p.vars.palette.background.surface,
+              width: "36px",
+              height: "36px",
+              minWidth: "36px",
+              minHeight: "36px"
+            }
+          }
+        },
+        "& .M4LAppBar-containerChilds": {
+          flexGrow: "1",
+          display: "flex",
+          flexDirection: "row",
+          gap: "12px",
+          width: "100%",
+          justifyContent: "space-between",
+          overflow: "hidden",
+          alignItems: "center",
+          borderRadius: "4px",
+          background: "none",
+          boxShadow: "none",
+          [p.breakpoints.down("sm")]: {
+            display: "flex",
+            alignItems: "center",
+            width: "100%",
+            borderTop: "0",
+            borderColor: "none",
+            background: "none",
+            boxShadow: "none",
+            paddingRight: "0px",
+            borderRadius: "6px",
+            gap: "8px"
+          },
+          "& .M4LAvatar-root": {
+            width: "28px",
+            height: "28px",
+            padding: "4px",
+            "& .MuiAvatar-root": {
+              width: "20px",
+              height: "20px",
+              fontSize: "12px"
+            },
+            [p.breakpoints.down("sm")]: {
+              width: "36px",
+              height: "36px",
+              padding: "4px",
+              "& .MuiAvatar-root": {
+                width: "28px",
+                height: "28px",
+                fontSize: "15px"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  e as M
+};

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

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

package/theme/overrides/M4LExtendedComponents/M4LAppBarCommercial.js

@@ -0,0 +1,25 @@
+const o = (e) => ({
+  M4LAppBarCommercial: {
+    styleOverrides: {
+      "&.M4LAppBarCommercial-root": {
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "8px 80px",
+        minHeight: "80px",
+        backgroundColor: e.vars.palette.background.default,
+        position: "fixed",
+        zIndex: "100",
+        borderBottom: "1px solid rgba(9, 30, 66, 0.10)",
+        boxShadow: "rgba(36, 59, 70, 0.12)",
+        [e.breakpoints.down("md")]: {
+          padding: "8px 24px"
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

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

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

package/theme/overrides/M4LExtendedComponents/M4LAreasAdmin.js

@@ -0,0 +1,498 @@
+const r = (o) => ({
+  M4LAreasAdmin: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-root": {
+        flex: 1,
+        display: "flex",
+        flexDirection: "row",
+        overflow: "hidden",
+        height: "auto",
+        //borderRadius: '6px',
+        padding: "0px 12px",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "100%",
+        //maxWidth: '100%',
+        gap: "8px",
+        borderRight: "1px solid",
+        borderLeft: "1px solid",
+        borderColor: o.vars.palette?.border.disabled,
+        [o.breakpoints.down("sm")]: {
+          //boxShadow: theme.colorSchemes.finalTheme.customShadows.z1,
+          paddingRight: "0px",
+          width: "100%",
+          maxWidth: "100%",
+          gap: "0px",
+          borderRadius: "4px",
+          height: "100%",
+          overflow: "hidden",
+          borderRight: "0px",
+          borderLeft: "0px",
+          borderColor: "transparent"
+        },
+        "& .M4LAreasAdmin-rootContent": {
+          display: "flex",
+          flexDirection: "row-reverse",
+          width: "100%",
+          //maxWidth: '100%',
+          overflow: "auto",
+          justifyContent: "center",
+          alignItems: "center",
+          gap: "8px",
+          minHeight: "36px",
+          boxShadow: "none",
+          [o.breakpoints.down("sm")]: {
+            gap: "0px",
+            borderRadius: "4px"
+          },
+          "&.M4LAreasAdmin-isFocus": {
+            border: "1px solid",
+            borderColor: o.vars.palette.primary.main,
+            gap: "0px"
+          },
+          [o.breakpoints.down("sm")]: {
+            height: "auto",
+            background: o.vars.palette.background.default,
+            width: "100%",
+            maxWidth: "100%",
+            paddingRight: "0px",
+            borderRadius: "4px",
+            gap: "0px"
+          },
+          "*::-webkit-scrollbar": {
+            width: "8px",
+            maxWidth: "12px",
+            height: "6px",
+            background: o.vars.palette.background.surface,
+            position: "absolute",
+            zIndex: "10000"
+          },
+          "*::-webkit-scrollbar-thumb": {
+            background: o.vars.palette.text.disabled,
+            position: "absolute",
+            borderRadius: "4px",
+            zIndex: "10000"
+          },
+          //Chips
+          "& .M4LAreasAdmin-areaContainerChipsIcon": {
+            flexGrow: "1",
+            display: "flex",
+            flexDirection: "row",
+            width: "100%",
+            overflow: "auto",
+            height: "36px",
+            borderColor: o.vars.palette?.border.default,
+            [o.breakpoints.down("sm")]: {
+              background: "none",
+              borderRight: "none",
+              paddingLeft: "0px"
+            },
+            "& .M4LAreasAdmin-areaIconLayer": {
+              background: o.vars.palette.background.surface,
+              boxShadow: o.vars.customShadows.z2,
+              display: "flex",
+              justifyContent: "center",
+              width: "36px",
+              height: "36px",
+              [o.breakpoints.down("sm")]: {
+                height: "36px",
+                width: "36px"
+              },
+              "& .M4LIcon-root": {
+                width: "36px",
+                height: "100%"
+              }
+            },
+            "& .M4LAreasAdmin-areaContainerChips": {
+              display: "flex",
+              overflow: "auto",
+              gap: "8px",
+              paddingLeft: "0px",
+              paddingRight: "0px",
+              width: "100%",
+              //maxWidth: '100%',
+              height: "auto",
+              alignItems: "center",
+              [o.breakpoints.down("sm")]: {
+                background: "none",
+                overflow: "auto hidden",
+                width: "100%"
+              },
+              "& .M4LAreasAdmin-areaContainerContentChips": {
+                display: "flex",
+                flexDirection: "row",
+                width: "100%",
+                //maxWidth: '100%',
+                height: "100%",
+                justifyContent: "space-between",
+                alignItems: "center",
+                overflow: "visible",
+                [o.breakpoints.down("sm")]: {
+                  width: "100%",
+                  background: "none",
+                  "&.M4LAreasAdmin-areaContainerContentChips > div": {
+                    borderColor: "transparent"
+                  }
+                },
+                /*'& .simplebar-mask .simplebar-offset ': {
+                                      display: 'flex',
+                                      alignItems: 'center',
+                                  },*/
+                "& .M4LAreasAdmin-areaContentChips": {
+                  display: "flex",
+                  width: "fit-content",
+                  height: "auto",
+                  minHeight: "36px",
+                  alignItems: "center",
+                  gap: "4px",
+                  paddingRight: "4px",
+                  overflow: "hidden",
+                  [o.breakpoints.down("sm")]: {
+                    height: "44px"
+                  }
+                },
+                "& .M4LAreasAdmin-areaChipMobileRoot": {
+                  width: "100%",
+                  border: "0",
+                  background: o.vars.palette.background.default,
+                  "& .M4LAreasAdmin-areaChipRoot": {
+                    width: "100%",
+                    paddingLeft: "8px",
+                    display: "flex",
+                    alignItems: "center",
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    gap: "4px",
+                    background: o.vars.palette.background.default,
+                    "& .M4LAreasAdmin-areaChipRoot": {
+                      width: "100%"
+                    }
+                  }
+                }
+              },
+              /*'& .simplebar-wrapper': {
+                                                  width: 'fit-content',
+                                                  maxWidth: '100%',
+                                                  [theme.breakpoints.down('sm')]: {
+                                                      width: '100%',
+                                                  },
+                                              },
+              
+                                              '& .simplebar-height-auto-observer-wrapper': {
+                                                  width: 'fit-content',
+                                                  maxWidth: '100%',
+                                                  overflow: 'auto',
+                                              },
+              
+                                              '& .simplebar-mask': {
+                                                  '& .simplebar-offset': {
+                                                      '& .simplebar-content-wrapper': {
+                                                          width: 'fit-content',
+                                                          maxWidth: '100%',
+                                                          overflow: 'auto',
+                                                          '& .simplebar-content': {
+                                                              width: 'fit-content',
+                                                              overflow: 'auto',
+                                                          },
+                                                      },
+                                                  },
+                                              },*/
+              /*'& .simplebar-content-wrapper': {
+                                  width: 'fit-content',
+                              },*/
+              "& .M4LAreasAdmin-areaChipRoot ": {
+                margin: "0px",
+                borderRadius: "4px",
+                overflow: "hidden",
+                width: "100%",
+                maxWidth: "100%",
+                cursor: "pointer",
+                "&:hover": {
+                  background: o.vars.palette.background.hover
+                },
+                [o.breakpoints.down("sm")]: {
+                  background: "none",
+                  border: "none",
+                  boxShadow: "none",
+                  width: "100%"
+                },
+                "& .M4LAreasAdmin-areaChipEditButton": {
+                  "& .M4LIcon-icon": {
+                    width: "12px",
+                    height: "12px",
+                    minWidth: "12px",
+                    minHeight: "12px"
+                  }
+                }
+                /*'& .M4LAreasAdmin-areaChipEditButton': {
+                                      transition: 'all ease 0.3s',
+                                      opacity: '0',
+                                  },
+                                  '&:hover .M4LAreasAdmin-areaChipEditButton': {
+                                      transition: 'all ease 0.3s',
+                                      opacity: '1',
+                                  },*/
+              },
+              "& .M4LAreasAdmin-areaChipMobileRoot": {
+                display: "flex",
+                overflow: "hidden",
+                width: "100%",
+                backgroundColor: o.vars.palette.background.surface,
+                borderTop: "1.5px solid",
+                borderColor: o.vars.palette?.border.default,
+                borderRadius: "4px",
+                [o.breakpoints.down("sm")]: {
+                  backgroundColor: o.vars.palette.background.default,
+                  width: "100%"
+                },
+                "& .M4LAreasAdmin-areaChipRoot ": {
+                  margin: "0px",
+                  borderRadius: "4px 0px 0px 4px",
+                  overflow: "hidden",
+                  width: "100%",
+                  position: "relative",
+                  [o.breakpoints.down("sm")]: {
+                    background: "none",
+                    border: "none",
+                    boxShadow: "none"
+                  }
+                },
+                "& .M4LAreasAdmin-selected .": {
+                  [o.breakpoints.down("sm")]: {
+                    background: "none"
+                  }
+                }
+              },
+              "& .M4LAreasAdmin-areaChipMobileIconContainer": {
+                display: "flex",
+                width: "fit-content",
+                borderLeft: "1px solid",
+                borderColor: o.vars.palette.divider,
+                borderRadius: "0px 0px 0px 0px",
+                boxShadow: o.vars.customShadows.z2,
+                ...o.colorSchemes.finalTheme.typography.body,
+                color: o.vars.palette.text.primary,
+                [o.breakpoints.down("sm")]: {
+                  boxShadow: "none"
+                },
+                "& .M4LIconButton-root": {
+                  background: "transparent",
+                  backgroundColor: "transparent",
+                  //height: '100%',
+                  "&:hover": {
+                    background: o.vars.palette.primary.opacity
+                  },
+                  "& .M4LIcon-icon": {
+                    //backgroundColor:
+                  }
+                }
+              },
+              "& .MuiBox-root": {
+                display: "flex",
+                alignItems: "center",
+                height: "100%"
+              },
+              "& .M4LAreasAdmin-areaChipRoot": {
+                display: "flex",
+                background: o.vars.palette.background.surface,
+                borderRadius: "4px 4px 4px 4px",
+                minHeight: "24px",
+                width: "fit-content",
+                gap: "4px",
+                paddingLeft: "8px",
+                alignItems: "center",
+                [o.breakpoints.down("sm")]: {
+                  background: "none",
+                  border: "none",
+                  borderColor: "none",
+                  boxShadow: "none"
+                },
+                "&.M4LAreasAdmin-selected": {
+                  background: o.vars.palette.primary.focusActive,
+                  ...o.colorSchemes.finalTheme.typography.body,
+                  color: o.vars.palette.text.primary,
+                  height: "22px",
+                  transition: "all 0.5s ease",
+                  "&:hover": {
+                    background: o.vars.palette.primary.hover
+                  },
+                  [o.breakpoints.down("sm")]: {
+                    height: "auto",
+                    background: "none",
+                    "&:hover": {
+                      background: o.vars.palette.background.hover
+                    }
+                  },
+                  "& .M4LAreasAdmin-areaChipTitle": {
+                    backgroundColor: "transparent",
+                    border: "none",
+                    textWrap: "nowrap",
+                    width: "auto",
+                    minWidth: "30px",
+                    justifyContent: "center",
+                    display: "flex",
+                    alignItems: "center",
+                    color: o.vars.palette.common.white,
+                    ...o.colorSchemes.finalTheme.typography.body,
+                    [o.breakpoints.down("sm")]: {
+                      display: "inline",
+                      fontSize: "14px",
+                      textOverflow: "ellipsis",
+                      overflow: "hidden",
+                      whiteSpace: "nowrap",
+                      flex: "1",
+                      color: o.vars.palette.text.primary
+                    }
+                  },
+                  "& .M4LIconButton-root": {
+                    "&:hover": {
+                      background: o.vars.palette.primary.focusActive
+                    },
+                    [o.breakpoints.down("sm")]: {
+                      color: o.vars.palette.text.primary
+                    },
+                    "& .M4LIcon-icon": {
+                      backgroundColor: `${o.vars.palette.common.white}`,
+                      [o.breakpoints.down("sm")]: {
+                        color: o.vars.palette.text.primary
+                      }
+                    }
+                  }
+                },
+                "& .M4LAreasAdmin-areaChipTitle": {
+                  backgroundColor: "transparent",
+                  border: "none",
+                  textWrap: "nowrap",
+                  width: "auto",
+                  minWidth: "30px",
+                  justifyContent: "center",
+                  display: "flex",
+                  alignItems: "center",
+                  color: o.vars.palette.text.secondary,
+                  ...o.colorSchemes.finalTheme.typography.body
+                },
+                "& .M4LAreasAdmin-areaContainerChipEditButton": {
+                  display: "flex",
+                  width: "fit-content"
+                },
+                "& .M4LIconButton-root": {
+                  display: "flex",
+                  justifyContent: "center",
+                  width: "20px",
+                  height: "20px",
+                  [o.breakpoints.down("sm")]: {
+                    color: o.vars.palette.text.primary
+                  },
+                  "&.M4LIconButton-variantPrimary": {
+                    background: o.vars.palette.primary.focusActive,
+                    [o.breakpoints.down("sm")]: {
+                      color: o.vars.palette.text.primary
+                    }
+                  }
+                }
+              }
+            }
+          },
+          "& .M4LAreasAdmin-areasPopoverListWindowsIcon": {
+            borderRadius: "4px",
+            "& .MuiButtonBase-root": {
+              width: "100%",
+              height: "28px",
+              borderLeft: "1px solid",
+              borderColor: o.vars.palette?.border.secondary,
+              borderRadius: "0px"
+            }
+          },
+          "& .M4LAreasAdmin-areasAddButton": {
+            flexGrow: "2",
+            background: o.vars.palette.background.surface
+          },
+          "&.M4LAreasAdmin-isMobile": {
+            overflow: "hidden",
+            boxShadow: o.vars.customShadows.z1,
+            width: "100%",
+            "& .M4LAreasAdmin-areaContainerChips": {
+              width: "100%",
+              //overflow: 'hidden',
+              background: "none",
+              boxShadow: "none"
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LAreasAdminEditPopover: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-areaEditPopover": {
+        "& .MuiPaper-root": {
+          width: "200px",
+          padding: "12px",
+          "& .M4LRHFormProvider-root": {
+            gap: "8px",
+            "& .css-l4lb1c": {
+              minHeight: "24px",
+              border: "0px",
+              "& .M4LTypography-root": {
+                height: "100%",
+                "& .MuiTypography-root": {
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center"
+                }
+              },
+              "& .M4LIconButton-root": {
+                "& .MuiButtonBase-root": {
+                  padding: "0px",
+                  justifyContent: "inherit"
+                }
+              }
+            },
+            "& .M4LRHFTextField-root": {
+              "& .MuiFormControl-root": {
+                marginTop: "0px"
+              }
+            },
+            "& .M4LCommonActions-root": {
+              padding: "8px 0 0px 0px",
+              "& .M4LButton-root": {
+                padding: "0px",
+                height: "24px",
+                "& .MuiButtonBase-root": {
+                  justifyContent: "center !important"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LAreasAdminMobilePopoverOptions: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-areasPopoverMobileOptions": {
+        "& .MuiPaper-root": {
+          "& .M4LButton-root": {
+            marginTop: "8px",
+            borderRadius: "4px",
+            "& .MuiButtonBase-root": {
+              textWrap: "nowrap",
+              borderRadius: "4px"
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LAreasAdminPopoverListWindows: {
+    styleOverrides: {
+      "&.M4LAreasAdmin-areasPopoverListWindows": {
+        test: "root"
+      }
+    }
+  }
+});
+export {
+  r as M
+};

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

@@ -1,5 +1,5 @@
 import { Theme, CssVarsTheme } from '@mui/material/styles';
-export declare const M4LAreasViewer: (theme: Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme) => {
+export declare const M4LAreasViewer: (theme: Omit<Theme, "palette" | "applyStyles"> & CssVarsTheme) => {
     M4LAreasViewer: {
         styleOverrides: {
             '&.M4LAreasViewer-root': {
@@ -489,7 +489,7 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, 'palette' | 'applyStyle
                         '& .M4LAreasViewer-areasLoadingErrorTitle': {
                             [x: string]: unknown;
                             color: string;
-                            '@font-face'?: import("@mui/material/styles/createTypography").Fontface | import("@mui/material/styles/createTypography").Fontface[] | undefined;
+                            '@font-face'?: import('@mui/material/styles/createTypography').Fontface | import('@mui/material/styles/createTypography').Fontface[];
                             accentColor?: import("csstype").Property.AccentColor | undefined;
                             alignContent?: import("csstype").Property.AlignContent | undefined;
                             alignItems?: import("csstype").Property.AlignItems | undefined;
@@ -864,7 +864,7 @@ export declare const M4LAreasViewer: (theme: Omit<Theme, 'palette' | 'applyStyle
                             writingMode?: import("csstype").Property.WritingMode | undefined;
                             zIndex?: import("csstype").Property.ZIndex | undefined;
                             zoom?: import("csstype").Property.Zoom | undefined;
-                            all?: import("csstype").Globals | undefined;
+                            all?: import("csstype").Property.All | undefined;
                             animation?: import("csstype").Property.Animation<string & {}> | undefined;
                             animationRange?: import("csstype").Property.AnimationRange<string | number> | undefined;
                             background?: import("csstype").Property.Background<string | number> | undefined;