@m4l/components 0.2.13 → 0.2.15

package/components/PopupsProvider/contexts/PopupsContext/types.d.ts

@@ -0,0 +1,117 @@
+import { GetLabelType } from '@m4l/core';
+import { ReactNode } from 'react';
+import { PopupsClasses } from '../../classes/types';
+import { DraggableWindowProps } from '../../../DragResizeWindow/types';
+import { PositionXY } from '../../../../utils/types';
+export interface PopupStoreProps extends Pick<DraggableWindowProps, 'bounds' | 'defaultPosition'> {
+    /**
+     * "popupId" Indetificador del popupId
+     */
+    popupId: string;
+    /**
+     * "title" Titulo de la ventan
+    */
+    title?: string;
+    /**
+     * draggable Indica si el popup es arrastrable, default true
+     */
+    draggable?: boolean;
+    /**
+     * resizable Indica si el popup es redimensionable, default true
+     */
+    resizable?: boolean;
+    /**
+     * maxSizeByPadding Tamaño maximo del popup en terminos de padding con respecto al conenedor padre
+     */
+    maxSizeByPadding?: PositionXY;
+    /**
+     * functionComponent retorna el componente que se va a mostrar en el popup.
+     * Se utiliza ()=>ReactNode para evitar que zustand cargue todo el componente en el store.
+     * Lo unico que necesita es guardar la referencia la función que retorna el componente.
+     */
+    functionComponent: (() => ReactNode);
+    /**
+     * "onMouseDown" Evento nativo del Draggable, para tomar acciones externamente
+     */
+    onMouseDown?: (e: MouseEvent) => void;
+}
+export declare type PopupsStatus = 'init' | 'ready';
+export declare type OwnerState = {
+    status: PopupsStatus;
+    /**
+     *  "isMobile" cuando el navegador está en modo celular
+     */
+    isMobile: boolean;
+    /**
+     *  "isSkeleton" indica si el componente está en skeleton.
+     */
+    isSkeleton: boolean;
+};
+/**
+ * @type
+ * @name ExternalOwnerState
+ * @description Estados que se actulizan por fuera del store, a través de hooks
+ */
+export declare type ExternalOwnerState = Pick<OwnerState, 'isMobile' | 'isSkeleton'>;
+/**
+ * @interface
+ * @description Interface que define el estado del componente (variables y funciones )
+ */
+export interface PopupsState {
+    ownerState: OwnerState;
+    /**
+     *  "classes" enfocado al funcionamiento de las clases a nivel de map
+     */
+    classes: PopupsClasses;
+    /**
+     *  "poupsIds" Poups para saber en que orden se muestran
+     */
+    popupsIds: string[];
+    /**
+     *  "hashPoups" Poups
+     */
+    hashPopups: Record<string, PopupStoreProps>;
+    /**
+     *  "getLabel" funcion que usará para traducir las etiquetas de diccionario
+     */
+    getLabel: GetLabelType;
+}
+export interface PopupsStateWithActions extends PopupsState {
+    popupsActions: {
+        /**
+         * @description
+         */
+        init(layersStore: PopupStoreProps[]): void;
+        /**
+         * @description Cambia el estado del popus
+         */
+        setState: (state: PopupsStatus) => void;
+        /**
+         * @description Agrega una capa nueva,
+         */
+        addPopup: (popupProps: PopupStoreProps) => void;
+        /**
+         * @description Remueve un feature especifico de la capa
+         */
+        removePopup: (layerId: string) => void;
+        /**
+         * @description Actualiza la variable de estado "getLabel"
+         * @param newHandler handle o función que va a traducir las etiquetas, esto es necesario debido que getLabel de useModuleDictionary
+         * cambia por el useCallback, cuando el diccionario se carga.
+         * @returns void
+         */
+        setHandlerGetLabel: (newHandler: GetLabelType) => void;
+        /**
+         * @description Modifica los estados que se actualizan externamente al Store
+         * @param newIsMobile
+         * @returns
+         */
+        setExternalState: (newExternalState: ExternalOwnerState) => void;
+    };
+}
+export declare type DefaultPopupsStoreProps = PopupsState;
+export declare type InitialPopupsStoreProps = Pick<PopupsState, 'getLabel' | 'ownerState'> & Partial<DefaultPopupsStoreProps>;
+export interface PopupsProviderProps {
+    initialPopups?: PopupStoreProps[];
+    children: ReactNode;
+}

package/components/PopupsProvider/hooks/usePopupsStore/index.d.ts

