@m4l/components 0.1.27 → 0.1.28

package/components/Period/index.2941fbda.js

@@ -0,0 +1,249 @@
+import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
+import { styled, Skeleton, Autocomplete, TextField } from "@mui/material";
+import { useMemo } from "react";
+import { I as Icon } from "../Icon/index.619c31c4.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.0645e30f.js";
+import "@mui/material/Button";
+import "react-hook-form";
+import "react-router-dom";
+import "../../contexts/ModalContext/index.b92fa565.js";
+import "@mui/lab";
+const ContainerPeriod = styled("div")(({
+  theme,
+  error,
+  readOnly
+}) => ({
+  display: "flex",
+  width: "100%",
+  height: "auto",
+  alignItems: "center",
+  gap: theme.spacing(1),
+  border: error ? `1px solid ${theme.palette.error.main}` : `1px solid ${theme.palette.divider}`,
+  padding: theme.spacing(0.5, 1),
+  borderRadius: "4px",
+  ...readOnly && {
+    border: "0px"
+  },
+  "& .MuiAutocomplete-root, & .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiAutocomplete-root .MuiTextField-root": {
+    width: "100%"
+  },
+  "& .MuiTextField-root .MuiInput-input": {
+    padding: "5px!important"
+  }
+}));
+const Gap = styled("div")(({
+  theme
+}) => ({
+  width: "1px",
+  height: "20px",
+  backgroundColor: theme.palette.divider
+}));
+const SKTWrapper = 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"
+}));
+const FieldPeriod = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  width: "100%",
+  display: "flex",
+  textOverflow: "elipsis",
+  overflow: "hidden",
+  padding: "5px",
+  textAlign: "left"
+}));
+const FieldValue = 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 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,
+    error = false,
+    readOnly = false,
+    skeletonWidth = "100%",
+    skeletonHeight = "18px"
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const selPeriodTime = getSelPeriodTime(value);
+  const singleValue = getSingleValue(value);
+  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 {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const options = useMemo(() => [{
+    id: 0,
+    label: getLabel("period.label_days")
+  }, {
+    id: 1,
+    label: getLabel("period.label_months")
+  }, {
+    id: 2,
+    label: getLabel("period.label_years")
+  }], [getLabel]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsxs(SKTWrapper, {
+      readOnly,
+      children: [/* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "50%",
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: skeletonWidth,
+        height: skeletonHeight
+      }), /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        sx: {
+          minWidth: "20px",
+          minHeight: "20px"
+        }
+      })]
+    });
+  }
+  if (readOnly) {
+    /* @__PURE__ */ jsxs(ContainerPeriod, {
+      error: false,
+      readOnly,
+      children: [/* @__PURE__ */ jsx(FieldPeriod, {
+        children: value.selPeriodTime
+      }), /* @__PURE__ */ jsx(Gap, {}), /* @__PURE__ */ jsx(FieldValue, {
+        children: value.singleValue
+      }), /* @__PURE__ */ jsx(Icon, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsxs(ContainerPeriod, {
+    error,
+    readOnly,
+    children: [/* @__PURE__ */ jsx(Autocomplete, {
+      options,
+      value: options[selPeriodTime],
+      disableClearable: true,
+      onChange: (_event, autcValue) => {
+        onChangeTime(autcValue);
+      },
+      renderInput: (params) => {
+        return /* @__PURE__ */ jsx(TextField, {
+          ...params,
+          fullWidth: true,
+          variant: "standard",
+          SelectProps: {
+            native: true
+          },
+          InputProps: {
+            disableUnderline: true,
+            ...params.InputProps
+          },
+          autoComplete: "off"
+        }, `tx_async_${params.id}`);
+      }
+    }), /* @__PURE__ */ jsx(Gap, {}), /* @__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(Icon, {
+      src: `${host_static_assets}/${environment_assets}/frontend/components/period/assets/icons/clock.svg`
+    })]
+  });
+};
+function getPeriodComponetsDictionary() {
+  return ["period"].concat(getCommonActionsDictionary());
+}
+export {
+  Period as P,
+  getPeriodComponetsDictionary as g
+};

package/components/PropertyValue/index.dfcfe1ba.js

@@ -1,117 +1,147 @@
-import { styled as a } from "@mui/material/styles";
-import { Skeleton as g } from "@mui/material";
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { useResponsiveDesktop as c } from "@m4l/graphics";
-import { useModuleSkeleton as h } from "@m4l/core";
-const y = a("div", {
-  shouldForwardProp: (r) => r !== "propertyWidth" && r !== "propertyHeight" && r !== "isForm"
+import { styled } from "@mui/material/styles";
+import { Skeleton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useResponsiveDesktop } from "@m4l/graphics";
+import { useModuleSkeleton } from "@m4l/core";
+const WrapperPropertyValue = styled("div", {
+  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
-  propertyWidth: r,
-  isForm: o,
-  theme: t
+  propertyWidth,
+  isForm,
+  theme
 }) => ({
   display: "grid",
   gridTemplateColumns: "1fr",
   alignItems: "flex-start",
   width: "100%",
-  padding: `${t.spacing(1)} ${t.spacing(2)}`,
+  padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
   ":hover": {
-    backgroundColor: o ? "unset" : t.palette.grid?.rowHover
+    backgroundColor: isForm ? "unset" : theme.palette.grid?.rowHover
   },
-  borderBottom: o ? "none" : `1px solid ${t.palette.divider}`,
+  borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
   flexDirection: "column",
-  [t.breakpoints.up("sm")]: {
-    gridTemplateColumns: r ? `${r}px 1fr` : "150px 1fr",
-    gap: t.spacing(2),
+  [theme.breakpoints.up("sm")]: {
+    gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
+    gap: theme.spacing(2),
     alignItems: "center"
   }
-})), x = a("div", {
-  shouldForwardProp: (r) => r !== "propertyWidth" && r !== "propertyHeight" && r !== "isForm"
+}));
+const Property = styled("div", {
+  shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
 })(({
-  propertyWidth: r,
-  isForm: o,
-  theme: t
+  propertyWidth,
+  isForm,
+  theme
 }) => ({
   width: "100%",
   minWidth: "100%",
-  ...t.typography.subtitle2,
-  color: t.palette.text.primary,
+  ...theme.typography.subtitle2,
+  color: theme.palette.text.primary,
   height: "100%",
   display: "flex",
   alignItems: "center",
   justifyContent: "flex-start",
   position: "relative",
-  [t.breakpoints.up("sm")]: {
-    borderRight: o ? "none" : `1px solid ${t.palette.divider}`,
-    paddingRight: t.spacing(2),
+  [theme.breakpoints.up("sm")]: {
+    borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
+    paddingRight: theme.spacing(2),
     textAlign: "right",
-    width: r || "150px",
-    minWidth: r || "150px",
+    width: propertyWidth || "150px",
+    minWidth: propertyWidth || "150px",
     justifyContent: "flex-end"
   },
   overflow: "hidden",
   overflowWrap: "break-word"
-})), v = a("div", {
-  shouldForwardProp: (r) => r !== "valueWidth" && r !== "valueHeight" && r !== "withGrid"
+}));
+const Value = styled("div", {
+  shouldForwardProp: (prop) => prop !== "valueWidth" && prop !== "valueHeight" && prop !== "withGrid"
 })(({
-  valueWidth: r,
-  valueHeight: o,
-  theme: t
+  valueWidth,
+  valueHeight,
+  theme
 }) => ({
   flexGrow: "1",
-  ...t.typography.body2,
-  color: t.palette.text.secondary,
+  ...theme.typography.body2,
+  color: theme.palette.text.secondary,
   position: "relative",
   padding: "1px",
-  maxWidth: `${r}%`,
-  width: `${r}%`,
-  height: o,
-  marginTop: t.spacing(1),
-  [t.breakpoints.up("sm")]: {
+  maxWidth: `${valueWidth}%`,
+  width: `${valueWidth}%`,
+  height: valueHeight,
+  marginTop: theme.spacing(1),
+  [theme.breakpoints.up("sm")]: {
     marginTop: "0px"
   },
   overflow: "auto",
   overflowWrap: "break-word"
-})), m = a("div")(() => ({
+}));
+const SKTWrapperProperty = styled("div")(() => ({
   display: "flex",
   justifyContent: "flex-end"
 }));
-function w() {
-  return /* @__PURE__ */ n(m, {
-    children: /* @__PURE__ */ n(g, {
+function SKTProperty() {
+  return /* @__PURE__ */ jsx(SKTWrapperProperty, {
+    children: /* @__PURE__ */ jsx(Skeleton, {
       variant: "text",
       width: 68,
       height: 14
     })
   });
 }
-function C(r) {
+function PropertyValue(props) {
   const {
-    property: o,
-    value: t,
-    propertyWidth: l = 200,
-    valueHeight: s = "auto",
-    valueWidth: e = "100",
-    valueWidthMobile: p,
-    isForm: d
-  } = r, i = c(), u = h();
-  return /* @__PURE__ */ f(y, {
+    property,
+    value,
+    propertyWidth = 200,
+    valueHeight = "auto",
+    valueWidth = "100",
+    valueWidthMobile,
+    isForm
+  } = props;
+  const isDesktop = useResponsiveDesktop();
+  const isSkeleton = useModuleSkeleton();
+  const getValueW = () => {
+    if (valueWidthMobile && !isDesktop) {
+      return valueWidthMobile;
+    }
+    if (valueWidth === 75 && isDesktop) {
+      return 75;
+    } else if (valueWidth === 75 && !isDesktop) {
+      return 100;
+    }
+    if (valueWidth === 50 && isDesktop) {
+      return 50;
+    } else if (valueWidth === 50 && !isDesktop) {
+      return 100;
+    }
+    if (valueWidth === 25 && isDesktop || valueWidth === 12.5 && isDesktop) {
+      return valueWidth;
+    }
+    if (valueWidth === 25 && !isDesktop) {
+      return 50;
+    }
+    if (valueWidth === 12.5 && !isDesktop) {
+      return 25;
+    }
+    return 100;
+  };
+  return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
     id: "WrapperPropertyValue",
-    isForm: d,
-    propertyWidth: l,
-    children: [/* @__PURE__ */ n(x, {
+    isForm,
+    propertyWidth,
+    children: [/* @__PURE__ */ jsx(Property, {
       id: "Property",
-      isForm: d,
-      propertyWidth: l,
-      children: u ? /* @__PURE__ */ n(w, {}) : o
-    }), /* @__PURE__ */ n(v, {
+      isForm,
+      propertyWidth,
+      children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
+    }), /* @__PURE__ */ jsx(Value, {
       id: "Value",
-      valueWidth: (() => p && !i ? p : e === 75 && i ? 75 : e === 75 && !i ? 100 : e === 50 && i ? 50 : e === 50 && !i ? 100 : e === 25 && i || e === 12.5 && i ? e : e === 25 && !i ? 50 : e === 12.5 && !i ? 25 : 100)(),
-      valueHeight: s,
-      children: t
+      valueWidth: getValueW(),
+      valueHeight,
+      children: value
     })]
   });
 }
 export {
-  C as P
+  PropertyValue as P
 };

package/components/Resizeable/index.45995d2b.js

@@ -1,8 +1,8 @@
-import { styled as n } from "@mui/material/styles";
-import { R as i } from "../../react-resizable.5277deaf.js";
-import { jsx as l } from "react/jsx-runtime";
-const g = n(i)(({
-  theme: e
+import { styled } from "@mui/material/styles";
+import { R as ResizableBox } from "../../react-resizable.5277deaf.js";
+import { jsx } from "react/jsx-runtime";
+const WrapperResizeable = styled(ResizableBox)(({
+  theme
 }) => ({
   "&.react-resizable": {
     position: "relative",
@@ -17,7 +17,7 @@ const g = n(i)(({
     backgroundRepeat: "no-repeat",
     backgroundOrigin: "content-box",
     boxSizing: "border-box",
-    backgroundColor: e.palette.action.active,
+    backgroundColor: theme.palette.action.active,
     mask: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
     backgroundImage: `url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 26.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' focusable='false' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;%7D%0A%3C/style%3E%3Cg id='Grupo_5256'%3E%3C/g%3E%3Cpath class='st0' d='z'/%3E%3Cg%3E%3Cpolygon points='21.9,21.9 15.8,21.9 15.8,19.9 19.9,19.9 19.9,15.9 21.9,15.9 '/%3E%3C/g%3E%3C/svg%3E%0A")`,
     backgroundPosition: "bottom right",
@@ -73,22 +73,22 @@ const g = n(i)(({
     transform: "rotate(45deg)"
   }
 }));
-function x(e) {
+function Resizeable(props) {
   const {
-    children: a,
-    width: s,
-    height: o,
-    maxHeigth: r,
-    maxWidth: t
-  } = e;
-  return /* @__PURE__ */ l(g, {
-    width: s,
-    height: o,
-    maxConstraints: r && t ? [t, r] : void 0,
+    children,
+    width,
+    height,
+    maxHeigth,
+    maxWidth
+  } = props;
+  return /* @__PURE__ */ jsx(WrapperResizeable, {
+    width,
+    height,
+    maxConstraints: maxHeigth && maxWidth ? [maxWidth, maxHeigth] : void 0,
     resizeHandles: ["se", "nw"],
-    children: a
+    children
   });
 }
 export {
-  x as R
+  Resizeable as R
 };

package/components/ScrollBar/index.39eeb2de.js

@@ -1,18 +1,19 @@
-import t from "simplebar-react";
-import { styled as i, alpha as a } from "@mui/material/styles";
-import { Box as l } from "@mui/material";
-import { jsx as r } from "react/jsx-runtime";
-const s = i("div")(() => ({
+import SimpleBarReact from "simplebar-react";
+import { styled, alpha } from "@mui/material/styles";
+import { Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+const RootStyle = styled("div")(() => ({
   flexGrow: 1,
   height: "100%",
   overflow: "hidden"
-})), n = i(t)(({
-  theme: e
+}));
+const SimpleBarStyle = styled(SimpleBarReact)(({
+  theme
 }) => ({
   maxHeight: "100%",
   "& .simplebar-scrollbar": {
     "&:before": {
-      backgroundColor: a(e.palette.grey[600], 0.48)
+      backgroundColor: alpha(theme.palette.grey[600], 0.48)
     },
     "&.simplebar-visible:before": {
       opacity: 1
@@ -28,22 +29,26 @@ const s = i("div")(() => ({
     zIndex: "inherit"
   }
 }));
-function f({
-  children: e
+function ScrollBar({
+  children
 }) {
-  const o = typeof navigator > "u" ? "SSR" : navigator.userAgent;
-  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(o) ? /* @__PURE__ */ r(l, {
-    sx: {
-      overflowX: "auto"
-    },
-    children: e
-  }) : /* @__PURE__ */ r(s, {
-    children: /* @__PURE__ */ r(n, {
-      autoHide: !1,
-      children: e
+  const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
+  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Box, {
+      sx: {
+        overflowX: "auto"
+      },
+      children
+    });
+  }
+  return /* @__PURE__ */ jsx(RootStyle, {
+    children: /* @__PURE__ */ jsx(SimpleBarStyle, {
+      autoHide: false,
+      children
     })
   });
 }
 export {
-  f as S
+  ScrollBar as S
 };

package/components/ScrollToTop/index.e06f98f6.js

@@ -1,11 +1,12 @@
-import { useEffect as r } from "react";
-import { useLocation as t } from "react-router-dom";
-function e() {
-  const { pathname: o } = t();
-  return r(() => {
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+function ScrollToTop() {
+  const { pathname } = useLocation();
+  useEffect(() => {
     window.scrollTo(0, 0);
-  }, [o]), null;
+  }, [pathname]);
+  return null;
 }
 export {
-  e as S
+  ScrollToTop as S
 };