@m4l/components 0.1.27 → 0.1.28

package/components/formatters/BooleanFormatter/index.8da35c9c.js

@@ -1,42 +1,55 @@
-import { useModuleDictionary as u, useEnvironment as _, getPropertyByString as p } from "@m4l/core";
-import l from "react";
-import { I as d } from "../../Icon/index.619c31c4.js";
-import { jsx as t } from "react/jsx-runtime";
-function g(r) {
+import { useModuleDictionary, useEnvironment, getPropertyByString } from "@m4l/core";
+import React from "react";
+import { I as Icon } from "../../Icon/index.619c31c4.js";
+import { jsx } from "react/jsx-runtime";
+function BooleanFormatter(props) {
   const {
-    presentationType: n,
-    value: s,
-    Component: o = l.Fragment
-  } = r, {
-    getLabel: e
-  } = u(), {
-    host_static_assets: c,
-    environment_assets: i
-  } = _(), a = s ?? !1, m = `${c}/${i}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`, f = `${c}/${i}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
-  return n === "string_yes_no" ? /* @__PURE__ */ t(o, {
-    children: e(a ? "formatters.boolean_yes" : "formatters.boolean_no")
-  }) : n === "string_true_false" ? /* @__PURE__ */ t(o, {
-    children: e(a ? "formatters.boolean_true" : "formatters.boolean_false")
-  }) : /* @__PURE__ */ t(o, {
-    children: /* @__PURE__ */ t(d, {
-      src: a ? m : f,
+    presentationType,
+    value,
+    Component = React.Fragment
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const final_value = value ?? false;
+  const srcCheckTrue = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`;
+  const srcCheckFalse = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
+  if (presentationType === "string_yes_no") {
+    return /* @__PURE__ */ jsx(Component, {
+      children: final_value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
+    });
+  }
+  if (presentationType === "string_true_false") {
+    return /* @__PURE__ */ jsx(Component, {
+      children: final_value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
+    });
+  }
+  return /* @__PURE__ */ jsx(Component, {
+    children: /* @__PURE__ */ jsx(Icon, {
+      src: final_value ? srcCheckTrue : srcCheckFalse,
       bgColor: "action.disabled"
     })
   });
 }
-function C(r) {
+function columnBooleanFormatter(props) {
   const {
-    fieldValue: n,
-    presentationType: s,
-    Component: o = l.Fragment
-  } = r;
-  return (e) => /* @__PURE__ */ t(g, {
-    presentationType: s,
-    value: p(e, n),
-    Component: o
-  });
+    fieldValue,
+    presentationType,
+    Component = React.Fragment
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(BooleanFormatter, {
+      presentationType,
+      value: getPropertyByString(obProps, fieldValue),
+      Component
+    });
+  };
 }
 export {
-  g as B,
-  C as c
+  BooleanFormatter as B,
+  columnBooleanFormatter as c
 };

package/components/formatters/DateFormatter/index.1b9baacc.js

@@ -1,57 +1,69 @@
-import c from "react";
-import { useEnvironment as p, useHostTools as u, getPropertyByString as d } from "@m4l/core";
+import React from "react";
+import { useEnvironment, useHostTools, getPropertyByString } from "@m4l/core";
 import "../../Icon/index.619c31c4.js";
 import "@mui/material/styles";
-import { jsx as f, Fragment as y } from "react/jsx-runtime";
-function g(a) {
+import { jsx, Fragment } from "react/jsx-runtime";
+function DateFormatter(props) {
   const {
-    presentationType: n,
-    value: t,
-    format: e,
-    Component: m = c.Fragment
-  } = a, {
-    dfnsFormat: r
-  } = p(), {
-    formatDate: l
-  } = u();
-  let o = e || r.datetime_format, i, s;
-  if (t == null)
-    return /* @__PURE__ */ f(y, {
+    presentationType,
+    value,
+    format,
+    Component = React.Fragment
+  } = props;
+  const {
+    dfnsFormat
+  } = useEnvironment();
+  const {
+    formatDate
+  } = useHostTools();
+  let finalFormat = format || dfnsFormat.datetime_format;
+  let result;
+  let resultDate;
+  if (value === void 0 || value === null) {
+    return /* @__PURE__ */ jsx(Fragment, {
       children: "-"
     });
-  switch (n) {
+  }
+  switch (presentationType) {
     case "datetime":
-      o = e || r.datetime_format;
+      finalFormat = format || dfnsFormat.datetime_format;
       break;
     case "date":
-      o = e || r.date_format;
+      finalFormat = format || dfnsFormat.date_format;
       break;
     case "time":
-      o = e || r.time_format;
+      finalFormat = format || dfnsFormat.time_format;
       break;
   }
   try {
-    typeof t == "number" || typeof t == "string" ? s = new Date(t) : s = t, i = l(s, o);
-  } catch {
-    i = "err_typing";
+    if (typeof value === "number" || typeof value === "string") {
+      resultDate = new Date(value);
+    } else {
+      resultDate = value;
+    }
+    result = formatDate(resultDate, finalFormat);
+  } catch (e) {
+    result = "err_typing";
   }
-  return /* @__PURE__ */ f(m, {
-    children: i
+  return /* @__PURE__ */ jsx(Component, {
+    children: result
   });
 }
-function k(a) {
+function columnDateFormatter(props) {
   const {
-    fieldValue: n,
-    presentationType: t,
-    Component: e = c.Fragment
-  } = a;
-  return (m) => /* @__PURE__ */ f(g, {
-    presentationType: t,
-    value: d(m, n),
-    Component: e
-  });
+    fieldValue,
+    presentationType,
+    Component = React.Fragment
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(DateFormatter, {
+      presentationType,
+      value: getPropertyByString(obProps, fieldValue),
+      Component
+    });
+  };
 }
 export {
-  g as D,
-  k as c
+  DateFormatter as D,
+  columnDateFormatter as c
 };

package/components/formatters/index.689a8086.js

@@ -0,0 +1,119 @@
+import React from "react";
+import { jsx, Fragment } from "react/jsx-runtime";
+import { getPropertyByString } from "@m4l/core";
+import "../Icon/index.619c31c4.js";
+import "@mui/material/styles";
+function UncertaintyFormatter(props) {
+  const {
+    value,
+    unit,
+    symbol,
+    Component = React.Fragment
+  } = props;
+  if (value === void 0 || value === null || !Array.isArray(value)) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: ""
+    });
+  }
+  let result = "";
+  value.map((obj, idx) => {
+    const cmc_min_closed = obj.cmc_min_closed != true ? "<" : "\u2264";
+    const cmc_max_closed = obj.cmc_max_closed != true ? "<" : "\u2264";
+    result = result.concat(`${idx > 0 ? " " : ""}`, obj.cmc_min !== obj.cmc_max ? `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} \xB1 ${obj.cmc_uncertainty}]` : `[${obj.cmc_min}${unit} \xB1 ${obj.cmc_uncertainty}]`);
+  });
+  return /* @__PURE__ */ jsx(Component, {
+    children: result
+  });
+}
+function PointsFormatter(props) {
+  const {
+    value,
+    unit,
+    Component = React.Fragment
+  } = props;
+  if (value === void 0 || value === null || !Array.isArray(value)) {
+    return /* @__PURE__ */ jsx(Fragment, {
+      children: "[]"
+    });
+  }
+  let result = "";
+  value.map((point) => {
+    if (point) {
+      result = result.concat(`[${point}${unit}]`);
+    }
+  });
+  return /* @__PURE__ */ jsx(Component, {
+    children: result
+  });
+}
+function PriceFormatter(props) {
+  const {
+    value,
+    Component = React.Fragment
+  } = props;
+  return /* @__PURE__ */ jsx(Component, {
+    children: `${value}$Cop`
+  });
+}
+function getFormattersComponentsDictionary() {
+  return ["formatters"];
+}
+const defaultFormattersDictionary = {
+  pager: {
+    boolean_yes: "Yes",
+    boolean_no: "No",
+    boolean_true: "True",
+    boolean_false: "False"
+  }
+};
+function columnUncertaintyFormatter(props) {
+  const {
+    fieldUnit,
+    fieldValue,
+    fieldSymbol,
+    Component
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(UncertaintyFormatter, {
+      Component,
+      value: getPropertyByString(obProps, fieldValue),
+      unit: getPropertyByString(obProps, fieldUnit),
+      symbol: getPropertyByString(obProps, fieldSymbol)
+    });
+  };
+}
+function columnPointsFormatter(props) {
+  const {
+    fieldUnit,
+    fieldValue,
+    Component
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(PointsFormatter, {
+      Component,
+      value: getPropertyByString(obProps, fieldValue),
+      unit: getPropertyByString(obProps, fieldUnit)
+    });
+  };
+}
+function columnNestedValueFormatter(props) {
+  const {
+    fieldValue,
+    Component = React.Fragment
+  } = props;
+  return (obProps) => {
+    return /* @__PURE__ */ jsx(Component, {
+      children: getPropertyByString(obProps, fieldValue) + ""
+    });
+  };
+}
+export {
+  PointsFormatter as P,
+  UncertaintyFormatter as U,
+  PriceFormatter as a,
+  columnPointsFormatter as b,
+  columnUncertaintyFormatter as c,
+  defaultFormattersDictionary as d,
+  columnNestedValueFormatter as e,
+  getFormattersComponentsDictionary as g
+};

package/components/hook-form/RHFAutocomplete/index.59a68f9f.js

@@ -0,0 +1,224 @@
+import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
+import { useFormContext, Controller } from "react-hook-form";
+import { Skeleton, Autocomplete, TextField, CircularProgress } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { I as Image } from "../../Image/index.93d5f37f.js";
+import { useMemo, useState, useEffect } from "react";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+const SKTRHFAutocompleteWrapper = styled("div")(() => ({
+  display: "flex",
+  width: "100%",
+  flexDirection: "column"
+}));
+const SKTInputText = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "grid",
+  gridTemplateColumns: "1fr auto",
+  gridGap: theme.spacing(2),
+  alignItems: "center",
+  height: `${theme.spacing(4.5)}`,
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: `${theme.spacing(1)}`,
+  padding: `0 ${theme.spacing(2)}`,
+  [theme.breakpoints.down("md")]: {
+    width: "100%"
+  }
+}));
+const WrapperAutocomplete = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  width: "100%",
+  "& .MuiAutocomplete-root": {
+    width: "100%"
+  },
+  "& .m4l_image": {
+    marginLeft: theme.spacing(1.5)
+  }
+}));
+const WrapperOption = styled("li")(({
+  theme
+}) => ({
+  "& .m4l_image": {
+    marginRight: theme.spacing(1.5)
+  }
+}));
+function withRenderOption(getUrlImage, imageWidth, imageHeight) {
+  return function RenderOption(optionProps, option) {
+    return /* @__PURE__ */ jsxs(WrapperOption, {
+      ...optionProps,
+      children: [/* @__PURE__ */ jsx(Image, {
+        src: getUrlImage(option),
+        width: imageWidth,
+        height: imageHeight
+      }), optionProps.key]
+    });
+  };
+}
+function RHFAutocomplete(props) {
+  const {
+    name,
+    getOptionLabel,
+    isOptionEqualToValue,
+    label,
+    skeletonWidth = 100,
+    skeletonHeight = "18px",
+    options,
+    disabled,
+    getOptionUrlImage,
+    imageWidth = "24px",
+    imageHeight = "24px",
+    onOpen,
+    onClose,
+    loading,
+    onChangeFilterParmsLocal,
+    ...other
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const isSkeleton = useModuleSkeleton();
+  const {
+    control
+  } = useFormContext();
+  const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
+  const [open, setOpen] = useState(false);
+  const onCloseLocal = (event, reason) => {
+    setOpen(false);
+    if (onClose)
+      onClose(event, reason);
+  };
+  const onOpenLocal = (event) => {
+    setOpen(true);
+    if (onOpen)
+      onOpen(event);
+  };
+  const getOptionLabelLocal = (option) => {
+    if (option === void 0 || option === null) {
+      return "";
+    }
+    return getOptionLabel(option);
+  };
+  const getOptionUrlImageLocal = (option) => {
+    if (option === void 0 || option === null || getOptionUrlImage === void 0) {
+      return "";
+    }
+    return getOptionUrlImage(option);
+  };
+  const isOptionEqualToValueLocal = (option, value) => {
+    if (value === void 0 || value === null || option === null) {
+      return false;
+    }
+    return isOptionEqualToValue(option, value);
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTRHFAutocompleteWrapper, {
+      children: /* @__PURE__ */ jsxs(SKTInputText, {
+        children: [/* @__PURE__ */ jsx(Skeleton, {
+          variant: "text",
+          width: skeletonWidth,
+          height: skeletonHeight
+        }, "sk1"), /* @__PURE__ */ jsx(Skeleton, {
+          variant: "circular",
+          width: 16,
+          height: 16
+        }, "sk2")]
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Controller, {
+    name,
+    control,
+    render: ({
+      field: {
+        onChange,
+        value
+      },
+      fieldState: {
+        error
+      }
+    }) => {
+      const [inputValue, setInputValue] = useState(getOptionLabelLocal(value));
+      useEffect(() => {
+        if (!open && value === null && inputValue !== "") {
+          setInputValue("");
+        }
+        if (!open && value !== null && options.length === 0 && onChangeFilterParmsLocal) {
+          onChangeFilterParmsLocal(getOptionLabelLocal(value), "reset");
+        }
+      }, [value]);
+      return /* @__PURE__ */ jsx(WrapperAutocomplete, {
+        className: "m4l_rhf_autocomplete",
+        children: /* @__PURE__ */ jsx(Autocomplete, {
+          autoComplete: true,
+          autoSelect: false,
+          options,
+          getOptionLabel: getOptionLabelLocal,
+          inputValue,
+          clearOnBlur: false,
+          onInputChange: (_event, newValue, reason) => {
+            if (reason === "input") {
+              setInputValue(newValue);
+              if (onChangeFilterParmsLocal) {
+                onChangeFilterParmsLocal(newValue, reason);
+              }
+            }
+            onChange(null);
+          },
+          isOptionEqualToValue: isOptionEqualToValueLocal,
+          disableClearable: true,
+          value: value || null,
+          onOpen: onOpenLocal,
+          onClose: onCloseLocal,
+          onChange: (_e, val) => {
+            setInputValue(getOptionLabelLocal(val));
+            onChange(val);
+          },
+          filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
+          loading,
+          loadingText: getLabel("rhf_autocomplete.loading_options"),
+          disabled,
+          noOptionsText: getLabel("rhf_autocomplete.no_options"),
+          renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, imageWidth, imageHeight) : void 0,
+          renderInput: (params) => {
+            return /* @__PURE__ */ jsx(TextField, {
+              ...params,
+              label,
+              fullWidth: true,
+              SelectProps: {
+                native: true
+              },
+              InputProps: {
+                ...params.InputProps,
+                startAdornment: withImage && value ? /* @__PURE__ */ jsx(Image, {
+                  src: getOptionUrlImageLocal(value),
+                  width: imageWidth,
+                  height: imageHeight
+                }, "ImageTextField") : null,
+                endAdornment: /* @__PURE__ */ jsxs(Fragment, {
+                  children: [loading ? /* @__PURE__ */ jsx(CircularProgress, {
+                    color: "inherit",
+                    size: 20
+                  }) : null, params.InputProps.endAdornment]
+                })
+              },
+              autoComplete: "off",
+              error: !!error,
+              helperText: error?.message,
+              ...other
+            });
+          }
+        })
+      });
+    }
+  });
+}
+function getRHFAutocompleteComponentsDictionary() {
+  return ["rhf_autocomplete"];
+}
+export {
+  RHFAutocomplete as R,
+  getRHFAutocompleteComponentsDictionary as g
+};

package/components/hook-form/RHFAutocompleteAsync/index.c3083062.js

@@ -0,0 +1,87 @@
+import { useState, useCallback, useEffect } from "react";
+import { useNetwork, getPropertyByString } from "@m4l/core";
+import debounce from "lodash/debounce";
+import { R as RHFAutocomplete, g as getRHFAutocompleteComponentsDictionary } from "../RHFAutocomplete/index.59a68f9f.js";
+import { jsx } from "react/jsx-runtime";
+function RHFAutocompleteAsync(props) {
+  const {
+    name,
+    endPoint,
+    timeout = 5e3,
+    parms,
+    resultField = "data",
+    isRemote = true,
+    onChangeFilterParms,
+    ...other
+  } = props;
+  const {
+    networkOperation
+  } = useNetwork();
+  const [options, setOptions] = useState([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setIsloading] = useState(false);
+  const [canLoadOptions, setCanLoadOptions] = useState(true);
+  const [filterParms, setFilterParms] = useState({});
+  const debouncedFilter = useCallback(debounce((newFilterParms) => {
+    setCanLoadOptions(true);
+    setFilterParms(newFilterParms);
+  }, 300), []);
+  const onChangeFilterParmsLocal = (newValue) => {
+    if (onChangeFilterParms) {
+      debouncedFilter(onChangeFilterParms(newValue));
+    }
+  };
+  useEffect(() => {
+    setCanLoadOptions(true);
+  }, [parms, endPoint]);
+  useEffect(() => {
+    if (!open || loading) {
+      return;
+    }
+    if (!canLoadOptions) {
+      return;
+    }
+    setIsloading(true);
+    setOptions([]);
+    setCanLoadOptions(false);
+    networkOperation({
+      method: "GET",
+      endPoint,
+      timeout,
+      parms: {
+        ...parms,
+        ...filterParms
+      },
+      isRemote
+    }).then((response) => {
+      const newOptions = getPropertyByString(response, resultField);
+      setOptions(newOptions);
+    }).catch(() => {
+      setCanLoadOptions(true);
+    }).finally(() => {
+      setIsloading(false);
+    });
+    return () => {
+    };
+  }, [open, parms, filterParms, endPoint]);
+  return /* @__PURE__ */ jsx(RHFAutocomplete, {
+    name,
+    loading,
+    options,
+    onChangeFilterParmsLocal: onChangeFilterParms ? onChangeFilterParmsLocal : void 0,
+    onOpen: () => {
+      setOpen(true);
+    },
+    onClose: () => {
+      setOpen(false);
+    },
+    ...other
+  });
+}
+function getRHFAutocompleteAsyncComponentsDictionary() {
+  return getRHFAutocompleteComponentsDictionary();
+}
+export {
+  RHFAutocompleteAsync as R,
+  getRHFAutocompleteAsyncComponentsDictionary as g
+};