@@ -0,0 +1,3 @@
+import { PopupsStateWithActions } from '../../contexts/PopupsContext/types';
+export declare function usePopupsStore<T>(selector: (state: PopupsStateWithActions) => T, equalityFn?: (left: T, right: T) => boolean): T;
+export default usePopupsStore;

package/components/PopupsProvider/index.ae1bd010.js

@@ -0,0 +1,247 @@
+import React__default, { useContext, useRef, useEffect, createContext } from "react";
+import { createStore, useStore } from "zustand";
+import { shallow } from "zustand/shallow";
+import { useResponsiveDesktop, useFirstRender } from "@m4l/graphics";
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { generateUtilityClasses, generateUtilityClass } from "@mui/material";
+import { unstable_composeClasses } from "@mui/base";
+import { cloneDeep } from "lodash";
+import clsx from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "@mui/material/styles";
+import { D as DragResizeWindow, d as draggableWindowClasses } from "../DragResizeWindow/index.67aa1e22.js";
+import { useMap } from "react-leaflet";
+import { u as useSizeContainer } from "../../hooks/useSizeContainer/index.62b4e0c4.js";
+const COMPONENT_CLASS_NAME = "M4LPopupsProvider";
+const MAP_ZINDEX_OVER_MAP = 1100;
+const popupsClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "windowRoot",
+  "headerContainer",
+  "windowContent"
+]);
+function getPopupsUtilityClass(slot) {
+  return generateUtilityClass(COMPONENT_CLASS_NAME, slot);
+}
+const popupsUtilityClasses = (_ownerState) => {
+  const slots = {
+    root: ["root"],
+    popupsContainer: ["popupsContainer"],
+    windowRoot: ["windowBaseRoot"],
+    headerContainer: ["headerContainer"],
+    windowContent: ["windowContent"]
+  };
+  const composedClasses = unstable_composeClasses(slots, getPopupsUtilityClass, {});
+  return {
+    ...composedClasses
+  };
+};
+const updateOwnerStateClasses = (state) => {
+  state.classes = popupsUtilityClasses(state.ownerState);
+};
+const createPopupsStore = (initProps) => {
+  const startProps = {
+    classes: popupsUtilityClasses(initProps.ownerState),
+    popupsIds: [],
+    hashPopups: {},
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        popupsActions: {
+          init: (initialPopups) => {
+            set((state) => {
+              for (let index = 0; index < initialPopups.length; index++) {
+                state.hashPopups[initialPopups[index].popupId] = cloneDeep(
+                  initialPopups[index]
+                );
+                state.popupsIds.push(initialPopups[index].popupId);
+              }
+            });
+          },
+          setState: (status) => {
+            set((state) => {
+              state.ownerState.status = status;
+            });
+          },
+          addPopup: (popupProps) => {
+            if (get().hashPopups[popupProps.popupId]) {
+              throw new Error(`Poupup with id ${popupProps.popupId} already exists`);
+            }
+            set((state) => {
+              state.hashPopups[popupProps.popupId] = popupProps;
+              state.popupsIds.push(popupProps.popupId);
+            });
+          },
+          removePopup: (popupId) => {
+            if (!get().hashPopups[popupId]) {
+              return;
+            }
+            set((state) => {
+              state.popupsIds.splice(state.popupsIds.indexOf(popupId), 1);
+              delete state.hashPopups[popupId];
+            });
+          },
+          setHandlerGetLabel: (newHandler) => {
+            set((state) => {
+              state.getLabel = newHandler;
+            });
+          },
+          setExternalState: (newExternalState) => {
+            set((state) => {
+              state.ownerState = { ...state.ownerState, ...newExternalState };
+              updateOwnerStateClasses(state);
+            });
+          }
+        }
+      })),
+      { name: `Popups store` }
+    )
+  );
+};
+function usePopupsStore(selector, equalityFn) {
+  const context = useContext(PopupsContext);
+  if (!context)
+    throw new Error("usePopupsStore context must be use inside PopupsContext");
+  return useStore(context, selector, equalityFn);
+}
+const PopupWindowRoot = styled("div")`
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+
+    .${popupsClasses.headerContainer} {
+        position: relative;
+    }
+    .${popupsClasses.windowContent} {
+        padding: 12px;
+        position: relative;
+        flex-grow: 1;
+        overflow: hidden;
+    }
+
+`;
+const Popup = (props) => {
+  const {
+    popupId,
+    containerElement,
+    containerSize
+  } = props;
+  const popup = usePopupsStore((state) => state.hashPopups[popupId], shallow);
+  const {
+    draggable,
+    resizable,
+    defaultPosition,
+    bounds,
+    ...others
+  } = popup;
+  const nodeRef = useRef(null);
+  return /* @__PURE__ */ jsx(DragResizeWindow, {
+    className: popupsClasses.root,
+    onMouseDown: popup.onMouseDown,
+    containerElement,
+    containerSize,
+    bounds,
+    draggable,
+    resizeable: resizable,
+    defaultPosition,
+    ...others,
+    children: /* @__PURE__ */ jsxs(PopupWindowRoot, {
+      className: popupsClasses.windowRoot,
+      children: [/* @__PURE__ */ jsx("div", {
+        ref: nodeRef,
+        className: clsx(popupsClasses.headerContainer, draggableWindowClasses.draggableHandle),
+        children: /* @__PURE__ */ jsx("h3", {
+          children: popup.popupId
+        })
+      }), /* @__PURE__ */ jsx("div", {
+        className: popupsClasses.windowContent,
+        children: popup.functionComponent()
+      })]
+    })
+  });
+};
+const PopupsContainer = (_props) => {
+  const map = useMap();
+  const popupsIds = usePopupsStore((state) => state.popupsIds, shallow);
+  const [containerElement, setContainerElement] = React__default.useState();
+  const containerSize = useSizeContainer(containerElement);
+  useEffect(() => {
+    if (!map)
+      return;
+    setContainerElement(map.getContainer());
+  }, [map]);
+  if (!containerElement) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(React__default.Fragment, {
+    children: popupsIds.map((id) => {
+      return /* @__PURE__ */ jsx(Popup, {
+        popupId: id,
+        containerElement,
+        containerSize
+      }, id);
+    })
+  });
+};
+const PopupsContext = createContext(null);
+function PopupsProvider(props) {
+  const {
+    children,
+    initialPopups
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const isFirstRender = useFirstRender([getLabel]);
+  const popupsStoreRef = useRef();
+  if (!popupsStoreRef.current) {
+    popupsStoreRef.current = createPopupsStore({
+      getLabel,
+      ownerState: {
+        status: "init",
+        isMobile: !isDesktop,
+        isSkeleton
+      }
+    });
+    popupsStoreRef.current?.getState().popupsActions.init(initialPopups || []);
+  }
+  const {
+    setHandlerGetLabel,
+    setExternalState
+  } = useStore(popupsStoreRef.current, (state) => state.popupsActions, shallow);
+  useEffect(() => {
+    if (!isFirstRender) {
+      setHandlerGetLabel(getLabel);
+    }
+  }, [getLabel]);
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    setExternalState({
+      isMobile: !isDesktop,
+      isSkeleton
+    });
+  }, [isDesktop, isSkeleton]);
+  return /* @__PURE__ */ jsx(PopupsContext.Provider, {
+    value: popupsStoreRef.current,
+    children: /* @__PURE__ */ jsxs(React__default.Fragment, {
+      children: [children, /* @__PURE__ */ jsx(PopupsContainer, {})]
+    })
+  });
+}
+export {
+  MAP_ZINDEX_OVER_MAP as M,
+  PopupsProvider as P,
+  usePopupsStore as u
+};

