@m4l/components 0.2.35 → 1.0.0

package/components/Period/index.3f89d8a4.js

@@ -1,306 +0,0 @@
-import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { styled, generateUtilityClasses, generateUtilityClass, Skeleton, Autocomplete, TextField } from "@mui/material";
-import { useState, useMemo } from "react";
-import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.fa7ab18c.js";
-import { unstable_composeClasses } from "@mui/base";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-import { I as IconButton } from "../mui_extended/IconButton/index.f8a3021b.js";
-const ContainerPeriod = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LPeriod?.styleOverrides
-}));
-styled("div")(({
-  theme
-}) => ({
-  width: "1px",
-  height: "20px",
-  backgroundColor: theme.palette.divider
-}));
-styled("div", {
-  shouldForwardProp: (props) => props !== "readOnly"
-})(({
-  theme,
-  readOnly
-}) => ({
-  display: "flex",
-  width: "100%",
-  height: "37.5px",
-  alignItems: "center",
-  gap: theme.spacing(1),
-  border: `1px solid ${theme.palette.divider}`,
-  ...readOnly && {
-    border: "0px"
-  },
-  padding: theme.spacing(0.5, 1),
-  borderRadius: "4px"
-}));
-styled("div")(({
-  theme
-}) => ({
-  ...theme.typography.body2,
-  width: "100%",
-  display: "flex",
-  textOverflow: "elipsis",
-  overflow: "hidden",
-  padding: "5px",
-  textAlign: "left"
-}));
-styled("div")(({
-  theme
-}) => ({
-  ...theme.typography.body2,
-  width: "70px",
-  display: "flex",
-  textOverflow: "elipsis",
-  overflow: "hidden",
-  padding: "5px",
-  textAlign: "left"
-}));
-var ETimePeriods = /* @__PURE__ */ ((ETimePeriods2) => {
-  ETimePeriods2[ETimePeriods2["YEARS"] = 0] = "YEARS";
-  ETimePeriods2[ETimePeriods2["MONTHS"] = 1] = "MONTHS";
-  ETimePeriods2[ETimePeriods2["DAYS"] = 2] = "DAYS";
-  return ETimePeriods2;
-})(ETimePeriods || {});
-const dictionary = {
-  LABEL_YEARS: "period.label_years",
-  LABEL_MONTHS: "period.label_months",
-  LABEL_DAYS: "period.label_days"
-};
-function getPeriodComponetsDictionary() {
-  return ["period"].concat(getCommonActionsDictionary());
-}
-const componentName = "M4LPeriod";
-generateUtilityClasses(componentName, [
-  "root",
-  "containerDateLabel",
-  "containerDateValue",
-  "skeleton",
-  "skeletonFieldPrimary",
-  "skeletonFieldSecondary",
-  "skeletonFieldSecondary",
-  "stateError",
-  "stateReadOnly",
-  "variantMonoperiod",
-  "variantMultiperiod",
-  "sizeSmall",
-  "sizeMedium",
-  "isFocus"
-]);
-function getPeriodUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const periodUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.state === "error" && "stateError", ownerState.state === "success" && "stateSuccess", ownerState.state === "warning" && "stateWarning", ownerState.state === "info" && "stateInfo", ownerState.readOnly && "stateReadOnly", ownerState.variant === "monoperiod" ? "variantMonoperiod" : null, ownerState.variant === "multiperiod" ? "variantMultiperiod" : null, ownerState.focus && "isFocus"],
-    containerDateLabel: ["containerDateLabel"],
-    containerDateValue: ["containerDateValue"],
-    skeleton: ["skeleton"],
-    skeletonFieldPrimary: ["skeletonFieldPrimary"],
-    skeletonFieldSecondary: ["skeletonFieldSecondary"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getPeriodUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-const PERIOD_PREFIX = "M4LPeriod";
-const getNamePeriodDataTestId = (KEY) => {
-  return `${PERIOD_PREFIX}-${KEY}`;
-};
-const SkeletonPeriod = (props) => {
-  const {
-    classes
-  } = props;
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.skeleton,
-    children: [/* @__PURE__ */ jsx("div", {
-      className: classes.skeletonFieldPrimary,
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "50%"
-      })
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.skeletonFieldSecondary,
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "50%"
-      })
-    })]
-  });
-};
-const getSelPeriodTime = (period) => {
-  if (!period)
-    return ETimePeriods.YEARS;
-  if (period.selPeriodTime)
-    return period.selPeriodTime;
-  if (period.years && period.years > 0)
-    return ETimePeriods.YEARS;
-  if (period.months && period.months > 0)
-    return ETimePeriods.MONTHS;
-  if (period.days && period.days > 0)
-    return ETimePeriods.DAYS;
-  return ETimePeriods.YEARS;
-};
-const getSingleValue = (period) => {
-  if (!period)
-    return "";
-  if (period.singleValue !== void 0)
-    return period.singleValue;
-  if (period.years && period.years > 0)
-    return period.years;
-  if (period.months && period.months > 0)
-    return period.months;
-  if (period.days && period.days > 0)
-    return period.days;
-  return "";
-};
-const Period = (props) => {
-  const {
-    value,
-    onChange,
-    state,
-    readOnly = false,
-    variant = "monoperiod",
-    size = "small"
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const [open, setOpen] = useState(false);
-  const [isFocus, setIsFocus] = useState(false);
-  const isSkeleton = useModuleSkeleton();
-  const selPeriodTime = getSelPeriodTime(value);
-  const singleValue = getSingleValue(value);
-  const isDesktop = useResponsiveDesktop();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const iconDown = `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`;
-  const handleFocus = () => {
-    setIsFocus(true);
-  };
-  const handleBlur = () => {
-    setIsFocus(false);
-  };
-  const onTotalChange = (newPeriodTime, newValue) => {
-    const newPeriod = {
-      selPeriodTime: newPeriodTime,
-      singleValue: newValue
-    };
-    if (newValue !== "" && newValue > 0) {
-      newPeriod.years = 0;
-      newPeriod.months = 0;
-      newPeriod.days = 0;
-      if (newPeriodTime === ETimePeriods.YEARS)
-        newPeriod.years = newValue;
-      if (newPeriodTime === ETimePeriods.MONTHS)
-        newPeriod.months = newValue;
-      if (newPeriodTime === ETimePeriods.DAYS)
-        newPeriod.days = newValue;
-    }
-    onChange(newPeriod);
-  };
-  const onChangeTime = (newPeriodTime) => {
-    if (newPeriodTime) {
-      onTotalChange(newPeriodTime.id, singleValue);
-    }
-  };
-  const options = useMemo(() => [{
-    id: 0,
-    label: getLabel(dictionary.LABEL_YEARS)
-  }, {
-    id: 1,
-    label: getLabel(dictionary.LABEL_MONTHS)
-  }, {
-    id: 2,
-    label: getLabel(dictionary.LABEL_DAYS)
-  }], [getLabel]);
-  const ownerState = {
-    readOnly,
-    state,
-    variant,
-    size: isDesktop ? size : "medium",
-    focus: isFocus
-  };
-  const classes = periodUtilityClasses(ownerState);
-  return /* @__PURE__ */ jsx(ContainerPeriod, {
-    className: classes.root,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNamePeriodDataTestId("root")
-    } : {},
-    children: !isSkeleton ? /* @__PURE__ */ jsx(Fragment, {
-      children: readOnly ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.containerDateLabel,
-          children: /* @__PURE__ */ jsx(Typography, {
-            variant: "body",
-            skeletonWidth: "50%",
-            children: value.selPeriodTime === 0 ? getLabel(dictionary.LABEL_YEARS) : value.selPeriodTime === 1 ? getLabel(dictionary.LABEL_MONTHS) : value.selPeriodTime === 2 ? getLabel(dictionary.LABEL_DAYS) : null
-          })
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.containerDateValue,
-          children: /* @__PURE__ */ jsx(Typography, {
-            variant: "body",
-            skeletonWidth: "80%",
-            children: value.singleValue
-          })
-        })]
-      }) : /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Autocomplete, {
-          options,
-          value: options[selPeriodTime],
-          disableClearable: true,
-          open,
-          onOpen: () => setOpen(true),
-          onClose: () => setOpen(false),
-          onChange: (_event, autcValue) => {
-            onChangeTime(autcValue);
-          },
-          renderInput: (params) => {
-            return /* @__PURE__ */ jsx(TextField, {
-              ...params,
-              fullWidth: true,
-              variant: "standard",
-              SelectProps: {
-                native: true
-              },
-              InputProps: {
-                disableUnderline: true,
-                ...params.InputProps,
-                endAdornment: /* @__PURE__ */ jsx(IconButton, {
-                  src: iconDown,
-                  onClick: () => setOpen((open2) => !open2)
-                })
-              },
-              autoComplete: "off"
-            }, `tx_async_${params.id}`);
-          }
-        }), /* @__PURE__ */ jsx(TextField, {
-          type: "number",
-          variant: "standard",
-          value: singleValue,
-          InputProps: {
-            disableUnderline: true
-          },
-          onChange: (e) => {
-            onTotalChange(selPeriodTime, e.target.value === "" ? "" : parseInt(e.target.value));
-          }
-        })]
-      })
-    }) : /* @__PURE__ */ jsx(SkeletonPeriod, {
-      classes
-    })
-  });
-};
-export {
-  Period as P,
-  getPeriodComponetsDictionary as g
-};

