@m4l/components 0.2.25 → 0.2.27

package/components/Icon/{index.b920baf8.js → index.58eaf354.js}

@@ -1,7 +1,7 @@
-import React__default, { useState, useEffect } from "react";
+import React__default from "react";
 import { useEnvironment } from "@m4l/core";
-import { styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
-import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.cdb70977.js";
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { u as useSideBar, g as getNameDataTestId$1 } from "../SideBar/index.0d49daff.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsx } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
@@ -22,8 +22,8 @@ const DivIcon = styled("div", {
   maskRepeat: "no-repeat",
   maskSize: "cover",
   WebkitMaskRepeat: "no-repeat",
-  mask: `url('data:image/svg+xml;base64,${src}')`,
-  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
+  mask: `url(${src})`,
+  WebkitMask: `url(${src})`,
   WebkitMaskSize: "cover",
   ...rotationAngle && {
     transform: `rotate(${rotationAngle}deg)`
@@ -64,66 +64,26 @@ function Icon(props) {
     src,
     size = "small",
     rotationAngle,
-    testingProps,
-    className,
-    memorizeResource = true
+    className
   } = props;
-  const [resource, setResource] = useState(testingProps?.resource || void 0);
   const isDesktop = useResponsiveDesktop();
-  if (memorizeResource) {
-    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: isDesktop ? size : "medium",
     rotationAngle
   };
   const classes = useUtilityClasses(ownerState);
-  if (!memorizeResource) {
-    return /* @__PURE__ */ jsx(IconRoot, {
-      className: clsx(classes.root, className),
-      children: /* @__PURE__ */ jsx("img", {
-        src,
-        alt: src,
-        className: ""
-      })
-    });
-  }
   return /* @__PURE__ */ jsx(IconRoot, {
     className: clsx(classes.root, className),
     ...process.env.NODE_ENV !== "production" ? {
       [TEST_PROP_ID]: getNameDataTestId("root")
     } : {},
-    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
+    children: /* @__PURE__ */ jsx(DivIcon, {
       className: classes.icon,
-      src: resource,
+      src,
       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")
-      } : {}
     })
   });
 }

package/components/Icon/types.d.ts

@@ -1,14 +1,9 @@
 export declare type SizeIcon = 'small' | 'extraSmall' | 'medium' | 'large' | 'extraLarge';
-export interface TestingProps {
-    resource: any;
-}
 export interface IconProps {
     src: string;
     size?: SizeIcon;
     rotationAngle?: number;
-    testingProps?: TestingProps;
     className?: string;
-    memorizeResource?: boolean;
 }
 export declare type DivIconProps = Pick<IconProps, 'src' | 'rotationAngle'>;
 export declare type WrapperPlaceHolderProps = {

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

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

package/components/Image/{utils/classes → classes}/types.d.ts

@@ -1,10 +1,5 @@
 export interface ImageClassesType {
     root: string;
-    lazyLoad: string;
     img: string;
-    span: string;
-    skeletonImage: string;
-    skeletonCircle: string;
-    loaded: string;
 }
 export declare type ImageClassesKey = keyof ImageClassesType;

package/components/Image/index.fa98eb78.js

@@ -0,0 +1,203 @@
+import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
+import clsx from "clsx";
+import { unstable_composeClasses } from "@mui/base";
+import { jsx } from "react/jsx-runtime";
+import { useBase, useEnvironment, evaluateWithContext } from "@m4l/core";
+import { c as classes, g as getSize } from "../PrintingSystem/index.b3ed9375.js";
+import { Q as QRCode } from "../../node_modules.47f7709b.js";
+const ImageRoot = styled("div")(({
+  theme
+}) => ({
+  ...theme.components?.M4LImage?.styleOverrides
+}));
+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%"
+    };
+  }
+};
+const IMAGE_PREFIX = "Image";
+const getNameDataTestId = (KEY) => {
+  return `${IMAGE_PREFIX}-${KEY}`;
+};
+const componentName = "M4LImage";
+generateUtilityClasses(componentName, [
+  "root",
+  "img"
+]);
+function getImagenClassesUtilityClass(slot) {
+  return generateUtilityClass(componentName, slot);
+}
+const useUtilityClasses = () => {
+  const slots = {
+    root: ["root"],
+    img: ["img"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getImagenClassesUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+function Image(props) {
+  const {
+    src,
+    alt,
+    width,
+    height,
+    ratio = "1:1",
+    className
+  } = props;
+  const ratioImage = getRatioValues(ratio);
+  const classes2 = useUtilityClasses();
+  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__ */ jsx("img", {
+      alt,
+      src,
+      className: classes2.img,
+      width: !width ? "100%" : ratioImage.width,
+      height: !height ? "100%" : ratioImage.height,
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getNameDataTestId("img")
+      } : {}
+    })
+  });
+}
+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/tests/utils.d.ts

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