package/components/PopupsProvider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './contexts/PopupsContext';
+export { usePopupsStore } from './hooks/usePopupsStore';

package/components/PopupsProvider/subcomponents/Popup/index.d.ts

@@ -0,0 +1,8 @@
+import type { PopupProps } from './types';
+export declare type ResizeCorrectionRef = {
+    initialSize: {
+        width: number;
+        height: number;
+    };
+};
+export declare const Popup: (props: PopupProps) => import("react/jsx-runtime").JSX.Element;

package/components/PopupsProvider/subcomponents/Popup/types.d.ts

@@ -0,0 +1,16 @@
+import { ContainerSize } from "../../../../utils/types";
+export declare type ResizeReason = 'start' | 'resize' | 'stop';
+export interface PopupProps {
+    /**
+     * "popupId" Indetificador del popupId
+     */
+    popupId: string;
+    /**
+     * Referencia el contendedor donde van a estar los popups
+     */
+    containerElement: HTMLElement;
+    /**
+     * "containerSize" tamaño del contenedor padre
+     */
+    containerSize?: ContainerSize | undefined;
+}

package/components/PopupsProvider/subcomponents/PopupsContainer/index.d.ts

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

package/components/PopupsProvider/subcomponents/PopupsContainer/types.d.ts

@@ -0,0 +1 @@
+export declare type PopupContainerProps = {};

package/components/PrintingSystem/{index.70234425.js → index.b69edc07.js}

