@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LPeriod.js

@@ -0,0 +1,184 @@
+const r = (o) => ({
+  M4LPeriod: {
+    styleOverrides: {
+      "&.M4LPeriod-root": {
+        border: "solid 1px",
+        borderColor: o.vars.palette?.border.default,
+        display: "flex",
+        width: "100%",
+        height: "auto",
+        borderRadius: "4px",
+        transition: "all .2s",
+        [o.breakpoints.down("md")]: {
+          flexDirection: "column"
+        },
+        "& .M4LPeriod-skeleton": {
+          width: "100%",
+          display: "flex",
+          [o.breakpoints.down("md")]: {
+            flexDirection: "column"
+          },
+          "& .M4LPeriod-skeletonFieldPrimary": {
+            width: "100%",
+            paddingLeft: "12px",
+            borderRight: "1px solid",
+            display: "flex",
+            alignItems: "center",
+            borderColor: o.vars.palette?.border.default,
+            [o.breakpoints.down("md")]: {
+              borderRight: "0",
+              borderBottom: "1px solid",
+              borderColor: o.vars.palette?.border.default
+            }
+          },
+          "& .M4LPeriod-skeletonFieldSecondary": {
+            width: "100%",
+            paddingLeft: "12px",
+            display: "flex",
+            alignItems: "center"
+          }
+        },
+        "&:hover": {
+          borderColor: o.vars.palette.primary.hover
+        },
+        "&.M4LPeriod-isFocus": {
+          borderColor: o.vars.palette.primary.focusActive
+        },
+        "& .MuiAutocomplete-root": {
+          width: "100%",
+          borderRadius: 0,
+          borderRight: "1px solid",
+          borderColor: o.vars.palette?.border.default,
+          [o.breakpoints.down("md")]: {
+            borderRight: 0,
+            borderBottom: "1px solid",
+            borderColor: o.vars.palette?.border.default
+          },
+          "& .MuiInput-root": {
+            backgroundColor: "transparent"
+          },
+          "& .MuiInput-input": {
+            padding: "0"
+          }
+        },
+        "& .MuiTextField-root": {
+          width: "100%",
+          "& .MuiInputBase-root.MuiInput-root": {
+            padding: "0 0 0 12px",
+            height: "100%",
+            backgroundColor: "transparent"
+          }
+        },
+        "&.M4LPeriod-sizeSmall": {
+          "& .MuiAutocomplete-hasPopupIcon": {
+            height: "24px"
+          },
+          "& .MuiTextField-root": {
+            height: "24px"
+          },
+          "& .M4LPeriod-skeletonFieldPrimary": {
+            height: "24px"
+          },
+          "& .M4LPeriod-skeletonFieldSecondary": {
+            width: "100%",
+            height: "24px",
+            paddingLeft: "12px"
+          }
+        },
+        "&.M4LPeriod-sizeMedium": {
+          "& .MuiAutocomplete-hasPopupIcon": {
+            height: "36px"
+          },
+          "& .MuiTextField-root": {
+            height: "36px"
+          },
+          "& .M4LPeriod-skeletonFieldPrimary": {
+            height: "36px"
+          },
+          "& .M4LPeriod-skeletonFieldSecondary": {
+            width: "100%",
+            height: "36px",
+            paddingLeft: "12px"
+          }
+        },
+        "& .M4LPeriod-containerDateLabel": {
+          width: "100%",
+          height: "100% !important",
+          padding: "0px 0px 0px 8px",
+          borderRight: "1px solid",
+          borderColor: o.vars.palette?.border.default
+        },
+        "& .M4LPeriod-containerDateValue": {
+          display: "flex",
+          width: "100%",
+          padding: "0px 0px 0px 8px"
+        },
+        "&.M4LPeriod-stateError": {
+          borderColor: o.vars.palette.error.main,
+          boxShadow: o.customShadows?.z2,
+          "&.M4LPeriod-stateError:hover": {
+            borderColor: o.vars.palette.error.main,
+            background: "transparent",
+            boxShadow: o.customShadows?.z2
+          },
+          "& .MuiTextField-root:hover": {
+            width: "100%",
+            background: "transparent",
+            "& .MuiInputBase-root:hover": {
+              background: o.vars.palette.error.opacity,
+              height: "100%"
+            }
+          }
+        },
+        "&.M4LPeriod-stateWarning": {
+          borderColor: o.vars.palette.warning.main,
+          boxShadow: o.customShadows?.z2,
+          "&.M4LPeriod-stateWarning:hover": {
+            borderColor: o.vars.palette.warning.main,
+            boxShadow: o.customShadows?.z2,
+            background: "transparent",
+            "& .MuiTextField-root:hover": {
+              background: "transparent",
+              "& .MuiInputBase-root:hover": {
+                background: o.vars.palette.warning.opacity
+              }
+            }
+          }
+        },
+        "&.M4LPeriod-stateSuccess": {
+          borderColor: o.vars.palette.success.main,
+          boxShadow: o.customShadows?.z2,
+          "&.M4LPeriod-stateSuccess:hover": {
+            borderColor: o.vars.palette.success.main,
+            boxShadow: o.customShadows?.z2,
+            background: "transparent",
+            "& .MuiTextField-root:hover": {
+              background: "transparent",
+              "& .MuiInputBase-root:hover": {
+                background: o.vars.palette.success.opacity
+              }
+            }
+          }
+        },
+        "&.M4LPeriod-stateInfo": {
+          borderColor: o.vars.palette.info.main,
+          boxShadow: o.customShadows?.z2,
+          "&.M4LPeriod-stateInfo:hover": {
+            borderColor: o.vars.palette.info.main,
+            background: "transparent",
+            boxShadow: o.customShadows?.z2,
+            "& .MuiTextField-root:hover": {
+              background: "transparent",
+              "& .MuiInputBase-root:hover": {
+                background: o.vars.palette.info.main
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

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

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

package/theme/overrides/M4LExtendedComponents/M4LPopover.js

@@ -0,0 +1,95 @@
+const t = (o) => ({
+  M4LPopover: {
+    styleOverrides: {
+      "&.M4LPopover-root": {
+        minWidth: "unset",
+        minHeight: "unset",
+        width: "100%",
+        height: "100%",
+        ".MuiPaper-root": {
+          background: o.vars.palette.background.default,
+          borderRadius: "6px",
+          padding: "8px",
+          boxShadow: o.vars.customShadows.z4,
+          width: "auto",
+          zIndex: "10000",
+          "& .MuiButtonBase-root": {
+            justifyContent: "normal !important",
+            gap: "12px",
+            minHeight: "24px",
+            padding: "2px 4px",
+            "& .M4LIcon-root": {
+              minHeight: "20px",
+              minWidth: "20px"
+            },
+            "& .M4LDynamicFilter-classespopoverLabelMemuItem": {
+              margin: "0px",
+              height: "100%"
+            }
+          }
+        },
+        "& .M4LanguagePopover-containerItems": {
+          "& :nth-of-type(-n + 1)": {
+            gap: "4px"
+          },
+          "& .M4LanguagePopover-labelItem": {
+            ...o.colorSchemes.finalTheme.typography.body,
+            color: o.vars.palette.text.secondary,
+            borderRadius: "4px",
+            margin: "0"
+          },
+          "& .MuiButtonBase-root": {
+            margin: "0",
+            borderRadius: "4px",
+            padding: "2px 4px",
+            gap: "12px",
+            justifyContent: "normal !important"
+          },
+          "& .MuiButtonBase-root:hover": {
+            backgroundColor: o.vars.palette.primary.opacity,
+            borderRadius: "4px",
+            padding: "4px"
+          },
+          "& .MuiButtonBase-root.Mui-selected": {
+            backgroundColor: o.vars.palette.primary.opacity,
+            "& .M4LanguagePopover-labelItem": {
+              color: o.vars.palette.primary.focusActive
+            }
+          }
+        },
+        [o.breakpoints.down("md")]: {
+          ".MuiPaper-root": {
+            padding: "12px",
+            gap: "4px",
+            "& .MuiButtonBase-root": {
+              justifyContent: "normal !important",
+              gap: "16px",
+              minHeight: "36px",
+              "& .M4LIcon-root": {
+                minHeight: "28px",
+                minWidth: "28px",
+                "& .M4LIcon-icon": {
+                  minHeight: "20px",
+                  minWidth: "20px"
+                }
+              },
+              "& .css-1qhcwcd": {
+                width: "20px",
+                height: "20px",
+                alignItems: "center",
+                justifyContent: "center",
+                "& .M4LImage-root": {
+                  width: "20px !important",
+                  height: "20px !important"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  t as M
+};

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

@@ -39,7 +39,7 @@ export declare const M4LPrintingSystem: (theme: Omit<Theme, "palette" | "applySt
                     height: string;
                     '&.M4LPrintingSystem-textBoxNodeVariant-h1': {
                         fontSize: 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;
@@ -414,7 +414,7 @@ export declare const M4LPrintingSystem: (theme: Omit<Theme, "palette" | "applySt
                         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;

package/theme/overrides/M4LExtendedComponents/M4LPrintingSystem.js

@@ -0,0 +1,186 @@
+const o = (e) => ({
+  M4LPrintingSystem: {
+    styleOverrides: {
+      "&.M4LPrintingSystem-root": {
+        position: "absolute",
+        backgroundColor: "#fff",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        overflow: "visible",
+        color: "#5C6A6C",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: "auto",
+        "& .M4LPrintingSystem-pageNodeRoot": {
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          pageBreakBefore: "always",
+          backgroundColor: "#fff"
+        },
+        "& .M4LPrintingSystem-sectionNodeRoot": {
+          display: "flex",
+          overflow: "hidden"
+        },
+        "& .M4LPrintingSystem-headerNodeRoot": {
+          display: "flex",
+          justifyContent: "space-between",
+          overflow: "hidden"
+        },
+        "& .M4LPrintingSystem-footerNodeRoot": {
+          display: "flex",
+          justifyContent: "space-between",
+          overflow: "hidden"
+        },
+        "& .M4LPrintingSystem-textBoxNodeRoot": {
+          height: "auto",
+          "&.M4LPrintingSystem-textBoxNodeVariant-h1": {
+            ...e.colorSchemes.finalTheme.typography.h1,
+            fontSize: "18px!important"
+          },
+          "&.M4LPrintingSystem-textBoxNodeVariant-h3": {
+            ...e.colorSchemes.finalTheme.typography.subtitle
+          },
+          "&.M4LPrintingSystem-textBoxNodeVariant-body": {
+            ...e.colorSchemes.finalTheme.typography.body
+          },
+          "&.M4LPrintingSystem-textBoxNodeVariant-action": {
+            ...e.colorSchemes.finalTheme.typography.action,
+            fontSize: "10px!important"
+          }
+        },
+        "& .M4LPrintingSystem-bodyNodeRoot": {
+          display: "flex",
+          flex: "1"
+        },
+        "& .M4LPrintingSystem-paperNodeRoot": {
+          display: "flex",
+          flexDirection: "column",
+          "& .M4LPrintingSystem-paperNodeContainerTitles": {
+            display: "flex",
+            padding: "4px",
+            border: "2px",
+            backgroundColor: "#F0F2F2",
+            "& .M4LPrintingSystem-paperNodeTitle": {
+              ...e.colorSchemes.finalTheme.typography.subtitleDens,
+              fontSize: "12px!important",
+              color: "#364040"
+            },
+            "& .M4LPrintingSystem-paperNodeTitleSecondary": {
+              ...e.colorSchemes.finalTheme.typography.subtitleDens,
+              fontSize: "12px!important",
+              paddingLeft: "10px",
+              marginLeft: "10px",
+              borderLeft: "1px solid",
+              borderColor: "#A7B4B9"
+            }
+          },
+          "& .M4LPrintingSystem-paperNodeContent": {
+            padding: "4px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "3px"
+          }
+        },
+        "& .M4LPrintingSystem-propertyValueNodeRoot": {
+          display: "flex",
+          "&.M4LPrintingSystem-propertyValueNodeVertical": {
+            flexDirection: "row",
+            "& .M4LPrintingSystem-propertyValueNodeContent": {
+              padding: "4px 0px 4px 8px"
+            },
+            "& .M4LPrintingSystem-propertyValueNodeTitle": {
+              padding: "4px"
+            }
+          },
+          "&.M4LPrintingSystem-propertyValueNodeHorizontal": {
+            flexDirection: "column",
+            "& .M4LPrintingSystem-propertyValueNodeContent": {
+              padding: "4px 0",
+              border: "unset"
+            },
+            "& .M4LPrintingSystem-propertyValueNodeTitle": {
+              padding: "4px 0"
+            }
+          },
+          "& .M4LPrintingSystem-propertyValueNodeTitle": {
+            ...e.colorSchemes.finalTheme.typography.body,
+            color: "#323B3B",
+            borderBottom: "1px solid",
+            borderColor: "#323B3B"
+          },
+          "& .M4LPrintingSystem-propertyValueNodeContent": {
+            ...e.colorSchemes.finalTheme.typography.body,
+            width: "100%",
+            borderBottom: "1px solid",
+            borderColor: "#E9EBEB"
+          }
+        },
+        "& .M4LPrintingSystem-dividerNodeRoot": {
+          backgroundColor: "#c9c9c9",
+          "&.M4LPrintingSystem-dividerNodeVertical": {
+            width: "1px",
+            height: "100%"
+          },
+          "&.M4LPrintingSystem-dividerNodeHorizontal": {
+            height: "1px",
+            width: "100%"
+          }
+        },
+        "& .M4LPrintingSystem-gridNodeRoot": {
+          borderCollapse: "collapse",
+          width: "100%",
+          "& .M4LPrintingSystem-gridNodeTh": {
+            display: "flex",
+            alignItems: "center",
+            padding: "2px 10px",
+            height: "40px",
+            borderRadius: "2px",
+            backgroundColor: "#E1E9EA",
+            flex: "1",
+            ...e.colorSchemes.finalTheme.typography.bodyDens,
+            color: "#364040",
+            "&:first-of-type": {
+              borderTopLeftRadius: "10px"
+            },
+            "&:last-of-type": {
+              borderTopRightRadius: "10px",
+              flex: 1
+            }
+          },
+          "& .M4LPrintingSystem-gridNodeTd": {
+            display: "flex",
+            alignItems: "center",
+            padding: "2px 10px",
+            minHeight: "30px",
+            height: "auto",
+            flex: "1",
+            ...e.colorSchemes.finalTheme.typography.body,
+            color: "#364040"
+          },
+          "& .M4LPrintingSystem-gridNodeTr": {
+            display: "flex",
+            width: "100%",
+            gap: "2px",
+            "&:nth-of-type(odd) .M4LPrintingSystem-gridNodeTd": {
+              backgroundColor: "#F0F4F4"
+            },
+            "&:nth-of-type(even) .M4LPrintingSystem-gridNodeTd": {
+              backgroundColor: "#F7FCFC"
+            }
+          }
+        },
+        "& .M4LPrintingSystem-chartNodeRoot": {
+          display: "flex",
+          justifyContent: "center",
+          maxHeight: "300px"
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LPropertyValue.js

@@ -0,0 +1,123 @@
+const e = (t) => ({
+  M4LPropertyValue: {
+    styleOverrides: {
+      "&.M4LPropertyValue-root": {
+        test: "root",
+        display: "grid",
+        alignItems: "flex-start",
+        width: "100%",
+        minHeight: "23px",
+        //height: '24px',
+        flexDirection: "column",
+        borderBottom: "1px solid",
+        borderColor: t.vars.palette?.border.disabled,
+        // Condición de visualización de vista móvil.
+        "&.M4LPropertyValue-isMobile": {
+          gridTemplateColumns: "1fr!important",
+          minHeight: "24px"
+        },
+        // Condicion con variación de formulario.
+        "&.M4LPropertyValue-variantIsForm": {
+          minHeight: "24px",
+          borderBottom: "none",
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          alignItems: "flex-start"
+        },
+        // Elemento property
+        "& .M4LPropertyValue-property": {
+          maxWidth: "100%",
+          width: "100% !important",
+          minHeight: "24px",
+          //height: '24px !important',
+          ...t.colorSchemes.finalTheme.typography.body,
+          color: t.vars.palette.text.secondary,
+          fontWeight: "400 !important",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-start",
+          position: "relative",
+          gap: "8px",
+          overflow: "hidden",
+          overflowWrap: "break-word",
+          "& .M4LTypography-root": {
+            ...t.colorSchemes.finalTheme.typography.body,
+            color: t.vars.palette.text.secondary,
+            fontWeight: "400 !important"
+          }
+        },
+        "& .M4LPropertyValue-value": {
+          maxWidth: "100%",
+          width: "100%",
+          minHeight: "24px",
+          //height: '24px !important',
+          ...t.colorSchemes.finalTheme.typography.body,
+          color: t.vars.palette.text.primary,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          position: "relative",
+          display: "flex",
+          flexDirection: "column",
+          overflowWrap: "break-word",
+          justifyContent: "center",
+          "& .M4LTypography-root": {
+            ...t.colorSchemes.finalTheme.typography.body,
+            color: t.vars.palette.text.primary
+          },
+          "& .M4LRHFTextField-root.M4LRHFTextField-sizeSmall": {
+            "& .MuiFormControl-root": {
+              "& .MuiInputBase-root": {
+                //borderRadius: '0',
+                //background: 'transparent',
+                "& .MuiOutlinedInput-notchedOutline": {
+                  //border: '0',
+                  //borderRadius: '0',
+                }
+              }
+            }
+          },
+          "& .M4LRHFTextField-root.M4LRHFTextField-sizeMedium": {
+            "& .MuiFormControl-root": {
+              "& .MuiInputBase-root": {
+                //borderRadius: '0',
+                //background: 'transparent',
+                "& .MuiOutlinedInput-notchedOutline": {
+                  //border: '0',
+                  //borderRadius: '0',
+                }
+              }
+            }
+          }
+        },
+        [t.breakpoints.down("sm")]: {
+          minHeight: "72px",
+          height: "auto",
+          alignItems: "center",
+          paddingTop: "8px",
+          "&.M4LPropertyValue-variantIsForm": {
+            "& .M4LTypography-root": {
+              paddingLeft: "8px"
+            }
+          },
+          // Elemento property
+          "& .M4LPropertyValue-property": {
+            minHeight: "36px",
+            height: "auto",
+            justifyContent: "center",
+            padding: "8px"
+          },
+          "& .M4LPropertyValue-value": {
+            minHeight: "36px",
+            height: "auto",
+            padding: "12px 16px",
+            justifyContent: "center"
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  e as M
+};

package/theme/overrides/M4LExtendedComponents/M4LRHFormProvider.js

@@ -0,0 +1,19 @@
+const r = (o) => ({
+  M4LRHFormProvider: {
+    styleOverrides: {
+      "&.M4LRHFormProvider-root": {
+        display: "flex",
+        flexDirection: "column",
+        width: "100%",
+        height: "auto",
+        gap: "8px",
+        "& .M4LCommonActions-root": {
+          padding: "16px 0px 0px 0px"
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

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

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

package/theme/overrides/M4LExtendedComponents/M4LScrollBar.js

@@ -0,0 +1,36 @@
+const e = (r) => ({
+  M4LScrollBar: {
+    styleOverrides: {
+      "&.M4LScrollBar-root": {
+        flexGrow: "1",
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        minHeight: "inherit",
+        /* '& .simplebar-content': {
+          height: '100%',
+        }, */
+        "& .simplebar-scrollbar.simplebar-visible:before": {
+          opacity: "1"
+        },
+        '& .simplebar-content-wrapper[style*="overflow: hidden scroll;"] .simplebar-content': {
+          marginRight: "9px"
+        },
+        '& .simplebar-content-wrapper[style*="overflow: scroll hidden;"] .simplebar-content': {
+          marginBottom: "9px"
+        },
+        "& .simplebar-track.simplebar-horizontal .simplebar-scrollbar:before": {
+          background: r.vars.palette.general.scrollBar,
+          borderRadius: "2px"
+        },
+        "& .simplebar-track.simplebar-vertical .simplebar-scrollbar:before": {
+          background: r.vars.palette.general.scrollBar,
+          borderRadius: "2px"
+        }
+      }
+    }
+  }
+});
+export {
+  e as M
+};