@m4l/components 0.1.62 → 0.1.64

package/components/HelperText/index.3c07ca2a.js

@@ -0,0 +1,70 @@
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import "react";
+import "@m4l/core";
+import "../Icon/index.0f9b360e.js";
+import { jsx } from "react/jsx-runtime";
+import "../mui_extended/IconButton/index.be9c2ce5.js";
+import "../mui_extended/Accordion/index.b7487e37.js";
+import "../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.d9e0ae2e.js";
+import "clsx";
+import "../Image/index.1a9c0327.js";
+import "@mui/lab";
+import { T as Typography } from "../mui_extended/Typography/index.41b60a6b.js";
+import "../mui_extended/Popover/index.260aae81.js";
+import "../mui_extended/MenuActions/index.ec654122.js";
+import "../mui_extended/Pager/index.9e123670.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+import { unstable_composeClasses } from "@mui/base";
+const HelperTextRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LErrorLabel?.styleOverrides
+}));
+const componentName = "M4LHelperText";
+const errorLabelClasses = generateUtilityClasses(componentName, [
+  "root",
+  "variantInfo",
+  "variantSuccess",
+  "variantWarning",
+  "variantError"
+]);
+function getHelperTextUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerSate) => {
+  const slots = {
+    root: ["root", ownerSate.variant === "info" && "variantInfo", ownerSate.variant === "success" && "variantSuccess", ownerSate.variant === "warning" && "variantWarning", ownerSate.variant === "error" && "variantError"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getHelperTextUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const HelperText = (props) => {
+  const {
+    message = "",
+    skeletonWidth,
+    skeletongHeight,
+    variant
+  } = props;
+  const ownerSate = {
+    variant
+  };
+  const classes = useUtilityClasses(ownerSate);
+  return /* @__PURE__ */ jsx(HelperTextRoot, {
+    className: classes.root,
+    children: /* @__PURE__ */ jsx(Typography, {
+      variant: "body",
+      skeletonWidth,
+      skeletongHeight,
+      children: message
+    })
+  });
+};
+export {
+  HelperText as H,
+  errorLabelClasses as e
+};

package/components/HelperText/index.d.ts

@@ -0,0 +1,10 @@
+import { HelperTextProps } from './types';
+import { HelperTextClassesType } from './utils/Clases/types';
+/**
+ * Provee de un texto que posee los estilos gráficos de error.
+ * @param props
+ * @returns
+ */
+export { errorLabelClasses } from './utils/Clases/index';
+export declare type ErrorLabelClassesKey = HelperTextClassesType;
+export declare const HelperText: (props: HelperTextProps) => JSX.Element;

package/components/HelperText/types.d.ts

@@ -0,0 +1,8 @@
+import { TypographyProps } from '../mui_extended/Typography/types';
+declare type Variants = 'info' | 'success' | 'warning' | 'error';
+export interface HelperTextProps extends Pick<TypographyProps, 'skeletonWidth' | 'skeletongHeight'> {
+    message: string | undefined;
+    variant?: Variants;
+}
+export declare type OwnerState = Pick<HelperTextProps, 'variant'>;
+export {};

package/components/HelperText/utils/Clases/constant.d.ts

@@ -0,0 +1 @@
+export declare const componentName = "M4LHelperText";

package/components/HelperText/utils/Clases/index.d.ts

@@ -0,0 +1,7 @@
+import { HelperTextClassesType } from './types';
+import { OwnerState } from '../../types';
+export declare const errorLabelClasses: HelperTextClassesType;
+export declare function getHelperTextUtilityClass(slot: string): string;
+export declare const useUtilityClasses: (ownerSate: OwnerState) => {
+    root: string;
+};

package/components/HelperText/utils/Clases/types.d.ts

@@ -0,0 +1,7 @@
+export interface HelperTextClassesType {
+    root: string;
+    variantInfo: string;
+    variantSuccess: string;
+    variantWarning: string;
+    variantError: string;
+}

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

@@ -5,5 +5,5 @@ export declare function getIconClassesUtilityClass(slot: string): string;
 export declare const useUtilityClasses: (ownerState: OwnerState) => {
     root: string;
     icon: string;
-    placeHolder: string;
+    variantSkeleton: string;
 };

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

@@ -1,17 +1,12 @@
 export interface IconClassesType {
     root: string;
     icon: string;
-    placeHolder: string;
+    variantSkeleton: string;
     sizeExtraSmall: string;
     sizeSmall: string;
-    sizeNormal: string;
+    sizeMedium: string;
     sizeLarge: string;
-    colorInfo: string;
-    colorWarning: string;
-    colorError: string;
-    colorActive: string;
-    colorSelected: string;
-    colorDisabled: string;
+    sizeExtraLarge: string;
     rotationAngle: string;
 }
 export declare type IconClassesKey = keyof IconClassesType;

package/components/Icon/index.0f9b360e.js

@@ -0,0 +1,200 @@
+import { m } from "framer-motion";
+import { forwardRef, useState, useEffect } from "react";
+import { IconButton, Box, styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useEnvironment } from "@m4l/core";
+import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.011880b6.js";
+import { T as TEST_PROP_ID } from "../../vendor.a15d263e.js";
+import { unstable_composeClasses } from "@mui/base";
+const varSmall = {
+  hover: {
+    scale: 1.1
+  },
+  tap: {
+    scale: 0.95
+  }
+};
+const varMedium = {
+  hover: {
+    scale: 1.09
+  },
+  tap: {
+    scale: 0.97
+  }
+};
+const varLarge = {
+  hover: {
+    scale: 1.08
+  },
+  tap: {
+    scale: 0.99
+  }
+};
+function AnimateWrap({
+  size,
+  children
+}) {
+  const isSmall = size === "small";
+  const isLarge = size === "large";
+  return /* @__PURE__ */ jsx(Box, {
+    component: m.div,
+    whileTap: "tap",
+    whileHover: "hover",
+    variants: isSmall && varSmall || isLarge && varLarge || varMedium,
+    sx: {
+      display: "inline-flex"
+    },
+    children
+  });
+}
+const IconButtonAnimate = forwardRef(({
+  children,
+  size = "medium",
+  ...other
+}, ref) => /* @__PURE__ */ jsx(AnimateWrap, {
+  size,
+  children: /* @__PURE__ */ jsx(IconButton, {
+    size,
+    ref,
+    ...other,
+    children
+  })
+}));
+IconButtonAnimate.displayName = "IconButtonAnimate";
+const IconRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LIcon?.styleOverrides
+}));
+const DivIcon = styled("div", {
+  shouldForwardProp: (props) => props !== "src" && props !== "rotationAngle"
+})(({
+  src,
+  rotationAngle
+}) => ({
+  maskPosition: "center",
+  maskRepeat: "no-repeat",
+  maskSize: "cover",
+  WebkitMaskRepeat: "no-repeat",
+  mask: `url('data:image/svg+xml;base64,${src}')`,
+  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
+  WebkitMaskSize: "cover",
+  ...rotationAngle && {
+    transform: `rotate(${rotationAngle}deg)`
+  }
+}));
+const componentName = "M4LIcon";
+generateUtilityClasses(componentName, [
+  "root",
+  "icon",
+  "variantSkeleton",
+  "sizeExtraSmall",
+  "sizeSmall",
+  "sizeMedium",
+  "sizeLarge",
+  "sizeExtraLarge",
+  "rotationAngle"
+]);
+function getIconClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root"],
+    icon: ["icon", ownerState.size === "extraSmall" && "sizeExtraSmall", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.size === "large" && "sizeLarge", ownerState.size === "extraLarge" && "sizeExtraLarge", ownerState.rotationAngle ? "rotationAngle" : ""],
+    variantSkeleton: ["variantSkeleton", ownerState.size === "extraSmall" && "sizeExtraSmall", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.size === "large" && "sizeLarge", ownerState.size === "extraLarge" && "sizeExtraLarge"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getIconClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const ICON_PREFIX = "Icon";
+const getNameDataTestId = (KEY) => {
+  return `${ICON_PREFIX}-${KEY}`;
+};
+function Icon(props) {
+  const {
+    src,
+    size = "small",
+    rotationAngle,
+    testingProps
+  } = props;
+  const [resource, setResource] = useState(testingProps?.resource || void 0);
+  useEffect(() => {
+    let mounted = true;
+    (async function networkOperation() {
+      await fetch(src).then((response) => {
+        return response.text() || "";
+      }).then((xml) => {
+        xml = xml.match(
+          /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
+        )?.toString() || "";
+        if (mounted) {
+          setResource(window.btoa(xml));
+        }
+      }).catch((_err) => {
+      });
+    })();
+    return function clenUp() {
+      mounted = false;
+    };
+  }, [src]);
+  const ownerState = {
+    size,
+    rotationAngle
+  };
+  const classes = useUtilityClasses(ownerState);
+  return /* @__PURE__ */ jsx(IconRoot, {
+    className: classes.root,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("root")
+    } : {},
+    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
+      className: classes.icon,
+      src: resource,
+      rotationAngle,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("icon")
+      } : {}
+    }) : /* @__PURE__ */ jsx(Skeleton, {
+      variant: "rectangular",
+      className: classes.variantSkeleton,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("variantSkeleton")
+      } : {}
+    })
+  });
+}
+const ArrowIconRoot = styled("div")(() => ({
+  display: "flex",
+  alignSelf: "center",
+  lineHeight: 0
+}));
+function ArrowIcon(props) {
+  const {
+    openState
+  } = props;
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    classes
+  } = useSideBar();
+  return /* @__PURE__ */ jsx(ArrowIconRoot, {
+    className: classes.arrowIconRoot,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId$1("arrowIconRoot")
+    } : {},
+    children: /* @__PURE__ */ jsx(Icon, {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/sidebar/assets/icons/ChevronRight.svg`,
+      rotationAngle: openState ? 90 : 0
+    })
+  });
+}
+export {
+  ArrowIcon as A,
+  Icon as I,
+  IconButtonAnimate as a
+};

package/components/Icon/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const ICON_PREFIX = "Icon";

package/components/Icon/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import { IconClassesKey } from "../classes/types";
+export declare const getNameDataTestId: (KEY: IconClassesKey) => string;

package/components/Icon/types.d.ts

@@ -1,16 +1,15 @@
-export declare type SizeIcon = 'extra-small' | 'small' | 'normal' | 'large' | string;
+export declare type SizeIcon = 'small' | 'extraSmall' | 'medium' | 'large' | 'extraLarge';
 export interface TestingProps {
     resource: any;
 }
 export interface IconProps {
     src: string;
-    bgColor?: string | 'info' | 'warning' | 'error' | 'active' | 'selected' | 'disabled';
     size?: SizeIcon;
     rotationAngle?: number;
-    angleTransition?: number;
     testingProps?: TestingProps;
 }
+export declare type DivIconProps = Pick<IconProps, 'src' | 'rotationAngle'>;
 export declare type WrapperPlaceHolderProps = {
     size: string;
 };
-export declare type OwnerState = Pick<IconProps, 'bgColor' | 'size' | 'rotationAngle'>;
+export declare type OwnerState = Pick<IconProps, 'size' | 'rotationAngle'>;

package/components/Image/{index.aa24e982.js → index.1a9c0327.js}

@@ -1,11 +1,16 @@
 import { useBase, useModuleSkeleton, BaseProvider } from "@m4l/core";
 import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { T as TEST_PROP_ID } from "../../vendor.a15d263e.js";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { styled, Skeleton as Skeleton$1, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 function isIntersectionObserverAvailable() {
   return typeof window !== "undefined" && "IntersectionObserver" in window && "IntersectionObserverEntry" in window;
 }
+const IMAGE_PREFIX = "Image";
+const getNameDataTestId = (KEY) => {
+  return `${IMAGE_PREFIX}-${KEY}`;
+};
 const checkIntersections = (entries) => {
   entries.forEach((entry) => {
     if (entry.isIntersecting) {
@@ -27,6 +32,9 @@ const BasicIntersectComponent = forwardRef((props, ref) => {
     setIsVisible,
     threshold
   } = props;
+  const {
+    classes
+  } = useBase();
   const [observer] = useState(getObserver(threshold));
   const intersectComponentRef = useRef(null);
   useImperativeHandle(ref, () => intersectComponentRef.current);
@@ -52,9 +60,12 @@ const BasicIntersectComponent = forwardRef((props, ref) => {
     styleProp.minHeight = height;
   }
   return /* @__PURE__ */ jsx("span", {
+    className: classes.span,
     ref: intersectComponentRef,
     style: styleProp,
-    "data-testid": "spanObserved"
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("span")
+    } : {}
   });
 });
 BasicIntersectComponent.displayName = "IntersectComponent";
@@ -70,17 +81,14 @@ function LazyLoadComponent(props) {
   const {
     classes
   } = useBase();
-  if (isVisible) {
-    return /* @__PURE__ */ jsx(WrapperLazyLoadComponent, {
-      className: classes.lazyLoad,
-      "data-testid": "WrapperLazyLoadComponent",
-      children
-    });
-  }
   return /* @__PURE__ */ jsx(WrapperLazyLoadComponent, {
     className: classes.lazyLoad,
-    "data-testid": "WrapperLazyLoadComponent",
-    children: /* @__PURE__ */ jsx(BasicIntersectComponent, {
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("lazyLoad")
+    } : {},
+    children: isVisible ? /* @__PURE__ */ jsx(Fragment, {
+      children
+    }) : /* @__PURE__ */ jsx(BasicIntersectComponent, {
       useIntersectionObserver,
       setIsVisible,
       ...other
@@ -88,41 +96,10 @@ function LazyLoadComponent(props) {
   });
 }
 const ImageRoot = styled("div", {
-  shouldForwardProp: (props) => props !== "width" && props !== "height" && props !== "imageClasses"
+  shouldForwardProp: (props) => props !== "imageClasses"
 })(({
-  theme,
-  height,
-  width,
-  imageClasses: imageClasses2
+  theme
 }) => ({
-  position: "relative",
-  width,
-  height,
-  minHeight: height,
-  minWidth: width,
-  [`&.${imageClasses2.root}`]: {
-    [`.${imageClasses2.img}`]: {
-      opacity: 0,
-      position: "absolute",
-      inset: "0",
-      width: "100%",
-      height: "100%"
-    },
-    [`.${imageClasses2.loaded} .${imageClasses2.img}`]: {
-      opacity: 1,
-      transition: "opacity .5s"
-    },
-    [`.${imageClasses2.skeletonImage}, .${imageClasses2.skeletonCircle}`]: {
-      opacity: 1,
-      width,
-      height
-    },
-    [`.${imageClasses2.loaded} .${imageClasses2.skeletonImage},
-          .${imageClasses2.loaded} .${imageClasses2.skeletonCircle}`]: {
-      opacity: 0,
-      transition: "opacity .3s"
-    }
-  },
   ...theme.components?.M4LImage?.styleOverrides
 }));
 const WrapperSkeletonImage = styled("div")(() => ({
@@ -136,14 +113,22 @@ const WrapperSkeletonImage = styled("div")(() => ({
 }));
 const Skeleton = (props) => {
   const {
-    skeletonVariant
+    skeletonVariant,
+    width,
+    height
   } = props;
   const {
     classes
   } = useBase();
   return skeletonVariant === "image" ? /* @__PURE__ */ jsx(WrapperSkeletonImage, {
     className: classes.skeletonImage,
-    "data-testid": "skeletonImage",
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("skeletonImage")
+    } : {},
+    style: {
+      width,
+      height
+    },
     children: /* @__PURE__ */ jsx(Skeleton$1, {
       variant: "rectangular",
       width: "100%",
@@ -154,7 +139,9 @@ const Skeleton = (props) => {
     width: "100%",
     height: "100%",
     className: classes.skeletonCircle,
-    "data-testid": "skeletonCircle"
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getNameDataTestId("skeletonCircle")
+    } : {}
   });
 };
 const componentName = "M4LImage";
@@ -162,6 +149,7 @@ const imageClasses = generateUtilityClasses(componentName, [
   "root",
   "lazyLoad",
   "img",
+  "span",
   "skeletonImage",
   "skeletonCircle",
   "loaded"
@@ -183,17 +171,80 @@ const useUtilityClasses = (ownerState) => {
     ...composedClasses
   };
 };
+const ratioOptions = {
+  "1.168:1": {
+    width: 1.168,
+    height: 1
+  },
+  "16:9": {
+    width: 16,
+    height: 9
+  },
+  "1:1": {
+    width: 1,
+    height: 1
+  },
+  "1:1.168": {
+    width: 1,
+    height: 1.168
+  },
+  "2:1": {
+    width: 2,
+    height: 1
+  },
+  "2:3": {
+    width: 2,
+    height: 3
+  },
+  "3:1": {
+    width: 3,
+    height: 1
+  },
+  "3:2": {
+    width: 3,
+    height: 2
+  },
+  "3:4": {
+    width: 3,
+    height: 4
+  },
+  "4:3": {
+    width: 4,
+    height: 3
+  },
+  "5:2": {
+    width: 5,
+    height: 2
+  }
+};
+const getRatioValues = (ratio) => {
+  const numType = ratioOptions[ratio];
+  const numRef = numType.width / numType.height;
+  if (numRef >= 1) {
+    return {
+      width: "100%",
+      height: `${Math.trunc(numRef * 100)}%`
+    };
+  } else {
+    return {
+      width: `${Math.trunc(numRef * 100)}%`,
+      height: "100%"
+    };
+  }
+};
 function Image(props) {
   const {
     src,
     alt,
     useIntersectionObserver = true,
     threshold = 100,
+    skeletonVariant = "image",
+    testingProps,
     width,
     height,
-    skeletonVariant = "image",
-    testingProps
+    ratio = "1:1"
   } = props;
+  const ratioImage = getRatioValues(ratio);
   const isSKeleton = useModuleSkeleton();
   const [statusLoad, setStatusLoad] = useState(testingProps?.statusLoad || "initial");
   useEffect(() => {
@@ -219,25 +270,42 @@ function Image(props) {
   const classes = useUtilityClasses(ownerState);
   const lazyLoadComponent = useMemo(() => {
     return /* @__PURE__ */ jsx(ImageRoot, {
-      width,
-      height,
       className: classes.root,
       imageClasses,
-      "data-testid": "ImageRoot",
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("root")
+      } : {},
+      ...width && height ? {
+        style: {
+          width,
+          height
+        }
+      } : {
+        sx: {
+          width: "100%",
+          height: "100%"
+        }
+      },
       children: /* @__PURE__ */ jsxs(LazyLoadComponent, {
-        width,
-        height,
+        width: "100%",
+        height: "100%",
         useIntersectionObserver,
         threshold,
         testingProps,
         children: [statusLoad !== "removed" ? /* @__PURE__ */ jsx(Skeleton, {
-          skeletonVariant
+          skeletonVariant,
+          width: !width ? "100%" : ratioImage.width,
+          height: !height ? "100%" : ratioImage.height
         }) : null, /* @__PURE__ */ jsx("img", {
           alt,
           src,
           onLoad,
           className: classes.img,
-          "data-testid": "img"
+          width: !width ? "100%" : ratioImage.width,
+          height: !height ? "100%" : ratioImage.height,
+          ...process.env.NODE_ENV !== "production" ? {
+            [TEST_PROP_ID]: getNameDataTestId("img")
+          } : {}
         })]
       })
     });

package/components/Image/subcomponents/Skeleton/types.d.ts

@@ -1,4 +1,6 @@
 import { SkeletonVariant } from '../../types';
 export interface SkeletonProps {
     skeletonVariant: SkeletonVariant;
+    width: string;
+    height: string;
 }

package/components/Image/tests/constants.d.ts

@@ -0,0 +1 @@
+export declare const IMAGE_PREFIX = "Image";

package/components/Image/tests/utils.d.ts

@@ -0,0 +1,2 @@
+import { ImageClassesKey } from "../utils/classes/types";
+export declare const getNameDataTestId: (KEY: ImageClassesKey) => string;