@m4l/styles 6.4.0 → 6.4.1

package/theme/overrides/M4LExtendedComponents/M4LIconButton.js

@@ -0,0 +1,153 @@
+const r = (o) => ({
+  M4LIconButton: {
+    styleOverrides: {
+      "&.M4LIconButton-root": {
+        position: "relative",
+        borderRadius: "4px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        transition: "all .3s ease",
+        "& .M4LIcon-root .M4LIcon-icon": {
+          transition: "all .3s ease",
+          //Cambiado bgPrimary temporalmente , originalmente primary
+          backgroundColor: o.vars.palette.text.primary
+        },
+        // '& .M4LIcon-root .M4LIcon-icon': {
+        //     backgroundColor: theme.vars.palette.text.bgPrimary,
+        // },
+        "&::before": {
+          boxSizing: "content-box",
+          border: "1px solid",
+          borderColor: o.vars.palette.primary.focusActive,
+          borderRadius: "4px",
+          position: "absolute",
+          transition: "all .3s ease"
+        },
+        "&.M4LIconButton-sizeSmall": {
+          width: "24px",
+          height: "24px",
+          "& .MuiSkeleton-root": {
+            width: "16px",
+            height: "16px"
+          }
+        },
+        "&.M4LIconButton-sizeMedium": {
+          width: "36px",
+          height: "36px",
+          "& .MuiSkeleton-root": {
+            width: "20px",
+            height: "20px"
+          }
+        },
+        /* Size property */
+        "& .MuiIconButton-root": {
+          position: "static",
+          borderRadius: "4px",
+          padding: "0px"
+        },
+        /* '.MuiIconButton-root:hover': {
+                      backgroundColor: 'transparent',
+                  }, */
+        /* Variant primary */
+        "&.M4LIconButton-variantPrimary:not(&.M4LIconButton-isDisabled)": {
+          backgroundColor: o.vars.palette.background?.default,
+          "&:hover": {
+            backgroundColor: o.vars.palette.primary?.hover,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.common?.white
+            }
+          },
+          "&:active": {
+            backgroundColor: o.vars.palette.primary.focusActive,
+            transition: "background-color .5s ease",
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.common?.white
+            }
+          },
+          "&.M4LIconButton-isFocus": {
+            backgroundColor: o.vars.palette.primary.focusActive,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.common?.white
+            },
+            "&::before": {
+              content: "''"
+            }
+          }
+        },
+        /* Variant secondary */
+        "&.M4LIconButton-variantSecondary:not(&.M4LIconButton-isDisabled)": {
+          borderColor: o.vars.palette?.border.disabled,
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.text.primary
+          },
+          "&:hover": {
+            border: "1px solid",
+            borderColor: o.vars.palette.primary.focusActive,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.primary.focusActive
+            }
+          },
+          "&:active": {
+            border: "1px solid",
+            borderColor: o.vars.palette.primary.focusActive,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.primary.focusActive
+            }
+          },
+          "&.M4LIconButton-isFocus": {
+            border: "1px solid",
+            borderColor: o.vars.palette.primary.focusActive,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.primary.focusActive
+            },
+            "&::before": {
+              content: "''"
+            }
+          }
+        },
+        /* Variant line */
+        "&.M4LIconButton-variantLine:not(&.M4LIconButton-isDisabled)": {
+          "&:hover": {
+            backgroundColor: o.vars.palette.primary.opacity,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.primary.focusActive
+            }
+          },
+          "&:active": {
+            backgroundColor: "transparent",
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.primary.focusActive
+            }
+          },
+          "&.M4LIconButton-isFocus": {
+            backgroundColor: "transparent",
+            border: "1px solid",
+            borderColor: o.vars.palette.primary.focusActive,
+            "& .M4LIcon-icon": {
+              backgroundColor: o.vars.palette.primary.focusActive
+            }
+          }
+        },
+        /* Variant disabled */
+        "&.M4LIconButton-isDisabled": {
+          "& .M4LIcon-icon": {
+            backgroundColor: o.vars.palette.text.disabled
+          }
+        },
+        /* Variant skeleton */
+        "&.M4LIconButton-root .MuiSkeleton-root": {
+          borderRadius: "4px"
+        },
+        //TODO: Para cambiar
+        "&.M4LIconButton-togglePressed": {
+          backgroundColor: "red!important",
+          prop1: 1
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LExtendedComponents/M4LImage.js

@@ -0,0 +1,15 @@
+const t = (e) => ({
+  M4LImage: {
+    styleOverrides: {
+      "&.M4LImage-root": {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center"
+      }
+    }
+  }
+});
+export {
+  t as M
+};

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

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

package/theme/overrides/M4LExtendedComponents/M4LImageButton.js

@@ -0,0 +1,58 @@
+const e = (t) => ({
+  M4LImageButton: {
+    styleOverrides: {
+      "&.M4LImageButton-root": {
+        test: "root",
+        ".MuiButtonBase-root": {
+          display: "flex",
+          padding: "4px",
+          borderRadius: "6px",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: "24px",
+          minWidth: "24px",
+          height: "24px",
+          width: "24px"
+        },
+        ".M4LImage-root": {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          objectFit: "cover",
+          width: "100%",
+          height: "100%"
+        },
+        ".M4LImage-lazyLoad": {
+          borderRadius: "4px",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        ".M4LImage-img": {
+          borderRadius: "4px"
+        },
+        ".MuiButtonBase-root:hover": {
+          backgroundColor: t.vars.palette.primary.opacity
+        },
+        ".MuiButtonBase-root:focus": {
+          backgroundColor: t.vars.palette.primary.opacity,
+          border: "1px solid",
+          borderColor: t.vars.palette.primary.focusActive
+        },
+        [t.breakpoints.down("md")]: {
+          ".MuiButtonBase-root": {
+            minHeight: "36px",
+            minWidth: "36px",
+            height: "36px",
+            width: "36px"
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  e as M
+};

package/theme/overrides/M4LExtendedComponents/M4LMFLoader.js

@@ -0,0 +1,23 @@
+const r = (e) => ({
+  M4LMFLoader: {
+    styleOverrides: {
+      "&.M4LMFLoader-root": {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        overflow: "auto",
+        "& .M4LMFLoader-containerLinearProgress": {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center"
+        }
+      }
+    }
+  }
+});
+export {
+  r as M
+};

package/theme/overrides/M4LExtendedComponents/M4LMap.js

@@ -0,0 +1,283 @@
+const o = (e) => ({
+  M4LMap: {
+    styleOverrides: {
+      "&.M4LMap-root": {
+        width: "100%",
+        height: "100%",
+        flexGrow: "1",
+        overflow: "hidden",
+        position: "relative",
+        /*
+         * Control superior izquierdo
+         */
+        "& .M4LMap-topLeftToolsRoot": {
+          display: "flex",
+          backgroundColor: "blue"
+          //Por cambiar
+        },
+        /**
+         * Control superior derecho
+         */
+        "& .M4LMap-topRigthToolsRoot": {
+          backgroundColor: "blue",
+          //Por cambiar
+          display: "flex",
+          right: 0,
+          position: "absolute",
+          /**
+           * Zoom buttons
+           */
+          "& .M4LMap-zoomButtons": {
+            display: "flex"
+          }
+        },
+        /**
+         * Marcas
+         */
+        "& .M4LMap-markerLayerRoot": {},
+        "& .M4LMap-markerLayerIcon": {
+          transformOrigin: "center center",
+          justifyContent: "center",
+          top: 0,
+          left: 0,
+          filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
+          display: "flex",
+          alignItems: "center",
+          " > img ": {
+            height: "24px"
+          }
+        },
+        "& .M4LMap-featureLabel": {
+          position: "absolute",
+          display: "flex",
+          transformOrigin: "left center",
+          fontSize: "11px",
+          borderRadius: "4px",
+          maxWidth: "300px",
+          fontWeight: "bolder",
+          padding: "2px 8px",
+          opacity: ".85",
+          filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.3))",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        },
+        //Herramienta de medición Formulario
+        "& .M4LMap-meaureToolRoot": {
+          backgroundColor: "green",
+          //Por cambiar
+          height: "100%",
+          width: "100%"
+        },
+        "& .M4LMap-measureToolFormValue": {
+          justifyContent: "center"
+        },
+        "& .M4LMap-measureToolFormValueDistance": {
+          border: "1px solid white",
+          margin: "0 5px",
+          fontWeight: 800,
+          //Por cambiar
+          fontSize: "large"
+          //Por cambiar
+        },
+        //Marker measure Point Icon
+        "& .M4LMap-measureMarkerRoot": {
+          "--color": "green"
+        },
+        "& .M4LMap-measureMarkerContainer": {
+          position: "relative",
+          cursor: "pointer"
+        },
+        "& .M4LMap-measureMarkerContainerRhomb": {
+          position: "absolute",
+          filter: "drop-shadow(0px 0px 3px rgba(0,0,0,.4))",
+          width: "31px",
+          height: "31px",
+          borderRadius: "50% 50% 50% 0",
+          border: "4px solid var(--color)",
+          backgroundColor: "var(--color)",
+          transform: "rotate(-45deg)"
+        },
+        "& .M4LMap-measureMarkerContainerSlot": {
+          position: "absolute",
+          background: "#fff",
+          borderRadius: "50%",
+          overflow: "hidden",
+          top: "3px",
+          left: "3px",
+          width: "25px",
+          height: "24px"
+        },
+        "& .M4LMap-measureMarkerContainerSlotNumber": {
+          fontSize: "14px",
+          fontWeight: "600",
+          textAlign: "center",
+          marginTop: "1px",
+          color: "black"
+        },
+        //Marker Point Label
+        "& .M4LMap-measureLabelMarkerRoot": {
+          "--color": "yellow"
+        },
+        "& .M4LMap-measureLabelMarkerContainer": {
+          backgroundColor: "var(--color)",
+          border: "1px solid gray",
+          color: "#fff",
+          width: "80px",
+          marginLeft: "15px",
+          marginTop: "15px"
+        },
+        "& .M4LMap-measureLabelMarkerDistance": {
+          color: "gray"
+        },
+        "& .M4LMap-measureLabelMarkerRemove": {
+          color: "blue"
+        },
+        //Cluster Markers
+        //Animacion
+        "& .leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow": {
+          "-webkit-transition": "-webkit-transform 0.3s ease-out, opacity 0.3s ease-in",
+          "-moz-transition": "-moz-transform 0.3s ease-out, opacity 0.3s ease-in",
+          "-o-transition": "-o-transform 0.3s ease-out, opacity 0.3s ease-in",
+          transition: "transform 0.3s ease-out, opacity 0.3s ease-in"
+        },
+        //Spider
+        "& .leaflet-cluster-spider-leg": {
+          "-webkit-transition": "-webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in",
+          "-moz-transition": "-moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in",
+          "-o-transition": "-o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in",
+          transition: "stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in"
+        },
+        //Colores de los clusters dependiendo de la cantidad de las marcas
+        "& .marker-cluster-small": {
+          backgroundColor: "rgba(181, 226, 140, 0.6)"
+        },
+        "& .marker-cluster-small div": {
+          backgroundColor: "rgba(110, 204, 57, 0.6)"
+        },
+        "& .marker-cluster-medium": {
+          backgroundColor: "rgba(241, 211, 87, 0.6)"
+        },
+        "& .marker-cluster-medium div": {
+          backgroundColor: "rgba(240, 194, 12, 0.6)"
+        },
+        "& .marker-cluster-large": {
+          backgroundColor: "rgba(253, 156, 115, 0.6)"
+        },
+        "& .marker-cluster-large div": {
+          backgroundColor: "rgba(241, 128, 23, 0.6)"
+        },
+        /* IE 6-8 fallback colors */
+        "& .leaflet-oldie .marker-cluster-small": {
+          backgroundColor: "rgb(181, 226, 140)"
+        },
+        "& .leaflet-oldie .marker-cluster-small div": {
+          backgroundColor: "rgb(110, 204, 57)"
+        },
+        "& .leaflet-oldie .marker-cluster-medium": {
+          backgroundColor: "rgb(241, 211, 87)"
+        },
+        "& .leaflet-oldie .marker-cluster-medium div": {
+          backgroundColor: "rgb(240, 194, 12)"
+        },
+        "& .leaflet-oldie .marker-cluster-large": {
+          backgroundColor: "rgb(253, 156, 115)"
+        },
+        "& .leaflet-oldie .marker-cluster-large div": {
+          backgroundColor: "rgb(241, 128, 23)"
+        },
+        //Cluster Markers
+        "& .marker-cluster": {
+          backgroundClip: "padding-box",
+          borderRadius: "20px"
+        },
+        "& .marker-cluster div": {
+          width: "30px",
+          height: "30px",
+          marginLeft: "5px",
+          marginTop: "5px",
+          textAlign: "center",
+          borderRadius: "15px",
+          font: '12px "Helvetica Neue", Arial, Helvetica, sans-serif'
+        },
+        //Cluster Markers
+        "& .marker-cluster span": {
+          lineHeight: "30px"
+        },
+        "& .xxxxx": {
+          color: e.vars.palette.error.main,
+          "& .M4LIcon-root .M4LIcon-icon": {
+            backgroundColor: e.vars.palette.error.main
+          }
+        },
+        "& .leaflet-control-scale-line": {
+          color: "red"
+          //Ejemplo de como estilar el control de scala
+        }
+      }
+    }
+  },
+  M4LMapMapSources: {
+    styleOverrides: {
+      "&.M4LMap-mapSourcesPopoverRoot": {
+        mt: 1.5,
+        ml: 0.75,
+        "& .MuiPaper-root": {
+          backgroundColor: "gray",
+          //Por cambiar
+          width: "400px!important",
+          height: 400
+        },
+        "& .M4LMap-mapSourcesRoot": {
+          postion: "relative",
+          height: "100%",
+          "& .M4LMap-mapSourcesOption": {
+            display: "flex",
+            "& .M4LMap-mapSourcesOptionIconLabel": {
+              display: "flex"
+            },
+            "& .M4LMap-mapSourcesOptionRoadOptions": {
+              display: "flex",
+              "& .M4LMap-mapSourcesOptionRoadOptionsCheck": {
+                display: "flex"
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  M4LMapLayers: {
+    styleOverrides: {
+      "&.M4LMap-layersPopoverRoot": {
+        mt: 1.5,
+        ml: 0.75,
+        "& .MuiPaper-root": {
+          backgroundColor: "gray",
+          //Por cambiar
+          width: "400px!important",
+          height: 400
+        },
+        "& .M4LMap-mapSourcesRoot": {
+          postion: "relative",
+          height: "100%",
+          "& .M4LMap-mapSourcesOption": {
+            display: "flex",
+            "& .M4LMap-mapSourcesOptionIconLabel": {
+              display: "flex"
+            },
+            "& .M4LMap-mapSourcesOptionRoadOptions": {
+              display: "flex",
+              "& .M4LMap-mapSourcesOptionRoadOptionsCheck": {
+                display: "flex"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};

package/theme/overrides/M4LExtendedComponents/M4LMapGpsTools.js

@@ -0,0 +1,62 @@
+const s = (o) => ({
+  M4LMapGpsTools: {
+    styleOverrides: {
+      "&.M4LMapGpsTools-gpsToolsRoot": {
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
+        flexGrow: 1,
+        width: "100%",
+        height: "100%",
+        "& .M4LMapGpsTools-gpsToolsTabContent.M4LMapGpsTools-hidden": {
+          display: "none"
+        }
+      }
+    }
+  },
+  M4LMapGpsToolsGeofencesList: {
+    styleOverrides: {
+      "&.M4LMapGpsTools-gpsToolsGeofencesList": {
+        padding: "12px",
+        position: "relative !important",
+        flexGrow: 1,
+        width: "100%",
+        "& .M4LDataGrid-root": {
+          height: "unset !important",
+          flexGrow: 1
+        }
+      }
+    }
+  },
+  M4LMapGpsToolsGeofencesAddEdit: {
+    styleOverrides: {
+      "&.M4LMapGpsTools-gpsToolsGeofencesAddEdit": {
+        height: "100% !important",
+        "& .M4LMapGpsTools-gpsToolsGeofencesAddEditContent": {
+          overflow: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          // height: '100%',
+          "& .M4LMapGpsTools-gpsToolsTabContent": {
+            padding: "12px",
+            overflow: "auto"
+          },
+          "& .M4LMapGpsTools-gpsToolsGeofencesAddEditDrawFinishContainer": {
+            display: "flex",
+            minWidth: "60px",
+            marginTop: "14px"
+            // justifyContent: 'flex-end',
+            // padding: '12px',
+          }
+        },
+        "& .M4LMapGpsTools-gpsToolsTabContent.M4LMapGpsTools-hidden": {
+          display: "none"
+        }
+      }
+    }
+  }
+});
+export {
+  s as M
+};

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

@@ -7,7 +7,7 @@ export declare const M4LMasterDetailLayout: (_theme: Omit<Theme, "palette" | "ap
                 width: string;
                 height: string;
                 overFlow: string;
-                "& .M4LModuleLayout-root .M4LModuleLayout-moduleContent": {
+                '& .M4LModuleLayout-root .M4LModuleLayout-moduleContent': {
                     display: string;
                     width: string;
                     height: string;
@@ -21,11 +21,11 @@ export declare const M4LMasterDetailLayout: (_theme: Omit<Theme, "palette" | "ap
                         gap: string;
                     };
                 };
-                "& .M4LSplitLayout-secondPart": {
+                '& .M4LSplitLayout-secondPart': {
                     background: string;
                     borderRadius: string;
                 };
-                "& .layout-pane-primary": {
+                '& .layout-pane-primary': {
                     background: string;
                     borderRadius: string;
                 };

package/theme/overrides/M4LExtendedComponents/M4LMasterDetailLayout.js

@@ -0,0 +1,38 @@
+const o = (a) => ({
+  M4LMasterDetailLayout: {
+    styleOverrides: {
+      "&.M4LMasterDetailLayout-root": {
+        display: "flex",
+        width: "100%",
+        height: "100%",
+        overFlow: "visible",
+        "& .M4LModuleLayout-root .M4LModuleLayout-moduleContent": {
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          boxShadow: "none",
+          background: a.vars.palette.background.default,
+          border: "0px",
+          borderColor: "transparent",
+          borderRadius: "4px",
+          overFlow: "visible",
+          "& .splitter-layout": {
+            gap: "8px"
+          }
+        },
+        /* test properties */
+        "& .M4LSplitLayout-secondPart": {
+          background: a.vars.palette.background.default,
+          borderRadius: "4px"
+        },
+        "& .layout-pane-primary": {
+          background: a.vars.palette.background.default,
+          borderRadius: "4px"
+        }
+      }
+    }
+  }
+});
+export {
+  o as M
+};