@@ -1,21 +1,21 @@
+import { getPropertyByString } from "@m4l/core";
 import { generateUtilityClasses } from "@mui/material";
 import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass } from "../../utils/index.de903261.js";
+import { g as getComponentUtilityClass } from "../../utils/index.9ad3909a.js";
 import { styled, useTheme } from "@mui/material/styles";
 import clsx from "clsx";
-import { D as DividerNode } from "./subcomponents/DividerNode/index.91e65ff6.js";
-import { S as SectionNode } from "./subcomponents/SectionNode/index.25aeb4aa.js";
-import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.2b632722.js";
-import { H as HeaderNode } from "./subcomponents/HeaderNode/index.732d7c58.js";
-import { a as ImageNode, Q as QRImageNode } from "../Image/index.d684bdf2.js";
-import { B as BodyNode } from "./subcomponents/BodyNode/index.1dd418aa.js";
-import { F as FooterNode } from "./subcomponents/FooterNode/index.c2481749.js";
-import { P as PaperNode } from "./subcomponents/PaperNode/index.1a20a9d4.js";
-import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.8402e742.js";
-import { G as GridNode } from "./subcomponents/GridNode/index.758d94d1.js";
-import { C as ChartNode } from "./subcomponents/ChartNode/index.6aadd6b3.js";
-import { P as PagerNode, a as PageRender } from "../Page/index.890fbaac.js";
-import { useBase, evaluateWithContext } from "@m4l/core";
+import { D as DividerNode } from "./subcomponents/DividerNode/index.0e6e76ad.js";
+import { S as SectionNode } from "./subcomponents/SectionNode/index.72cb64b8.js";
+import { T as TextBoxNode } from "./subcomponents/TextBoxNode/index.41c261f4.js";
+import { H as HeaderNode } from "./subcomponents/HeaderNode/index.dbf08ab4.js";
+import { a as ImageNode } from "../Image/index.d5fed0ab.js";
+import { B as BodyNode } from "./subcomponents/BodyNode/index.81da2c9c.js";
+import { F as FooterNode } from "./subcomponents/FooterNode/index.5af68fd5.js";
+import { P as PaperNode } from "./subcomponents/PaperNode/index.d81d2f30.js";
+import { P as PropertyValueNode } from "./subcomponents/PropertyValueNode/index.4c20215d.js";
+import { G as GridNode } from "./subcomponents/GridNode/index.07d4f9a4.js";
+import { C as ChartNode } from "./subcomponents/ChartNode/index.1863bcf1.js";
+import { P as PagerNode, a as PageRender } from "../Page/index.c3767243.js";
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useImperativeHandle } from "react";
 const componentName = "M4LPrintingSystem";
@@ -97,6 +97,33 @@ const getSize = (value, unitSize) => {
     return value;
   }
 };