package/components/Image/types.d.ts

@@ -1,54 +1,14 @@
-import { ReactNode } from 'react';
-export declare type Effect = 'blur' | 'black-and-white' | 'opacity';
-export declare type ScrollPosition = {
-    x: number;
-    y: number;
-};
-export declare type IntersectComponentRef = HTMLSpanElement & {
-    setIsVisible?: (visible: boolean) => void;
-};
-export interface TestingProps {
-    statusLoad?: any;
-    isVisible?: boolean;
-}
-export interface BaseImageProps {
-    width?: string | number;
-    height?: string | number;
-}
-export interface IntersectComponentProps extends BaseImageProps {
-    setIsVisible: (visible: boolean) => void;
-    threshold: number;
-    useIntersectionObserver: boolean;
-    scrollPosition?: ScrollPosition;
-}
-export interface IntersectComponentScrollProps extends IntersectComponentProps {
-    delayMethod?: 'debounce' | 'throttle';
-    delayTime?: number;
-}
-export interface LazyLoadComponentProps extends Pick<ImageProps, 'testingProps'>, Omit<IntersectComponentProps, 'setIsVisible'> {
-    children: ReactNode;
-}
-export declare type SkeletonVariant = 'image' | 'circle';
 export declare type RatioOptions = '1.168:1' | '16:9' | '1:1' | '1:1.168' | '2:1' | '2:3' | '3:1' | '3:2' | '3:4' | '4:3' | '5:2';
 export interface ratioValues {
     width: number;
     height: number;
 }
