@m4l/components 3.1.9 → 4.0.0

package/styles/PopupViewer.styles-BO9qka2A.js

@@ -0,0 +1,101 @@
+const CONTAINER_QUERY_NAME = "poupup_root";
+const popupsViewerStyles = {
+  root: ({ ownerState }) => ({
+    containerName: CONTAINER_QUERY_NAME,
+    containerType: "inline-size",
+    position: "absolute",
+    left: "0px",
+    top: "0px",
+    width: "0px",
+    height: "0px",
+    cursor: "default",
+    zIndex: ownerState.baseZindex || 0
+  }),
+  popupDragWindowRoot: ({ theme, ownerState }) => ({
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    backgroundColor: theme.vars.palette.background.default,
+    zIndex: ownerState.zIndex || 0,
+    "&.fade-enter": {
+      opacity: 0
+    },
+    "&.fade-enter-active": {
+      opacity: 1,
+      transition: "opacity 300ms"
+    },
+    "&.fade-enter-done": {
+      opacity: 1
+    },
+    "& .fade-exit": {
+      opacity: 1
+    },
+    "& .fade-exit-active": {
+      opacity: 0
+      //transition: 'opacity 10ms',
+    },
+    ...ownerState?.status === "hidden" ? {
+      visibility: "hidden",
+      pointerEvents: "none"
+    } : {},
+    ...ownerState?.variant === "small" ? {
+      border: "1px solid red"
+    } : {}
+  }),
+  pDWHeaderContainer: ({ ownerState }) => ({
+    display: "flex",
+    position: "relative",
+    margin: "6px",
+    gap: "8px",
+    marginLeft: "8px",
+    borderBottom: "2px solid blue",
+    cursor: "move",
+    ...ownerState?.variant === "small" ? {
+      border: "1px solid green"
+    } : {}
+  }),
+  pDWHeaderTitle: ({ ownerState }) => ({
+    flexGrow: 1,
+    fontWeight: "bold",
+    ...ownerState?.subTitle ? {
+      flexGrow: "unset",
+      "&:after": {
+        content: '"*"',
+        color: "red",
+        fontSize: "22px",
+        top: "0px",
+        bottom: "0px",
+        position: "absolute"
+      }
+    } : {}
+  }),
+  pDWHeaderSubTitle: ({}) => ({
+    flexGrow: 1
+  }),
+  pDWContentRoot: ({}) => ({
+    display: "flex",
+    padding: "12px",
+    position: "relative",
+    flexGrow: 1,
+    flexDirection: "column",
+    overflow: "hidden"
+  }),
+  pDWContentEditionInfo: ({}) => ({
+    display: "flex",
+    justifyContent: "flex-end",
+    "& .M4LIcon-root": {
+      paddingRight: "8px"
+    }
+  }),
+  pDWContentWrapper: ({}) => ({
+    flexGrow: 1,
+    display: "flex",
+    position: "relative",
+    overflow: "auto"
+  })
+};
+export {
+  popupsViewerStyles as p
+};

package/styles/RHFTextField.styles-DwXqdTof.js