+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 FactoryRender = (props) => {
   const {
     data: parent
@@ -105,9 +132,6 @@ const FactoryRender = (props) => {
     children,
     ...otherProps
   } = parent || {};
-  const {
-    sourceData
-  } = useBase();
   const strategiesComponents = {
     section: SectionNode,
     textBox: TextBoxNode,
@@ -121,7 +145,6 @@ const FactoryRender = (props) => {
     grid: GridNode,
     chart: ChartNode,
     pager: PagerNode,
-    qrImage: QRImageNode,
     __default__: () => {
       throw new Error("Type no defined");
     }
@@ -133,7 +156,7 @@ const FactoryRender = (props) => {
       return /* @__PURE__ */ jsx(FactoryRender, {
         data: subComponent
       }, `${subComponent.key}-${Math.random().toString(36).substring(7)}`);
-    }) : null, typeof children === "string" ? evaluateWithContext(sourceData, children) : null]
+    }) : null, typeof children === "string" ? children : null]
   });
 };
 const PrintingSystem = forwardRef((props, ref) => {
@@ -194,6 +217,7 @@ const PrintingSystem = forwardRef((props, ref) => {
 export {
   FactoryRender as F,
   PrintingSystem as P,
+  getSize as a,
   classes as c,
-  getSize as g
+  getEvalValue as g
 };

package/components/PrintingSystem/subcomponents/BodyNode/{index.1dd418aa.js → index.81da2c9c.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, a as getSize } from "../../index.b69edc07.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const BodyNode = (props) => {

package/components/PrintingSystem/subcomponents/ChartNode/{index.6aadd6b3.js → index.1863bcf1.js}

@@ -1,9 +1,9 @@
-import { c as classes } from "../../index.70234425.js";
+import { g as getEvalValue, c as classes } from "../../index.b69edc07.js";
 import clsx from "clsx";
 import { createRef, useEffect } from "react";
 import { Chart, registerables } from "chart.js";
 import { ScatterWithErrorBarsController, LineWithErrorBarsChart, PointWithErrorBar } from "chartjs-chart-error-bars";
-import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
+import { useBase, getPropertyByString } from "@m4l/core";
 import { jsx } from "react/jsx-runtime";
 Chart.register(ScatterWithErrorBarsController, LineWithErrorBarsChart, PointWithErrorBar, ...registerables);
 const ChartNode = (props) => {
@@ -61,13 +61,13 @@ const ChartNode = (props) => {
               x: {
                 title: {
                   display: true,
-                  text: evaluateWithContext(sourceData, messageX)
+                  text: getEvalValue(sourceData, messageX)
                 }
               },
               y: {
                 title: {
                   display: true,
-                  text: evaluateWithContext(sourceData, messageY)
+                  text: getEvalValue(sourceData, messageY)
                 }
               }
             }

package/components/PrintingSystem/subcomponents/DividerNode/{index.91e65ff6.js → index.0e6e76ad.js}

@@ -1,4 +1,4 @@
-import { c as classes } from "../../index.70234425.js";
+import { c as classes } from "../../index.b69edc07.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const DividerNode = (props) => {

package/components/PrintingSystem/subcomponents/FooterNode/{index.c2481749.js → index.5af68fd5.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, a as getSize } from "../../index.b69edc07.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const FooterNode = (props) => {

package/components/PrintingSystem/subcomponents/GridNode/{index.758d94d1.js → index.07d4f9a4.js}

@@ -1,5 +1,5 @@
-import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { useBase, getPropertyByString } from "@m4l/core";
+import { c as classes, a as getSize, g as getEvalValue } from "../../index.b69edc07.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const GridNode = (props) => {
@@ -17,9 +17,13 @@ const GridNode = (props) => {
     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", {
@@ -38,7 +42,7 @@ const GridNode = (props) => {
                 maxWidth: column.width ? getSize(column.width, unitSize) : "auto",
                 justifyContent: column.alignX ? column.alignX : "center"
               },
-              children: evaluateWithContext(sourceData, column.title)
+              children: getEvalValue(sourceData, column.title)
             }, `th-${Math.random().toString(36).substring(7)}`);
           })
         }, `tr-${Math.random().toString(36).substring(7)}`)

package/components/PrintingSystem/subcomponents/HeaderNode/{index.732d7c58.js → index.dbf08ab4.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, a as getSize } from "../../index.b69edc07.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const HeaderNode = (props) => {

package/components/PrintingSystem/subcomponents/PaperNode/{index.1a20a9d4.js → index.d81d2f30.js}

@@ -1,5 +1,5 @@
-import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.70234425.js";
+import { useBase } from "@m4l/core";
+import { g as getEvalValue, c as classes } from "../../index.b69edc07.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PaperNode = (props) => {
@@ -16,8 +16,8 @@ const PaperNode = (props) => {
   const {
     sourceData
   } = useBase();
-  const titleFormated = evaluateWithContext(sourceData, title);
-  const titleSecondaryFormated = evaluateWithContext(sourceData, titleSecondary || "");
+  const titleFormated = getEvalValue(sourceData, title);
+  const titleSecondaryFormated = getEvalValue(sourceData, titleSecondary || "");
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(classes.paperNodeRoot, className),
     style: {

package/components/PrintingSystem/subcomponents/PropertyValueNode/{index.8402e742.js → index.4c20215d.js}

@@ -1,5 +1,5 @@
 import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, a as getSize } from "../../index.b69edc07.js";
 import clsx from "clsx";
 import { jsxs, jsx } from "react/jsx-runtime";
 const PropertyValueNode = (props) => {
@@ -7,16 +7,18 @@ const PropertyValueNode = (props) => {
     style = {},
     className = "",
     property,
-    children,
+    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: {
@@ -32,7 +34,7 @@ const PropertyValueNode = (props) => {
       children: propertyFormated
     }), /* @__PURE__ */ jsx("div", {
       className: classes.propertyValueNodeContent,
-      children
+      children: valueFormated
     })]
   });
 };

package/components/PrintingSystem/subcomponents/SectionNode/{index.25aeb4aa.js → index.72cb64b8.js}

@@ -1,5 +1,5 @@
 import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.70234425.js";
+import { c as classes, a as getSize } from "../../index.b69edc07.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 const SectionNode = (props) => {