-export interface ImageProps extends Omit<IntersectComponentProps, 'setIsVisible' | 'threshold' | 'useIntersectionObserver'> {
+export interface ImageProps {
     src: string;
     alt?: string;
-    threshold?: number;
-    useIntersectionObserver?: boolean;
-    skeletonVariant?: SkeletonVariant;
-    testingProps?: TestingProps;
     ratio?: RatioOptions;
     className?: string;
-}
-export declare type StatusLoad = 'initial' | 'loaded' | 'removed';
-export interface OwnerState {
-    isImageLoaded: boolean;
-}
-export interface BaseProviderIamgeType {
-    classes: any;
+    width?: number | string;
+    height?: number | string;
 }
 export declare const ratioOptions: Record<RatioOptions, ratioValues>;

package/components/LanguagePopover/{index.e54c5cc7.js → index.2740fb8e.js}

@@ -1,14 +1,14 @@
 import { useState, useEffect } from "react";
 import { styled, generateUtilityClasses, generateUtilityClass, Stack, MenuItem } from "@mui/material";
-import { I as Image } from "../Image/index.d034ca68.js";
+import { I as Image } from "../Image/index.fa98eb78.js";
 import { useLocales } from "@m4l/graphics";
-import { I as ImageButton } from "../mui_extended/Button/index.e520bd15.js";
+import { I as ImageButton } from "../mui_extended/Button/index.81367a73.js";
 import { useEnvironment, useNetwork } from "@m4l/core";
 import { unstable_composeClasses } from "@mui/base";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { C as CircularProgress } from "../mui_extended/CircularProgress/index.ad569afd.js";
-import { P as Popover } from "../mui_extended/Popover/index.b3eca6b1.js";
+import { P as Popover } from "../mui_extended/Popover/index.d85de73b.js";
 const LanguagePopoverRoot = styled("div")(({
   theme
 }) => ({
@@ -128,7 +128,6 @@ function LanguagePopover(props) {
       alt: currentLocale?.name,
       width: "24px",
       height: "24px",
-      skeletonVariant: "circle",
       ...process.env.NODE_ENV !== "production" ? {
         [TEST_PROP_ID]: getNameDataTestId("imageButton")
       } : {}

package/components/LoadingError/{index.123e16f8.js → index.4f4724c4.js}

@@ -4,9 +4,9 @@ import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/mater
 import { unstable_composeClasses } from "@mui/base";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { L as LinearProgressIndeterminate } from "../LinearProgressIndeterminate/index.a0ad2d9e.js";
-import { I as Icon } from "../Icon/index.b920baf8.js";
+import { I as Icon } from "../Icon/index.58eaf354.js";
 import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-import { B as Button } from "../mui_extended/Button/index.e520bd15.js";
+import { B as Button } from "../mui_extended/Button/index.81367a73.js";
 const componentName = "M4LoadingError";
 generateUtilityClasses(componentName, [
   "root",

package/components/MFLoader/{index.52096ea5.js → index.f6a46c70.js}

@@ -12,7 +12,7 @@ import { generateUtilityClasses, generateUtilityClass, styled } from "@mui/mater
 import { unstable_composeClasses } from "@mui/base";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { L as LinearProgress } from "../mui_extended/LinearProgress/index.c92b9ba9.js";
-import { L as LoadingError } from "../LoadingError/index.123e16f8.js";
+import { L as LoadingError } from "../LoadingError/index.4f4724c4.js";
 const componentName = "M4LMFLoader";
 const mfLoaderClasses = generateUtilityClasses(componentName, [
   "root",

package/components/ModalDialog/{index.2e931b5f.js → index.86de725b.js}

@@ -1,11 +1,11 @@
 import { useTheme, Dialog, Paper } from "@mui/material";
 import { c as cjs } from "../../react-draggable.ee21cb7e.js";
-import { u as useModal } from "../../hooks/useModal/index.786a4439.js";
-import { R as ResizeableWindow } from "../Resizeable/index.0eb66c37.js";
+import { u as useModal } from "../../hooks/useModal/index.66a0c82e.js";
+import { R as ResizeableWindow } from "../Resizeable/index.8db8f77d.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { m as modalUtilityClasses } from "../modal/index.61389369.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.2f6286eb.js";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.16946bfd.js";
 const DragabblePaperComponent = (props) => {
   return /* @__PURE__ */ jsx(cjs.exports, {
     handle: ".m4l_draggable_handle",

package/components/NoItemSelected/{index.1024b856.js → index.aa3679f1.js}

@@ -1,7 +1,6 @@
 import { useEnvironment, useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { styled } from "@mui/material/styles";
-import { I as Image } from "../Image/index.d034ca68.js";
-import { generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
+import { styled, generateUtilityClasses, generateUtilityClass, Skeleton } from "@mui/material";
+import { I as Image } from "../Image/index.fa98eb78.js";
 import { useMemo } from "react";
 import { unstable_composeClasses } from "@mui/base";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";

package/components/ObjectLogs/{index.d10f4a2f.js → index.0e365006.js}

@@ -1,18 +1,17 @@
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useNetwork, useModuleDictionary, useEnvironment, usePaginate } from "@m4l/core";
-import { styled } from "@mui/material/styles";
-import { c as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.b1eafce1.js";
+import { styled, Tooltip, IconButton } from "@mui/material";
+import { c as DataGrid, g as getDataGridComponentsDictionary } from "../DataGrid/index.a3792770.js";
 import { D as DateFormatter } from "../formatters/DateFormatter/index.578a9f53.js";
-import { Tooltip, IconButton } from "@mui/material";
 import { useHostTheme, useResponsiveDesktop } from "@m4l/graphics";
 import { R as ReactJson } from "../../react-json-view.5636414a.js";
-import { S as ScrollBar } from "../ScrollBar/index.010f1b9d.js";
+import { S as ScrollBar } from "../ScrollBar/index.7dfc2f29.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { u as useModal } from "../../hooks/useModal/index.786a4439.js";
-import { I as Icon } from "../Icon/index.b920baf8.js";
+import { u as useModal } from "../../hooks/useModal/index.66a0c82e.js";
+import { I as Icon } from "../Icon/index.58eaf354.js";
 import { S as Stack } from "../mui_extended/Stack/index.0e53197c.js";
-import { W as WindowBase } from "../modal/WindowBase.998b8a38.js";
-import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.b93e5649.js";
+import { W as WindowBase } from "../modal/WindowBase.4881da1f.js";
+import { D as DynamicFilter, g as getDynamicFilterComponentsDictionary } from "../DynamicFilter/index.cce92677.js";
 import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
 const Container = styled("div")(() => ({
   height: "100%",

package/components/PDFViewer/{index.98852f91.js → index.85d4e010.js}

@@ -1,7 +1,7 @@
 import { styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { B as Button } from "../mui_extended/Button/index.e520bd15.js";
+import { B as Button } from "../mui_extended/Button/index.81367a73.js";
 const PDFVeiwerRoot = styled("div")(({ theme }) => ({
   ...theme.components?.M4LPDFViewer?.styleOverrides
 }));

package/components/Page/{index.def863f2.js → index.aa33f20b.js}

@@ -1,5 +1,5 @@
 import { useBase, BaseProvider, useModuleSkeleton } from "@m4l/core";
-import { c as classes, g as getSize, F as FactoryRender } from "../PrintingSystem/index.2e17cae5.js";
+import { c as classes, g as getSize, F as FactoryRender } from "../PrintingSystem/index.b3ed9375.js";
 import clsx from "clsx";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React__default from "react";

package/components/PaperForm/{index.8a617a66.js → index.b6811634.js}

@@ -1,7 +1,6 @@
-import { styled } from "@mui/material/styles";
+import { styled, Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
 import { useModuleSkeleton } from "@m4l/core";
-import { Skeleton, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { I as Icon } from "../Icon/index.b920baf8.js";
+import { I as Icon } from "../Icon/index.58eaf354.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { unstable_composeClasses } from "@mui/base";
 const PaperFormRoot = styled("div")(({

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

@@ -4,7 +4,9 @@ export declare const periodClasses: PeriodClassesType;
 export declare function getPeriodUtilityClass(slot: string): string;
 export declare const periodUtilityClasses: (ownerState: OwnerState) => {
     root: string;
-    gap: string;
     containerDateLabel: string;
     containerDateValue: string;
+    skeleton: string;
+    skeletonFieldPrimary: string;
+    skeletonFieldSecondary: string;
 };

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

@@ -1,13 +1,18 @@
 import { periodUtilityClasses } from ".";
 export interface PeriodClassesType {
     root: string;
-    gap: string;
     containerDateLabel: string;
     containerDateValue: string;
+    skeleton: string;
+    skeletonFieldPrimary: string;
+    skeletonFieldSecondary: string;
     stateError: string;
     stateReadOnly: string;
     variantMonoperiod: string;
     variantMultiperiod: string;
+    sizeSmall: string;
+    sizeMedium: string;
+    isFocus: string;
 }
 export declare type PeriodClassesKey = keyof PeriodClassesType;
 export declare type Classes = ReturnType<typeof periodUtilityClasses>;