@m4l/components 0.2.35 → 1.0.0

package/components/PropertyValue/index.9572c347.js

@@ -0,0 +1,261 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { unstable_composeClasses } from "@mui/base";
+import { _ as componentName, $ as TEST_PROPS_DATA, T as TEST_PROP_ID, a0 as COMPONENT_PREFIX } from "../areas/constants.5387d83e.js";
+import clsx from "clsx";
+import { a as getNameDataTestId } from "../../test/getNameDataTestId.aee44365.js";
+import { useState } from "react";
+import { F as FieldLabel } from "../FieldLabel/index.f9cdcc27.js";
+import { I as Icon } from "../Icon/index.d5fed418.js";
+const PropertyValueRoot = styled("div")(({ theme }) => ({
+  ...theme.components?.M4LPropertyValue?.styleOverrides
+}));
+generateUtilityClasses(
+  componentName,
+  [
+    "root",
+    "property",
+    "iconProperty",
+    "value",
+    "isDisabled",
+    "isFocus",
+    "variantIsForm",
+    "isTabSelected",
+    "isMobile"
+  ]
+);
+function getPropertyValueUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const propertyValueUtilityClasses = (ownerState) => {
+  const slots = {
+    root: [
+      "root",
+      ownerState.disabled && "isDisabled",
+      ownerState.isFocus && "isFocus",
+      ownerState.isForm && "variantIsForm",
+      ownerState.isTabSelected && "isTabSelected",
+      ownerState.isMobile && "isMobile"
+    ],
+    property: ["property"],
+    iconProperty: ["iconProperty"],
+    value: ["value"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPropertyValueUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function PropertyValue(props) {
+  const {
+    property,
+    iconProperty,
+    value,
+    propertyWidth = 200,
+    valueHeight = "auto",
+    valueWidth = "100",
+    valueWidthMobile,
+    isForm,
+    className,
+    dataTestId = "",
+    disabled = false,
+    mandatory,
+    mandatoryMessage,
+    helperMessage
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  const [isFocus, setIsFocus] = useState(false);
+  const [isTabSelected, setIsTabSelected] = useState(false);
+  const getValueW = () => {
+    if (valueWidthMobile && !isDesktop) {
+      return valueWidthMobile;
+    }
+    if (valueWidth === 75 && isDesktop) {
+      return 75;
+    } else if (valueWidth === 75 && !isDesktop) {
+      return 100;
+    }
+    if (valueWidth === 50 && isDesktop) {
+      return 50;
+    } else if (valueWidth === 50 && !isDesktop) {
+      return 100;
+    }
+    if (valueWidth === 25 && isDesktop || valueWidth === 12.5 && isDesktop) {
+      return valueWidth;
+    }
+    if (valueWidth === 25 && !isDesktop) {
+      return 50;
+    }
+    if (valueWidth === 12.5 && !isDesktop) {
+      return 25;
+    }
+    return 100;
+  };
+  const handlerFocus = () => {
+    setIsFocus(true);
+  };
+  const handlerKeyUp = (event) => {
+    if (event.key === "Tab") {
+      setIsTabSelected(true);
+    }
+  };
+  const handlerOnBlur = () => {
+    setIsFocus(false);
+    setIsTabSelected(false);
+  };
+  const ownerState = {
+    disabled: isForm && disabled ? disabled : false,
+    isFocus: !disabled && isForm ? isFocus : false,
+    isTabSelected: !disabled && isForm ? isTabSelected : false,
+    isForm: isForm ? true : false,
+    isMobile: !isDesktop
+  };
+  const classes = propertyValueUtilityClasses(ownerState);
+  if (!isForm) {
+    return /* @__PURE__ */ jsxs(
+      PropertyValueRoot,
+      {
+        className: clsx(classes.root, className),
+        style: {
+          gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr"
+        },
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROPS_DATA]: JSON.stringify([
+            { property: property ? true : false, value: value ? true : false }
+          ]),
+          [TEST_PROP_ID]: getNameDataTestId(
+            COMPONENT_PREFIX,
+            "root",
+            dataTestId
+          )
+        } : {},
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: classes.property,
+              style: {
+                width: propertyWidth && isDesktop ? propertyWidth : "150px",
+                minWidth: propertyWidth && isDesktop ? propertyWidth : "150px"
+              },
+              ...process.env.NODE_ENV !== "production" ? {
+                [TEST_PROP_ID]: getNameDataTestId(
+                  COMPONENT_PREFIX,
+                  "property",
+                  dataTestId
+                )
+              } : {},
+              children: [
+                iconProperty ? /* @__PURE__ */ jsx(Icon, { src: iconProperty, className: classes.iconProperty }) : null,
+                /* @__PURE__ */ jsx(
+                  FieldLabel,
+                  {
+                    label: property,
+                    mandatory,
+                    mandatoryMessage,
+                    helperMessage
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: classes.value,
+              style: {
+                width: `${getValueW()}%`,
+                maxWidth: `${getValueW()}%`,
+                height: valueHeight
+              },
+              ...process.env.NODE_ENV !== "production" ? {
+                [TEST_PROP_ID]: getNameDataTestId(
+                  COMPONENT_PREFIX,
+                  "value",
+                  dataTestId
+                )
+              } : {},
+              children: value
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    PropertyValueRoot,
+    {
+      className: clsx(classes.root, className),
+      style: { gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr" },
+      role: "button",
+      tabIndex: 0,
+      onClick: handlerFocus,
+      onBlur: handlerOnBlur,
+      onKeyUp: handlerKeyUp,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROPS_DATA]: JSON.stringify([
+          { property: property ? true : false, value: value ? true : false }
+        ]),
+        [TEST_PROP_ID]: getNameDataTestId(
+          COMPONENT_PREFIX,
+          "root",
+          dataTestId
+        )
+      } : {},
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: clsx(classes.root, className),
+            style: { width: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr" },
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROPS_DATA]: JSON.stringify([
+                { property: property ? true : false, value: value ? true : false }
+              ]),
+              [TEST_PROP_ID]: getNameDataTestId(
+                COMPONENT_PREFIX,
+                "root",
+                dataTestId
+              )
+            } : {},
+            children: [
+              iconProperty ? /* @__PURE__ */ jsx(Icon, { src: iconProperty, className: classes.iconProperty }) : null,
+              /* @__PURE__ */ jsx(
+                FieldLabel,
+                {
+                  label: property,
+                  mandatory,
+                  mandatoryMessage,
+                  helperMessage
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: classes.value,
+            style: {
+              width: `${getValueW()}%`,
+              maxWidth: `${getValueW()}%`,
+              height: valueHeight
+            },
+            ...process.env.NODE_ENV !== "production" ? {
+              [TEST_PROP_ID]: getNameDataTestId(
+                COMPONENT_PREFIX,
+                "value",
+                dataTestId
+              )
+            } : {},
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  PropertyValue as P
+};

package/components/PropertyValue/styles.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PropertyValueRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/components/Resizeable/{index.cb5aad75.js → index.1f0c1359.js}

@@ -1,9 +1,7 @@
-import { styled } from "@mui/material";
-import { a as ResizableBox } from "../../react-resizable.c07d63fb.js";
 import { jsx } from "react/jsx-runtime";
-const WrapperResizeable = styled(ResizableBox)(({
-  theme
-}) => ({
+import { styled } from "@mui/material/styles";
+import { a as ResizableBox } from "../../react-resizable.37bfb965.js";
+const WrapperResizeable = styled(ResizableBox)(({ theme }) => ({
   "&.react-resizable": {
     position: "relative",
     width: "100%",
@@ -16,8 +14,8 @@ const WrapperResizeable = styled(ResizableBox)(({
     bottom: "3px",
     right: "3px",
     cursor: "se-resize",
-    borderRight: `2px solid ${theme.palette.text.disabled}`,
-    borderBottom: `2px solid ${theme.palette.text.disabled}`,
+    borderRight: `2px solid ${theme.vars.palette.text.disabled}`,
+    borderBottom: `2px solid ${theme.vars.palette.text.disabled}`,
     borderBottomRightRadius: "15%"
   },
   "& .custom-handle-nw": {
@@ -28,8 +26,8 @@ const WrapperResizeable = styled(ResizableBox)(({
     left: "3px",
     cursor: "se-resize",
     transform: "rotate(180deg)",
-    borderRight: `2px solid ${theme.palette.text.disabled}`,
-    borderBottom: `2px solid ${theme.palette.text.disabled}`,
+    borderRight: `2px solid ${theme.vars.palette.text.disabled}`,
+    borderBottom: `2px solid ${theme.vars.palette.text.disabled}`,
     borderBottomRightRadius: "15%"
   },
   "& .react-resizable-handle": {
@@ -40,7 +38,7 @@ const WrapperResizeable = styled(ResizableBox)(({
     backgroundRepeat: "no-repeat",
     backgroundOrigin: "content-box",
     boxSizing: "border-box",
-    backgroundColor: theme.palette.action.active,
+    backgroundColor: theme.vars.palette.action.active,
     mask: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
     backgroundImage: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
     backgroundPosition: "bottom right",
@@ -107,24 +105,19 @@ const WrapperResizeable = styled(ResizableBox)(({
   }
 }));
 function ResizeableWindow(props) {
-  const {
-    children,
-    width = 600,
-    height = 400,
-    maxHeigth,
-    onResize,
-    maxWidth,
-    ...other
-  } = props;
-  return /* @__PURE__ */ jsx(WrapperResizeable, {
-    width,
-    height,
-    onResize,
-    maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
-    resizeHandles: ["se", "nw"],
-    ...other,
-    children
-  });
+  const { children, width = 600, height = 400, maxHeigth, onResize, maxWidth, ...other } = props;
+  return /* @__PURE__ */ jsx(
+    WrapperResizeable,
+    {
+      width,
+      height,
+      onResize,
+      maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
+      resizeHandles: ["se", "nw"],
+      ...other,
+      children
+    }
+  );
 }
 export {
   ResizeableWindow as R

package/components/ResizeableWindow/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ResizableBox } from 'react-resizable';
+export declare const WrapperResizeable: import("@emotion/styled").StyledComponent<import("react-resizable").ResizableBoxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {
+    ref?: import("react").Ref<ResizableBox> | undefined;
+}>;

package/components/ScrollBar/classes/types.d.ts

@@ -1,4 +1,4 @@
-import { useScrollBarUtilityClasses } from ".";
+import { useScrollBarUtilityClasses } from '.';
 export interface ScrollBarClassesType {
     root: string;
 }

package/components/ScrollBar/{index.7dfc2f29.js → index.adf0eade.js}

@@ -1,60 +1,54 @@
+import { jsx } from "react/jsx-runtime";
 import { generateUtilityClasses, generateUtilityClass, Box } from "@mui/material";
 import { styled, alpha } from "@mui/material/styles";
 import SimpleBarReact from "simplebar-react";
-import simpleBarCss from "simplebar/dist/simplebar.min.css?used";
 import { unstable_composeClasses } from "@mui/base";
-import { jsx } from "react/jsx-runtime";
-const RootStyle = styled("div")(({
-  theme
-}) => ({
+import { a1 as componentName } from "../areas/constants.5387d83e.js";
+const RootStyle = styled("div")(({ theme }) => ({
   flexGrow: "1",
   height: "100%",
   overflow: "hidden",
   ...theme.components?.M4LScrollBar?.styleOverrides
 }));
 const SimpleBarStyle = styled(SimpleBarReact)`
-    /* flex-grow: 1;
+  /* flex-grow: 1;
     height: 100%;
     overflow: hidden; */
-    ${simpleBarCss}
-    height: 100%;
+  height: 100%;
 
-    .simplebar-scrollbar {
-      
-        .simplebar-visible:before {
-            opacity: 1;
-        }
-    }
-    .simplebar-track.simplebar-vertical {
-        width: 30;
-    }
-    .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
-        height: 6;
+  .simplebar-scrollbar {
+    .simplebar-visible:before {
+      opacity: 1;
     }
+  }
+  .simplebar-track.simplebar-vertical {
+    width: 30;
+  }
+  .simplebar-track.simplebar-horizontal .simplebar-scrollbar {
+    height: 6;
+  }
 
-    .simplebar-mask {
-        z-index: 'inherit';
-    }
+  .simplebar-mask {
+    z-index: 'inherit';
+  }
 
-    .simplebar-content {
-        // display: 'flex',
-        // flexDirection: 'column',
-        // height: '100%',
-    }
+  .simplebar-content {
+    // display: 'flex',
+    // flexDirection: 'column',
+    // height: '100%',
+  }
 
-    .simplebar-content-wrapper[style*='overflow: hidden scroll;'] {
-        .simplebar-content {
-            margin-right: 16px;
-        }
+  .simplebar-content-wrapper[style*='overflow: hidden scroll;'] {
+    .simplebar-content {
+      margin-right: 16px;
     }
+  }
 `;
-styled(SimpleBarReact)(({
-  theme
-}) => ({
+styled(SimpleBarReact)(({ theme }) => ({
   height: "100%",
   "& .simplebar-scrollbar": {
     "&:before": {
-      backgroundColor: alpha(theme.palette.grey[600], 0.48)
+      backgroundColor: alpha(theme.colorSchemes.finalTheme.palette.grey[600], 0.48)
     },
     "&.simplebar-visible:before": {
       opacity: 1
@@ -80,7 +74,6 @@ styled(SimpleBarReact)(({
     }
   }
 }));
-const componentName = "M4LScrollBar";
 generateUtilityClasses(componentName, [
   "root"
 ]);
@@ -97,29 +90,14 @@ const useScrollBarUtilityClasses = () => {
   };
 };
 function ScrollBar(props) {
-  const {
-    children
-  } = props;
+  const { children } = props;
   const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
   const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
   if (isMobile) {
-    return /* @__PURE__ */ jsx(Box, {
-      sx: {
-        overflowX: "auto",
-        width: "100%"
-      },
-      children
-    });
+    return /* @__PURE__ */ jsx(Box, { sx: { overflowX: "auto", width: "100%" }, children });
   }
   const classes = useScrollBarUtilityClasses();
-  return /* @__PURE__ */ jsx(RootStyle, {
-    id: "RootStyle",
-    className: classes.root,
-    children: /* @__PURE__ */ jsx(SimpleBarStyle, {
-      autoHide: false,
-      children
-    })
-  });
+  return /* @__PURE__ */ jsx(RootStyle, { id: "RootStyle", className: classes.root, children: /* @__PURE__ */ jsx(SimpleBarStyle, { autoHide: false, children }) });
 }
 export {
   ScrollBar as S

package/components/ScrollBar/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import SimpleBarReact from 'simplebar-react';
+export declare const RootStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SimpleBarStyle: import("@emotion/styled").StyledComponent<SimpleBarReact.Props & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {
+    ref?: import("react").Ref<SimpleBarReact> | undefined;
+}>;
+export declare const SimpleBarStyle2: import("@emotion/styled").StyledComponent<SimpleBarReact.Props & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {
+    ref?: import("react").Ref<SimpleBarReact> | undefined;
+}>;

package/components/SideBar/classes/index.d.ts

@@ -4,7 +4,6 @@ export declare const SideBarClasses: SideBarClassesType;
 export declare const getSideBarClassesByState: (ownerState: SideBarState) => {
     footer: string;
     root: string;
-    drawer: string;
     popover: string;
     containerLogo: string;
     skeleton: string;
@@ -39,6 +38,7 @@ export declare const getSideBarClassesByState: (ownerState: SideBarState) => {
     subItemCollapseActive: string;
     containerContentGroupsFooter: string;
     contentGroupsLine: string;
+    drawer: string;
     overlapping: string;
     wrapperLogoFooter: string;
 };

package/components/SideBar/context/sideBarContext/index.d.ts

@@ -7,9 +7,9 @@ import { SideBarProviderProps, SideBarProviderValue } from './types';
  */
 declare const SideBarContext: import("react").Context<SideBarProviderValue>;
 /**
-* Componente que actúa como proveedor de contexto para el componente Sidebar y sus elementos secundarios.
-* @param props Las propiedades para el proveedor del contexto Sidebar.
-* @returns El proveedor de contexto Sidebar.
-*/
+ * Componente que actúa como proveedor de contexto para el componente Sidebar y sus elementos secundarios.
+ * @param props Las propiedades para el proveedor del contexto Sidebar.
+ * @returns El proveedor de contexto Sidebar.
+ */
 declare const SideBarProvider: (props: SideBarProviderProps) => import("react/jsx-runtime").JSX.Element;
 export { SideBarProvider, SideBarContext };