@m4l/components 0.2.26 → 0.2.28

package/components/Image/index.39b3b9d9.js

@@ -1,387 +0,0 @@
-import { useBase, useModuleSkeleton, BaseProvider, useEnvironment, evaluateWithContext } from "@m4l/core";
-import { forwardRef, useState, useRef, useImperativeHandle, useEffect, useMemo } from "react";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.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";
-import clsx from "clsx";
-import { c as classes, g as getSize } from "../PrintingSystem/index.c2d21657.js";
-import { Q as QRCode } from "../../node_modules.585eab0e.js";
-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) {
-      entry.target?.setIsVisible(true);
-    }
-  });
-};
-const LAZY_LOAD_OBSERVERS = {};
-const getObserver = (threshold) => {
-  LAZY_LOAD_OBSERVERS[threshold] = LAZY_LOAD_OBSERVERS[threshold] || new IntersectionObserver(checkIntersections, {
-    rootMargin: threshold + "px"
-  });
-  return LAZY_LOAD_OBSERVERS[threshold];
-};
-const BasicIntersectComponent = forwardRef((props, ref) => {
-  const {
-    height,
-    width,
-    setIsVisible,
-    threshold
-  } = props;
-  const {
-    classes: classes2
-  } = useBase();
-  const [observer] = useState(getObserver(threshold));
-  const intersectComponentRef = useRef(null);
-  useImperativeHandle(ref, () => intersectComponentRef.current);
-  useEffect(() => {
-    if (observer && intersectComponentRef.current) {
-      intersectComponentRef.current.setIsVisible = setIsVisible;
-      observer.observe(intersectComponentRef.current);
-    }
-    return () => {
-      if (observer && intersectComponentRef.current) {
-        observer.unobserve(intersectComponentRef.current);
-      }
-    };
-  }, []);
-  const styleProp = {
-    display: "inline-block"
-  };
-  if (typeof width !== "undefined") {
-    styleProp.width = width;
-  }
-  if (typeof height !== "undefined") {
-    styleProp.height = height;
-    styleProp.minHeight = height;
-  }
-  return /* @__PURE__ */ jsx("span", {
-    className: classes2.span,
-    ref: intersectComponentRef,
-    style: styleProp,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("span")
-    } : {}
-  });
-});
-BasicIntersectComponent.displayName = "IntersectComponent";
-function LazyLoadComponent(props) {
-  const {
-    children,
-    useIntersectionObserver,
-    testingProps,
-    ...other
-  } = props;
-  const [isVisible, setIsVisible] = useState(testingProps?.isVisible || !(useIntersectionObserver && isIntersectionObserverAvailable()));
-  const {
-    classes: classes2
-  } = useBase();
-  return /* @__PURE__ */ jsx("div", {
-    className: classes2.lazyLoad,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("lazyLoad")
-    } : {},
-    children: isVisible ? /* @__PURE__ */ jsx(Fragment, {
-      children
-    }) : /* @__PURE__ */ jsx(BasicIntersectComponent, {
-      useIntersectionObserver,
-      setIsVisible,
-      ...other
-    })
-  });
-}
-const ImageRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LImage?.styleOverrides
-}));
-const WrapperSkeletonImage = styled("div")(() => ({
-  mask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
-  WebkitMask: `url("data:image/svg+xml,%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 70 70' style='enable-background:new 0 0 70 70%3B' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M45 8.7c1.4-1.5 3.4-2.3 5.4-2.3s3.9 0.8 5.4 2.3s2.4 3.5 2.5 5.7c0 2.2-0.9 4.2-2.4 5.7s-3.5 2.3-5.5 2.2c-2.1 0.1-4-0.7-5.5-2.2c-1.4-1.5-2.3-3.5-2.4-5.7C42.6 12.2 43.5 10.2 45 8.7z'/%3E%3Cpath d='M68.4 62.1c-0.3 0.5-0.7 0.8-1.2 1.1s-1 0.4-1.6 0.4H4.3c-0.6 0-1.1-0.1-1.6-0.4s-0.9-0.6-1.2-1.1c-0.2-0.5-0.4-1-0.4-1.5s0.1-1.1 0.4-1.5l23-36.4c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l11.5 18.2c0.2 0.3 0.5 0.5 0.8 0.7c0.3 0.2 0.6 0.3 1 0.3c0.3 0 0.7-0.1 1-0.3c0.3-0.2 0.6-0.4 0.8-0.7l3.1-4.9c0.3-0.5 0.7-0.8 1.2-1.1c0.5-0.3 1-0.4 1.6-0.4c0.6 0 1.1 0.1 1.6 0.4c0.5 0.3 0.9 0.6 1.2 1.1l14.6 23.1c0.3 0.5 0.3 1 0.3 1.5S68.7 61.7 68.4 62.1z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain`,
-  height: "100%",
-  width: "100%",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center"
-}));
-const Skeleton = (props) => {
-  const {
-    skeletonVariant,
-    width,
-    height
-  } = props;
-  const {
-    classes: classes2
-  } = useBase();
-  return skeletonVariant === "image" ? /* @__PURE__ */ jsx(WrapperSkeletonImage, {
-    className: classes2.skeletonImage,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("skeletonImage")
-    } : {},
-    style: {
-      width,
-      height
-    },
-    children: /* @__PURE__ */ jsx(Skeleton$1, {
-      variant: "rectangular",
-      width: "100%",
-      height: "100%"
-    })
-  }) : /* @__PURE__ */ jsx(Skeleton$1, {
-    variant: "circular",
-    width: "100%",
-    height: "100%",
-    className: classes2.skeletonCircle,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId("skeletonCircle")
-    } : {}
-  });
-};
-const componentName = "M4LImage";
-generateUtilityClasses(componentName, [
-  "root",
-  "lazyLoad",
-  "img",
-  "span",
-  "skeletonImage",
-  "skeletonCircle",
-  "loaded"
-]);
-function getImagenClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.isImageLoaded == true && "loaded"],
-    lazyLoad: ["lazyLoad"],
-    img: ["img"],
-    intersectComponent: ["intersectComponent"],
-    skeletonImage: ["skeletonImage"],
-    skeletonCircle: ["skeletonCircle"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getImagenClassesUtilityClass, {});
-  return {
-    ...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,
-    ratio = "1:1",
-    className
-  } = props;
-  const ratioImage = getRatioValues(ratio);
-  const isSKeleton = useModuleSkeleton();
-  const [statusLoad, setStatusLoad] = useState(testingProps?.statusLoad || "initial");
-  useEffect(() => {
-    let timer;
-    if (statusLoad === "loaded" && !isSKeleton) {
-      timer = setTimeout(() => {
-        setStatusLoad("removed");
-      }, 3e3);
-    }
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-  }, [statusLoad, isSKeleton]);
-  const onLoad = () => {
-    setStatusLoad("loaded");
-  };
-  const isImageLoaded = !isSKeleton && statusLoad !== "initial";
-  const ownerState = {
-    isImageLoaded
-  };
-  const classes2 = useUtilityClasses(ownerState);
-  const lazyLoadComponent = useMemo(() => {
-    return /* @__PURE__ */ jsx(ImageRoot, {
-      className: clsx(classes2.root, className),
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("root")
-      } : {},
-      style: width && height ? {
-        minWidth: width,
-        minHeight: height,
-        width,
-        height
-      } : {
-        width: "100%",
-        height: "100%"
-      },
-      children: /* @__PURE__ */ jsxs(LazyLoadComponent, {
-        width: "100%",
-        height: "100%",
-        useIntersectionObserver,
-        threshold,
-        testingProps,
-        children: [statusLoad !== "removed" ? /* @__PURE__ */ jsx(Skeleton, {
-          skeletonVariant,
-          width: !width ? "100%" : ratioImage.width,
-          height: !height ? "100%" : ratioImage.height
-        }) : null, /* @__PURE__ */ jsx("img", {
-          alt,
-          src,
-          onLoad,
-          className: classes2.img,
-          width: !width ? "100%" : ratioImage.width,
-          height: !height ? "100%" : ratioImage.height,
-          ...process.env.NODE_ENV !== "production" ? {
-            [TEST_PROP_ID]: getNameDataTestId("img")
-          } : {}
-        })]
-      })
-    });
-  }, [statusLoad, isSKeleton, src]);
-  return /* @__PURE__ */ jsx(BaseProvider, {
-    value: {
-      classes: classes2
-    },
-    children: lazyLoadComponent
-  });
-}
-const ImageNode = (props) => {
-  const {
-    className,
-    style,
-    src,
-    width = "100%",
-    height = "100%"
-  } = props;
-  const {
-    unitSize,
-    sourceData
-  } = useBase();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const resourceImg = evaluateWithContext(sourceData, src);
-  return /* @__PURE__ */ jsx("img", {
-    src: `${host_static_assets}/${environment_assets}/${resourceImg}`,
-    className: clsx(classes.imageNodeRoot, className),
-    style: {
-      width: getSize(width, unitSize),
-      height: getSize(height, unitSize),
-      ...style
-    }
-  });
-};
-const convertToPx = (size, magnitud) => {
-  if (isNaN(size)) {
-    return 0;
-  }
-  if (magnitud === "px") {
-    return size;
-  }
-  switch (magnitud) {
-    case "cm":
-      return size * 37.8;
-    case "mm":
-      return size * 3.78;
-    case "in":
-      return size * 96;
-    case "pt":
-      return size * 1.33;
-    case "pc":
-      return size * 16;
-    default:
-      return 100;
-  }
-};
-const QRImageNode = (props) => {
-  const {
-    url,
-    size = 8,
-    color
-  } = props;
-  const {
-    unitSize
-  } = useBase();
-  return /* @__PURE__ */ jsx(QRCode, {
-    value: url,
-    size: convertToPx(size, unitSize),
-    fgColor: color,
-    renderAs: "canvas"
-  });
-};
-export {
-  Image as I,
-  QRImageNode as Q,
-  ImageNode as a
-};

