@m4l/components 0.1.93 → 0.1.95

package/components/PrintingSystem/index.e18a2fa8.js

@@ -1,634 +0,0 @@
-import { generateUtilityClasses } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.6469f148.js";
-import { styled, useTheme } from "@mui/material/styles";
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { a as ImageNode } from "../Image/index.611cd930.js";
-import { createRef, useEffect, forwardRef, useRef, useImperativeHandle } from "react";
-import { C as Chart, S as ScatterWithErrorBarsController, L as LineWithErrorBarsChart, P as PointWithErrorBar, r as registerables } from "../../node_modules.b55d04d9.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.c4642a29.js";
-const componentName = "M4LPrintingSystem";
-const classes = generateUtilityClasses(componentName, [
-  "root",
-  "pageNodeRoot",
-  "sectionNodeRoot",
-  "dividerNodeRoot",
-  "dividerNodeVertical",
-  "dividerNodeHorizontal",
-  "textBoxNodeVariant",
-  "textBoxNodeRoot",
-  "headerNodeRoot",
-  "imageNodeRoot",
-  "paperNodeRoot",
-  "paperNodeTitle",
-  "paperNodeContent",
-  "propertyValueNodeRoot",
-  "propertyValueNodeTitle",
-  "propertyValueNodeContent",
-  "propertyValueNodeHorizontal",
-  "propertyValueNodeVertical",
-  "gridNodeRoot",
-  "footerNodeRoot",
-  "bodyNodeRoot",
-  "paperNodeContainerTitles",
-  "paperNodeTitleSecondary",
-  "pagerNodeRoot",
-  "gridNodeTh",
-  "gridNodeTr",
-  "gridNodeTd",
-  "chartNodeRoot"
-]);
-const printingSystemUtilityClasses = () => {
-  const slots = {
-    root: ["root"],
-    pageNodeRoot: ["pageNodeRoot"],
-    sectionNodeRoot: ["sectionNodeRoot"],
-    dividerNodeRoot: ["dividerNodeRoot"],
-    dividerNodeVertical: ["dividerNodeVertical"],
-    dividerNodeHorizontal: ["dividerNodeHorizontal"],
-    textBoxNodeVariant: ["textBoxNodeVariant"],
-    textBoxNodeRoot: ["textBoxNodeRoot"],
-    headerNodeRoot: ["headerNodeRoot"],
-    imageNodeRoot: ["imageNodeRoot"],
-    paperNodeRoot: ["paperNodeRoot"],
-    paperNodeTitle: ["paperNodeTitle"],
-    paperNodeContent: ["paperNodeContent"],
-    propertyValueNodeRoot: ["propertyValueNodeRoot"],
-    propertyValueNodeTitle: ["propertyValueNodeTitle"],
-    propertyValueNodeContent: ["propertyValueNodeContent"],
-    propertyValueNodeHorizontal: ["propertyValueNodeHorizontal"],
-    propertyValueNodeVertical: ["propertyValueNodeVertical"],
-    gridNodeRoot: ["gridNodeRoot"],
-    footerNodeRoot: ["footerNodeRoot"],
-    bodyNodeRoot: ["bodyNodeRoot"],
-    paperNodeContainerTitles: ["paperNodeContainerTitles"],
-    paperNodeTitleSecondary: ["paperNodeTitleSecondary"],
-    pagerNodeRoot: ["pagerNodeRoot"],
-    gridNodeTh: ["gridNodeTh"],
-    gridNodeTr: ["gridNodeTr"],
-    gridNodeTd: ["gridNodeTd"],
-    chartNodeRoot: ["chartNodeRoot"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getComponentUtilityClass(componentName), {});
-  return {
-    ...composedClasses
-  };
-};
-const PrintingSystemRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LPrintingSystem?.styleOverrides
-}));
-const DividerNode = (props) => {
-  const {
-    direction = "vertical",
-    className = "",
-    style = {}
-  } = props;
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.dividerNodeRoot, className, direction === "vertical" ? classes.dividerNodeVertical : classes.dividerNodeHorizontal),
-    style: {
-      ...style
-    }
-  });
-};
-const getSize = (value, unitSize) => {
-  if (typeof value === "number") {
-    return `${value}${unitSize}`;
-  } else {
-    return value;
-  }
-};
-const SectionNode = (props) => {
-  const {
-    children,
-    className,
-    direction = "row",
-    gap = "unset",
-    style,
-    width = "auto",
-    height = "auto",
-    paddingTop = "unset",
-    paddingRight = "unset",
-    paddingBottom = "unset",
-    paddingLeft = "unset",
-    alignX = "unset",
-    alignY = "unset",
-    grow = false
-  } = props;
-  const {
-    unitSize
-  } = useBase();
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.sectionNodeRoot, className),
-    style: {
-      flexDirection: direction,
-      gap: getSize(gap, unitSize),
-      width: getSize(width, unitSize),
-      height: getSize(height, unitSize),
-      minWidth: getSize(width, unitSize),
-      minHeight: getSize(height, unitSize),
-      paddingTop: getSize(paddingTop, unitSize),
-      paddingRight: getSize(paddingRight, unitSize),
-      paddingBottom: getSize(paddingBottom, unitSize),
-      paddingLeft: getSize(paddingLeft, unitSize),
-      justifyContent: direction === "row" ? alignX : alignY,
-      alignItems: direction === "row" ? alignY : alignX,
-      flex: grow ? 1 : "unset",
-      ...style
-    },
-    children
-  });
-};
-const getEvalValue = (sourceData, key) => {
-  const regexPattern = /\${([^${}]+(?:\${[^{}]*}[^${}]*)*)}/g;
-  if (regexPattern.test(key)) {
-    const matches = [];
-    let match;
-    let localRegex = new RegExp(regexPattern);
-    while ((match = localRegex.exec(key)) !== null) {
-      matches.push(match[1]);
-    }
-    const finalValue = new Array();
-    matches.map((findMatch) => {
-      const nestedRegex = /\${([^${}]+(?:\${[^{}]*}[^${}]*)*)}/g;
-      if (nestedRegex.test(findMatch)) {
-        const regexKeyReady = /([^ ${]+)/;
-        let matchKeyReady = regexKeyReady.exec(findMatch) || "";
-        let nestedKey = findMatch.match(regexPattern) || "";
-        finalValue.push(getPropertyByString(sourceData, matchKeyReady[1]));
-        finalValue.push(getEvalValue(sourceData, nestedKey[0]));
-      } else {
-        finalValue.push(getPropertyByString(sourceData, findMatch));
-      }
-    });
-    return finalValue.join(" ");
-  } else {
-    return key;
-  }
-};
-const TextBoxNode = (props) => {
-  const {
-    variant = "body",
-    style,
-    className,
-    textAlign = "start",
-    children
-  } = props;
-  const {
-    sourceData
-  } = useBase();
-  const textFormated = getEvalValue(sourceData, children[1]);
-  return /* @__PURE__ */ jsx("span", {
-    className: clsx(classes.textBoxNodeRoot, className, `${classes.textBoxNodeVariant}-${variant}`),
-    style: {
-      textAlign,
-      ...style
-    },
-    children: textFormated
-  });
-};
-const HeaderNode = (props) => {
-  const {
-    children,
-    className,
-    direction = "row",
-    gap = "unset",
-    style,
-    width = "auto",
-    height = "auto",
-    paddingTop = "unset",
-    paddingRight = "unset",
-    paddingBottom = "unset",
-    paddingLeft = "unset",
-    alignX = "unset",
-    alignY = "unset",
-    grow = false
-  } = props;
-  const {
-    unitSize
-  } = useBase();
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.headerNodeRoot, className),
-    style: {
-      flexDirection: direction,
-      gap: getSize(gap, unitSize),
-      width: getSize(width, unitSize),
-      height: getSize(height, unitSize),
-      minWidth: getSize(width, unitSize),
-      minHeight: getSize(height, unitSize),
-      paddingTop: getSize(paddingTop, unitSize),
-      paddingRight: getSize(paddingRight, unitSize),
-      paddingBottom: getSize(paddingBottom, unitSize),
-      paddingLeft: getSize(paddingLeft, unitSize),
-      justifyContent: direction === "row" ? alignX : alignY,
-      alignItems: direction === "row" ? alignY : alignX,
-      flex: grow ? 1 : "unset",
-      ...style
-    },
-    children
-  });
-};
-const BodyNode = (props) => {
-  const {
-    children,
-    className,
-    direction = "row",
-    gap = "unset",
-    style,
-    width = "auto",
-    height = "auto",
-    paddingTop = "unset",
-    paddingRight = "unset",
-    paddingBottom = "unset",
-    paddingLeft = "unset",
-    alignX = "unset",
-    alignY = "unset",
-    grow = false
-  } = props;
-  const {
-    unitSize
-  } = useBase();
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.bodyNodeRoot, className),
-    style: {
-      flexDirection: direction,
-      gap: getSize(gap, unitSize),
-      width: getSize(width, unitSize),
-      height: getSize(height, unitSize),
-      minWidth: getSize(width, unitSize),
-      minHeight: getSize(height, unitSize),
-      paddingTop: getSize(paddingTop, unitSize),
-      paddingRight: getSize(paddingRight, unitSize),
-      paddingBottom: getSize(paddingBottom, unitSize),
-      paddingLeft: getSize(paddingLeft, unitSize),
-      justifyContent: direction === "row" ? alignX : alignY,
-      alignItems: direction === "row" ? alignY : alignX,
-      flex: grow ? 1 : "unset",
-      ...style
-    },
-    children
-  });
-};
-const FooterNode = (props) => {
-  const {
-    children,
-    className,
-    direction = "row",
-    gap = "unset",
-    style,
-    width = "auto",
-    height = "auto",
-    paddingTop = "unset",
-    paddingRight = "unset",
-    paddingBottom = "unset",
-    paddingLeft = "unset",
-    alignX = "unset",
-    alignY = "unset",
-    grow = false
-  } = props;
-  const {
-    unitSize
-  } = useBase();
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.footerNodeRoot, className),
-    style: {
-      flexDirection: direction,
-      gap: getSize(gap, unitSize),
-      width: getSize(width, unitSize),
-      height: getSize(height, unitSize),
-      minWidth: getSize(width, unitSize),
-      minHeight: getSize(height, unitSize),
-      paddingTop: getSize(paddingTop, unitSize),
-      paddingRight: getSize(paddingRight, unitSize),
-      paddingBottom: getSize(paddingBottom, unitSize),
-      paddingLeft: getSize(paddingLeft, unitSize),
-      justifyContent: direction === "row" ? alignX : alignY,
-      alignItems: direction === "row" ? alignY : alignX,
-      flex: grow ? 1 : "unset",
-      ...style
-    },
-    children
-  });
-};
-const PaperNode = (props) => {
-  const {
-    children,
-    style = {},
-    className = "",
-    title,
-    titleSecondary
-  } = props;
-  const {
-    mainColor
-  } = useBase();
-  const {
-    sourceData
-  } = useBase();
-  const titleFormated = getEvalValue(sourceData, title);
-  const titleSecondaryFormated = getEvalValue(sourceData, titleSecondary || "");
-  return /* @__PURE__ */ jsxs("div", {
-    className: clsx(classes.paperNodeRoot, className),
-    style: {
-      ...style
-    },
-    children: [/* @__PURE__ */ jsxs("div", {
-      className: classes.paperNodeContainerTitles,
-      children: [/* @__PURE__ */ jsx("div", {
-        className: classes.paperNodeTitle,
-        children: titleFormated
-      }), titleSecondary ? /* @__PURE__ */ jsx("div", {
-        className: classes.paperNodeTitleSecondary,
-        style: {
-          color: mainColor
-        },
-        children: titleSecondaryFormated
-      }) : null]
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.paperNodeContent,
-      children
-    })]
-  });
-};
-const PropertyValueNode = (props) => {
-  const {
-    style = {},
-    className = "",
-    property,
-    value,
-    direction,
-    propertyWidth = "auto"
-  } = props;
-  console.log();
-  const {
-    unitSize,
-    mainColor,
-    sourceData
-  } = useBase();
-  const propertyFormated = evaluateWithContext(sourceData, property);
-  const valueFormated = evaluateWithContext(sourceData, value);
-  return /* @__PURE__ */ jsxs("div", {
-    className: clsx(classes.propertyValueNodeRoot, direction === "column" ? classes.propertyValueNodeHorizontal : classes.propertyValueNodeVertical, className),
-    style: {
-      ...style
-    },
-    children: [/* @__PURE__ */ jsx("div", {
-      className: classes.propertyValueNodeTitle,
-      style: {
-        width: getSize(propertyWidth, unitSize),
-        minWidth: getSize(propertyWidth, unitSize),
-        borderColor: mainColor
-      },
-      children: propertyFormated
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.propertyValueNodeContent,
-      children: valueFormated
-    })]
-  });
-};
-const GridNode = (props) => {
-  const {
-    style = {},
-    className = "",
-    rows,
-    columns
-  } = props;
-  const regexPattern = /\$\{([^{}]+)\}/g;
-  const rowMaybeString = typeof rows === "string" && regexPattern.exec(rows) || "";
-  const dataColumns = Array.isArray(columns) && columns.length > 0 ? columns : [];
-  const {
-    unitSize,
-    sourceData
-  } = useBase();
-  const result = getPropertyByString(sourceData, typeof rows === "string" ? rowMaybeString[1] : "");
-  console.log("rows", rows);
-  console.log("result", result);
-  const rowEval = Array.isArray(result) ? result : typeof result === "object" ? [{
-    ...result
-  }] : [];
-  console.log("rows", rows);
-  console.log("rowEval", rowEval);
-  const rowsFormated = typeof rows === "string" ? rowEval : rows;
-  if (dataColumns.length > 0) {
-    return /* @__PURE__ */ jsxs("table", {
-      className: clsx(classes.gridNodeRoot, className),
-      style: {
-        ...style
-      },
-      children: [/* @__PURE__ */ jsx("thead", {
-        children: /* @__PURE__ */ jsx("tr", {
-          className: classes.gridNodeTr,
-          children: columns.map((column) => {
-            return /* @__PURE__ */ jsx("th", {
-              className: classes.gridNodeTh,
-              style: {
-                minWidth: column.width ? getSize(column.width, unitSize) : "auto",
-                maxWidth: column.width ? getSize(column.width, unitSize) : "auto",
-                justifyContent: column.alignX ? column.alignX : "center"
-              },
-              children: getEvalValue(sourceData, column.title)
-            }, `th-${Math.random().toString(36).substring(7)}`);
-          })
-        }, `tr-${Math.random().toString(36).substring(7)}`)
-      }), /* @__PURE__ */ jsx("tbody", {
-        children: rowsFormated.map((row) => {
-          return /* @__PURE__ */ jsx("tr", {
-            className: classes.gridNodeTr,
-            children: columns.map((cell, id) => {
-              const isNested = cell.nestedValue ? true : false;
-              return /* @__PURE__ */ jsx("td", {
-                className: classes.gridNodeTd,
-                style: {
-                  minWidth: getSize(dataColumns[id].width || "auto", unitSize),
-                  justifyContent: cell.alignX ? cell.alignX : "center"
-                },
-                children: isNested ? getPropertyByString(row, dataColumns[id].nestedValue || "") : row[dataColumns[id].key]
-              }, `td-${Math.random().toString(36).substring(7)}`);
-            })
-          }, `tr-${Math.random().toString(36).substring(7)}`);
-        })
-      })]
-    });
-  }
-  return null;
-};
-Chart.register(ScatterWithErrorBarsController, LineWithErrorBarsChart, PointWithErrorBar, ...registerables);
-const ChartNode = (props) => {
-  const {
-    style = {},
-    className = "",
-    points,
-    messageX,
-    messageY
-  } = props;
-  const canvasRef = createRef();
-  const regexPattern = /\$\{([^{}]+)\}/g;
-  const {
-    sourceData
-  } = useBase();
-  const pointsMaybeString = typeof points === "string" && regexPattern.exec(points) || "";
-  const formatPoints = typeof points === "string" ? getPropertyByString(sourceData, pointsMaybeString[1]) : points;
-  const data = Array.isArray(formatPoints) && formatPoints.length > 0 ? formatPoints.map((point) => {
-    return {
-      x: 0,
-      xMin: 0,
-      xMax: 0,
-      y: point.correction,
-      yMin: point.correction - point.uncertainty,
-      yMax: point.correction + point.uncertainty
-    };
-  }) : [];
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (canvas != null) {
-      const ctx = canvas.getContext("2d");
-      if (ctx != null) {
-        new LineWithErrorBarsChart(ctx, {
-          data: {
-            labels: Array.isArray(formatPoints) && formatPoints.length > 0 ? formatPoints.map((point) => point.avg) : [],
-            datasets: [{
-              data,
-              borderWidth: 0,
-              pointBorderWidth: 0
-            }]
-          },
-          options: {
-            plugins: {
-              legend: {
-                display: false
-              }
-            },
-            elements: {
-              pointWithErrorBar: {
-                radius: 5,
-                backgroundColor: "black"
-              }
-            },
-            scales: {
-              x: {
-                title: {
-                  display: true,
-                  text: getEvalValue(sourceData, messageX)
-                }
-              },
-              y: {
-                title: {
-                  display: true,
-                  text: getEvalValue(sourceData, messageY)
-                }
-              }
-            }
-          }
-        });
-      }
-    }
-  }, [canvasRef, points]);
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(classes.chartNodeRoot, className),
-    style: {
-      ...style
-    },
-    children: /* @__PURE__ */ jsx("canvas", {
-      ref: canvasRef
-    })
-  });
-};
-const FactoryRender = (props) => {
-  const {
-    data: parent
-  } = props;
-  const {
-    children,
-    ...otherProps
-  } = parent || {};
-  const strategiesComponents = {
-    section: SectionNode,
-    textBox: TextBoxNode,
-    divider: DividerNode,
-    image: ImageNode,
-    header: HeaderNode,
-    body: BodyNode,
-    footer: FooterNode,
-    paper: PaperNode,
-    propertyValue: PropertyValueNode,
-    grid: GridNode,
-    chart: ChartNode,
-    pager: PagerNode,
-    __default__: () => {
-      throw new Error("Type no defined");
-    }
-  };
-  const Component = strategiesComponents[parent.type] ?? strategiesComponents.__default__;
-  return /* @__PURE__ */ jsxs(Component, {
-    ...otherProps,
-    children: [Array.isArray(children) && children.length > 0 ? children.map((subComponent, _id) => {
-      return /* @__PURE__ */ jsx(FactoryRender, {
-        data: subComponent
-      }, `${subComponent.key}-${Math.random().toString(36).substring(7)}`);
-    }) : null, typeof children === "string" ? children : null]
-  });
-};
-const PrintingSystem = forwardRef((props, ref) => {
-  const {
-    templateData: nodeRoot,
-    sourceData,
-    className
-  } = props;
-  const theme = useTheme();
-  console.log("sourceData", sourceData);
-  const classes2 = printingSystemUtilityClasses();
-  const listPages = Array.isArray(nodeRoot.pages) && nodeRoot.pages.length > 0 ? nodeRoot.pages : [];
-  const rootRef = useRef(null);
-  useImperativeHandle(ref, () => ({
-    GoPrint: async () => {
-      if (rootRef.current) {
-        const content = rootRef.current;
-        const printWindow = window.open("", "_blank");
-        if (printWindow) {
-          const printDocument = printWindow.document;
-          printDocument.write("<html><head><title>Contenido a imprimir</title></head><body></body></html>");
-          printDocument.body.appendChild(content.cloneNode(true));
-          const styleElement = printDocument.createElement("style");
-          styleElement.textContent = `
-                        ${theme.components?.M4LPrintingSystem?.styleOverrides} 
-                    `;
-          printDocument.head.appendChild(styleElement);
-          printDocument.close();
-          printWindow.print();
-        }
-      }
-    }
-  }));
-  const Header = () => /* @__PURE__ */ jsx(FactoryRender, {
-    data: nodeRoot.header[0]
-  });
-  const Footer = () => /* @__PURE__ */ jsx(FactoryRender, {
-    data: nodeRoot.footer[0]
-  });
-  return /* @__PURE__ */ jsx(PrintingSystemRoot, {
-    className: clsx(classes2.root, className),
-    ref: rootRef,
-    children: listPages.map((page, id) => {
-      return /* @__PURE__ */ jsx(PageRender, {
-        data: page,
-        id: id + 1,
-        unitSize: nodeRoot.unitSizes,
-        mainColor: nodeRoot.mainColor,
-        countPages: listPages.length,
-        HeaderGeneral: Header,
-        FooterGeneral: Footer,
-        sourceData,
-        templateData: nodeRoot
-      }, page.key);
-    })
-  });
-});
-export {
-  FactoryRender as F,
-  PrintingSystem as P,
-  getSize as a,
-  classes as c,
-  getEvalValue as g
-};