@@ -0,0 +1,107 @@
+import { inputBaseClasses } from "@mui/material/InputBase";
+import { typographyClasses } from "@mui/material/Typography";
+const rhfTextFieldStyles = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    gap: "2px",
+    outline: "unset",
+    height: "auto",
+    "& .MuiFormControl-root": {
+      minHeight: "24px",
+      height: "auto",
+      "& .MuiInputBase-multiline": {
+        minHeight: "24px",
+        height: "auto",
+        "& .MuiInputBase-input": {
+          padding: "4px"
+        },
+        "& .MuiOutlinedInput-notchedOutline": {
+          height: "100%",
+          padding: "4px"
+        }
+      }
+    }
+  },
+  fieldLabel: ({ theme }) => ({
+    [`& > .M4LFieldLabel-label > .${typographyClasses.root}`]: {
+      color: theme.vars.palette.text.secondary,
+      transition: "all .5s ease"
+    }
+  }),
+  textField: ({ theme, ownerState }) => ({
+    [`& .${inputBaseClasses.root}`]: {
+      borderRadius: "4px",
+      ...ownerState.size === "small" && {
+        height: "24px",
+        padding: "0px 8px",
+        borderdRadius: "4px",
+        [`& .${inputBaseClasses.inputMultiline}`]: {
+          minHeight: "24px",
+          height: "100%"
+        },
+        [theme.breakpoints.up("sm")]: {
+          height: "20px",
+          padding: "0px 8px"
+        }
+      },
+      // Estilos específicos para el tamaño medium
+      ...ownerState.size === "medium" && {
+        height: "36px",
+        padding: "0px 8px",
+        [`& .${inputBaseClasses.inputMultiline}`]: {
+          minHeight: "36px",
+          height: "100%"
+        },
+        [theme.breakpoints.up("sm")]: {
+          height: "24px",
+          padding: "0px 8px"
+        }
+      }
+    },
+    "& .MuiInputBase-input": {
+      fontSize: "0.875rem",
+      padding: "0px 8px",
+      height: "100%"
+    },
+    "& .MuiOutlinedInput-root": {
+      "&:not(.Mui-focused,input:disabled):hover fieldset": {
+        transition: "all .3s ease",
+        borderColor: ownerState?.error === true ? theme.vars.palette.error.main : theme.vars.palette.primary.light,
+        color: theme.vars.palette.primary?.active,
+        background: theme.vars.palette.primary?.activeOpacity
+      },
+      "&:has(:disabled) fieldset": {
+        color: theme.vars.palette.text.disabled
+      },
+      "&:focus-within": {
+        borderColor: !ownerState.isValid ? theme.palette.error.main : theme.palette.primary?.focus
+      },
+      ...ownerState.isValid === false ? {
+        borderColor: theme.palette.error.main
+      } : {}
+    }
+  }),
+  /*  SkeletonTextField Styles */
+  skeletonTextFieldRoot: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    gap: "4px"
+  },
+  wrapperSkeletonRHFTextField: ({ theme }) => ({
+    display: "flex",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "12px 14px",
+    borderRadius: theme.spacing(1),
+    gap: "4px",
+    backgroundColor: theme.vars.palette.background.main,
+    height: "20px"
+  })
+};
+export {
+  rhfTextFieldStyles as r
+};

package/styles/ToastContainer.styles-TDFVsYNR.js