package/components/Image/subcomponents/BasicIntersectComponent/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IntersectComponentProps } from '../../types';
-export declare const BasicIntersectComponent: import("react").ForwardRefExoticComponent<IntersectComponentProps & import("react").RefAttributes<HTMLSpanElement>>;

package/components/Image/subcomponents/LazyLoadComponent/index.d.ts

@@ -1,7 +0,0 @@
-import { LazyLoadComponentProps } from '../../types';
-/**
- * Sub-componente encargado de validar y condicionar la funcionalidad del intersection observer.
- * @param props
- * @returns
- */
-export declare function LazyLoadComponent(props: LazyLoadComponentProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +0,0 @@
-import { SkeletonProps } from './types';
-export declare const Skeleton: (props: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/components/Image/utils/classes/index.d.ts

@@ -1,12 +0,0 @@
-import { ImageClassesType } from './types';
-import { OwnerState } from '../../types';
-export declare const imageClasses: ImageClassesType;
-export declare function getImagenClassesUtilityClass(slot: string): string;
-export declare const useUtilityClasses: (ownerState: OwnerState) => {
-    img: string;
-    root: string;
-    lazyLoad: string;
-    intersectComponent: string;
-    skeletonImage: string;
-    skeletonCircle: string;
-};

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

@@ -1 +0,0 @@
-export declare function isIntersectionObserverAvailable(): boolean;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/skeleton.d.ts

@@ -1 +0,0 @@
-export declare function SKTModuleHeader(): import("react/jsx-runtime").JSX.Element;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/subcomponents/WindowPopUpsList/index.d.ts

@@ -1,2 +0,0 @@
-import { WindowPopUpsListProps } from './types';
-export declare const WindowPopUpsList: (props: WindowPopUpsListProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/areas/components/AreasViewer/subcomponents/Area/subcomponents/Window/subcomponents/Header/subcomponents/WindowPopUpsList/types.d.ts

@@ -1,2 +0,0 @@
-import { HeaderProps } from "../../types";
-export declare type WindowPopUpsListProps = Pick<HeaderProps, 'windowId' | 'areaId'>;

package/components/hook-form/RHFPeriod/index.011965ef.js

@@ -1,90 +0,0 @@
-import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { useFormContext, Controller } from "react-hook-form";
-import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
-import { unstable_composeClasses } from "@mui/base";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { F as FieldLabel } from "../../FieldLabel/index.1da2a28d.js";
-import { P as Period } from "../../Period/index.6e8d92dc.js";
-const RHFPeriodRoot = styled("div")(({
-  theme
-}) => ({
-  width: "100%",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "center",
-  alignItems: "flex-start",
-  gap: theme.spacing(1),
-  ...theme.components?.M4LRHFPeriod?.styleOverrides
-}));
-const componentName = "M4LRHFPeriod";
-generateUtilityClasses(componentName, [
-  "root"
-]);
-function getRHFPeriodUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const RHFPeriodUtilityClasses = () => {
-  const slots = {
-    root: ["root"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFPeriodUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const RHFPeriod = (props) => {
-  const {
-    name,
-    readOnly,
-    skeletonWidth,
-    skeletonHeight,
-    state,
-    label,
-    mandatory,
-    mandatoryMessage,
-    helperMessage,
-    size
-  } = props;
-  const {
-    control
-  } = useFormContext();
-  const classes = RHFPeriodUtilityClasses();
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field: {
-        onChange,
-        value
-      },
-      fieldState: {
-        error
-      }
-    }) => {
-      console.log("value RHFPeriod", value);
-      return /* @__PURE__ */ jsxs(RHFPeriodRoot, {
-        className: classes.root,
-        children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-          label,
-          mandatory,
-          mandatoryMessage,
-          helperMessage
-        }), /* @__PURE__ */ jsx(Period, {
-          value,
-          onChange,
-          state: !!error === true ? "error" : state,
-          readOnly,
-          skeletonWidth,
-          skeletonHeight,
-          size
-        }), error && /* @__PURE__ */ jsx(HelperText, {
-          variant: "error",
-          message: error.message || ""
-        })]
-      });
-    }
-  });
-};
-export {
-  RHFPeriod as R
-};

package/components/CommonActions/components/Actions/{index.389f9b28.js → index.16946bfd.js}

@@ -3,6 +3,17 @@ import { generateUtilityClasses, styled } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { g as getComponentUtilityClass } from "../../../../utils/index.de903261.js";
 import { jsx } from "react/jsx-runtime";
+function getCommonActionsDictionary() {
+  return ["common_actions"];
+}
+const defaultCommonActionsDictionary = {
+  common_actions: {
+    cancel: "Cancel",
+    intro: "Intro",
+    confirm_quit_title: "Confirm",
+    confirm_quit_msg: "Are your sure exit?"
+  }
+};
 const componentName = "M4LCommonActions";
 generateUtilityClasses(componentName, [
   "root",
@@ -54,17 +65,6 @@ const Actions = (props) => {
     children
   });
 };
-function getCommonActionsDictionary() {
-  return ["common_actions"];
-}
-const defaultCommonActionsDictionary = {
-  common_actions: {
-    cancel: "Cancel",
-    intro: "Intro",
-    confirm_quit_title: "Confirm",
-    confirm_quit_msg: "Are your sure exit?"
-  }
-};
 export {
   Actions as A,
   defaultCommonActionsDictionary as d,