package/components/PrintingSystem/subcomponents/BodyNode/index.319a3bb9.js

@@ -1,48 +0,0 @@
-import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.27f1f209.js";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-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
-  });
-};
-export {
-  BodyNode as B
-};

package/components/PrintingSystem/subcomponents/DividerNode/index.e504dbd2.js

@@ -1,19 +0,0 @@
-import { c as classes } from "../../index.27f1f209.js";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-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
-    }
-  });
-};
-export {
-  DividerNode as D
-};

package/components/PrintingSystem/subcomponents/FooterNode/index.9a19a7cb.js

@@ -1,48 +0,0 @@
-import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.27f1f209.js";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-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
-  });
-};
-export {
-  FooterNode as F
-};

package/components/PrintingSystem/subcomponents/GridNode/index.8d14e1b6.js

@@ -1,71 +0,0 @@
-import { useBase, getPropertyByString, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.27f1f209.js";
-import clsx from "clsx";
-import { jsxs, jsx } from "react/jsx-runtime";
-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] : "");
-  const rowEval = Array.isArray(result) ? result : typeof result === "object" ? [{
-    ...result
-  }] : [];
-  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: evaluateWithContext(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 ? evaluateWithContext({
-                  row
-                }, dataColumns[id].nestedValue || "") : row[dataColumns[id].key]
-              }, `td-${Math.random().toString(36).substring(7)}`);
-            })
-          }, `tr-${Math.random().toString(36).substring(7)}`);
-        })
-      })]
-    });
-  }
-  return null;
-};
-export {
-  GridNode as G
-};