@@ -0,0 +1,202 @@
+const toastStyles = {
+  root: ({ theme, ownerState }) => ({
+    "--toastify-color-light": theme.vars.palette.background.default,
+    "--toastify-color-dark": theme.vars.palette.background.default,
+    "--toastify-color-info": theme.vars.palette.info.main,
+    "--toastify-color-success": theme.vars.palette.success.main,
+    "--toastify-color-warning": theme.vars.palette.warning.main,
+    "--toastify-color-error": theme.vars.palette.error.main,
+    "--toastify-color-transparent": "rgba(255, 255, 255, 0.7)",
+    "--toastify-icon-color-info": "var(--toastify-color-info)",
+    "--toastify-icon-color-success": "var(--toastify-color-success)",
+    "--toastify-icon-color-warning": "var(--toastify-color-warning)",
+    "--toastify-icon-color-error": "var(--toastify-color-error)",
+    "--toastify-toast-width": "320px",
+    "--toastify-toast-background": "#fff",
+    "--toastify-toast-min-height": "64px",
+    "--toastify-toast-max-height": "800px",
+    "--toastify-font-family": "sans-serif",
+    "--toastify-z-index": "9999",
+    "--toastify-text-color-light": "#757575",
+    "--toastify-text-color-dark": "#fff",
+    //Used only for colored theme
+    "--toastify-text-color-info": "#fff",
+    "--toastify-text-color-success": "#fff",
+    "--toastify-text-color-warning": "#fff",
+    "--toastify-text-color-error": "#fff",
+    "--toastify-spinner-color": "#616161",
+    "--toastify-spinner-color-empty-area": "#e0e0e0",
+    // Used when no type is provided
+    // toast("**hello**")
+    "--toastify-color-progress-light": "var(--toastify-color-info)",
+    // Used when no type is provided
+    "--toastify-color-progress-dark": "var(--toastify-color-info)",
+    "--toastify-color-progress-info": "var(--toastify-color-info)",
+    "--toastify-color-progress-success": "var(--toastify-color-success)",
+    "--toastify-color-progress-warning": "var(--toastify-color-warning)",
+    "--toastify-color-progress-error": "var(--toastify-color-error)",
+    "--toastify-toast-bd-radius": "8px",
+    // used to control the opacity of the progress trail
+    "--toastify-color-progress-bgo": ".2",
+    ...ownerState?.fixed === false ? {
+      top: 0,
+      position: "absolute",
+      zIndex: theme.vars.zIndex.snackbar,
+      "@supports (position: sticky)": {
+        position: "sticky"
+      }
+    } : {},
+    "& .Toastify": {
+      margin: 0,
+      padding: 0,
+      height: 0
+    },
+    "& .Toastify__toast-container": {
+      display: "flex",
+      flexDirection: "column",
+      gap: "16px",
+      ...ownerState?.fixed === false ? {
+        top: "4px",
+        position: "absolute"
+      } : {},
+      [theme.breakpoints.down(480)]: {
+        width: "100%",
+        minWidth: "100%",
+        padding: "0"
+      }
+    },
+    /** Used to define the position of the ToastContainer **/
+    ".Toastify__toast-container--top-left": {},
+    ".Toastify__toast-container--top-center": {},
+    ".Toastify__toast-container--top-right": {},
+    ".Toastify__toast-container--bottom-left": {},
+    ".Toastify__toast-container--bottom-center": {},
+    ".Toastify__toast-container--bottom-right": {},
+    "& .Toastify__toast--stacked[data-collapsed=true]:not(:last-child) > *": {
+      opacity: 0.2
+    },
+    /** Classes for the displayed toast **/
+    "& .Toastify__toast": {
+      minHeight: "min-content",
+      margin: "0",
+      padding: "0",
+      backgroundColor: theme.vars.palette.background.default,
+      boxShadow: theme.customShadows?.z3,
+      borderRadius: "4px",
+      [theme.breakpoints.down(480)]: {
+        margin: "1%",
+        width: "98% !important"
+      }
+    },
+    ".Toastify__toast--rtl": {},
+    "& .Toastify__toast-body": {
+      margin: "0px",
+      padding: "0px"
+    },
+    /** Used to position the icon **/
+    "& .Toastify__toast-icon": {},
+    /** handle the notification color and the text color based on the theme **/
+    "& .Toastify__toast-theme--dark": {},
+    "& .Toastify__toast-theme--light": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--default": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--info": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--success": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--warning": {},
+    "& .Toastify__toast-theme--colored.Toastify__toast--error": {},
+    "& .Toastify__progress-bar--wrp": {
+      position: "absolute",
+      top: 0,
+      height: "2px",
+      borderTopLeftRadius: "2px",
+      borderTopRightRadius: "2px",
+      borderBottomLeftRadius: "0",
+      borderBottomRightRadius: "0",
+      overflow: "hidden"
+    },
+    "& .Toastify__progress-bar": {
+      borderTopLeftRadius: "2px",
+      borderBottomLeftRadius: "0",
+      borderBottomRightRadius: "0"
+    },
+    "& .Toastify__progress-bar--rtl": {},
+    "& .Toastify__progress-bar-theme--light": {},
+    "& .Toastify__progress-bar-theme--dark": {},
+    "& .Toastify__progress-bar--info": {},
+    "& .Toastify__progress-bar--success": {},
+    "& .Toastify__progress-bar--warning": {},
+    "& .Toastify__progress-bar--error": {}
+  }),
+  messageRoot: {
+    display: "flex",
+    flexDirection: "column",
+    width: "100%",
+    padding: "4px"
+  },
+  messageHeader: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    height: "24px",
+    minHeight: "24px",
+    gap: "4px"
+  },
+  messageIconRoot: {},
+  messageIcon: ({ theme, ownerState }) => ({
+    "&.M4LIcon-root": {
+      height: "24px",
+      width: "24px",
+      "& > .M4LIcon-icon": {
+        backgroundColor: ownerState?.type === "info" ? theme.vars.palette.info.main : ownerState?.type === "success" ? theme.vars.palette.success.main : ownerState?.type === "warning" ? theme.vars.palette.warning.main : ownerState?.type === "error" ? theme.vars.palette.error.main : theme.vars.palette.info.main
+      }
+    }
+  }),
+  messageTitle: ({ theme }) => ({
+    flex: 1,
+    paddingLeft: "4px",
+    ...theme.colorSchemes.finalTheme.typography.bodyDens,
+    fontWeight: theme.colorSchemes.finalTheme.typography.fontWeightMedium,
+    color: theme.vars.palette.text.primary
+  }),
+  messageDescription: ({ theme }) => ({
+    ...theme.colorSchemes.finalTheme.typography.bodyDens,
+    fontWeight: theme.colorSchemes.finalTheme.typography.fontWeightRegular,
+    color: theme.vars.palette.text.primary,
+    padding: "0 4px 4px 30px"
+  }),
+  messageCloseButton: {
+    border: "none",
+    backgroundColor: "transparent",
+    margin: 0,
+    padding: 0
+  },
+  messageCloseButtonIcon: ({ theme }) => ({
+    "&.M4LIcon-root": {
+      height: "24px",
+      width: "24px",
+      "& > .M4LIcon-icon": {
+        backgroundColor: theme.vars.palette.text.primary,
+        fontsize: "16px"
+      }
+    }
+  }),
+  messagePinButton: {
+    border: "none",
+    backgroundColor: "transparent",
+    margin: 0,
+    padding: 0
+  },
+  messagePinButtonIcon: ({ theme }) => ({
+    "&.M4LIcon-root": {
+      height: "24px",
+      width: "24px",
+      "& > .M4LIcon-icon": {
+        backgroundColor: theme.vars.palette.text.primary,
+        fontsize: "16px"
+      }
+    }
+  })
+};
+export {
+  toastStyles as t
+};

package/test/constants_no_mock-CF-669v-.js

@@ -0,0 +1,4 @@
+const TEST_PROP_ID = "data-testid";
+export {
+  TEST_PROP_ID as T
+};

package/test/getNameDataTestId-BaBTWhBr.js

@@ -0,0 +1,10 @@
+const getNameDataTestId = (ELEMENT_PREFIX, ELEMENT_KEY, ELEMENT_ID) => {
+  return `${ELEMENT_PREFIX}-${[ELEMENT_KEY]}-${ELEMENT_ID}`;
+};
+function getPropDataTestId(prefix, keyName) {
+  return process.env.NODE_ENV !== "production" && prefix && keyName ? { ["data-testid"]: `${prefix}-${[keyName]}` } : {};
+}
+export {
+  getPropDataTestId as a,
+  getNameDataTestId as g
+};

package/utils/capitalizeFirstLetter-l0sNRNKZ.js

@@ -0,0 +1 @@
+

package/utils/containerQuery--I7HldoT.js

@@ -0,0 +1,6 @@
+function containerQuery(breakpoints, containerName = "", size = "sm") {
+  return breakpoints.down(size).replace("@media ", `@container ${containerName} `);
+}
+export {
+  containerQuery as c
+};

package/utils/index-WXiWKKyo.js

@@ -0,0 +1,11 @@
+import { generateUtilityClass } from "@mui/material";
+function isValidDate(d) {
+  return d && d instanceof Date && !isNaN(d.getTime());
+}
+function getComponentUtilityClass(componentName) {
+  return (slot) => generateUtilityClass(componentName, slot);
+}
+export {
+  getComponentUtilityClass as g,
+  isValidDate as i
+};

package/vite-env.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="vite/client" />
-/// <reference types="vitest" />
-/// <reference types="vitest/globals" />
-/// <reference types="vitest/importMeta" />
+/// <reference types="vite/client" />
+/// <reference types="vitest" />
+/// <reference types="vitest/globals" />
+/// <reference types="vitest/importMeta" />