package/components/PrintingSystem/subcomponents/HeaderNode/index.89e4eaab.js

@@ -1,48 +0,0 @@
-import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.27f1f209.js";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-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
-  });
-};
-export {
-  HeaderNode as H
-};

package/components/PrintingSystem/subcomponents/PaperNode/index.dd4ca449.js

@@ -1,46 +0,0 @@
-import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes } from "../../index.27f1f209.js";
-import clsx from "clsx";
-import { jsxs, jsx } from "react/jsx-runtime";
-const PaperNode = (props) => {
-  const {
-    children,
-    style = {},
-    className = "",
-    title,
-    titleSecondary
-  } = props;
-  const {
-    mainColor
-  } = useBase();
-  const {
-    sourceData
-  } = useBase();
-  const titleFormated = evaluateWithContext(sourceData, title);
-  const titleSecondaryFormated = evaluateWithContext(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
-    })]
-  });
-};
-export {
-  PaperNode as P
-};

package/components/PrintingSystem/subcomponents/PropertyValueNode/index.048d7ebf.js

@@ -1,41 +0,0 @@
-import { useBase, evaluateWithContext } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.27f1f209.js";
-import clsx from "clsx";
-import { jsxs, jsx } from "react/jsx-runtime";
-const PropertyValueNode = (props) => {
-  const {
-    style = {},
-    className = "",
-    property,
-    children,
-    direction,
-    propertyWidth = "auto"
-  } = props;
-  const {
-    unitSize,
-    mainColor,
-    sourceData
-  } = useBase();
-  const propertyFormated = evaluateWithContext(sourceData, property);
-  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
-    })]
-  });
-};
-export {
-  PropertyValueNode as P
-};

package/components/PrintingSystem/subcomponents/SectionNode/index.83f1efea.js

@@ -1,48 +0,0 @@
-import { useBase } from "@m4l/core";
-import { c as classes, g as getSize } from "../../index.27f1f209.js";
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-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
-  });
-};
-export {
-  SectionNode as S
-};