@m4l/components 0.2.35 → 1.0.0

package/components/formatters/PriceFormatter/index.83cbe7be.js

@@ -1,43 +0,0 @@
-import { getPropertyByString } from "@m4l/core";
-import { useFormatter } from "@m4l/graphics";
-import { W as WrapperComponent } from "../../WrapperComponent/index.5e872594.js";
-import { jsx } from "react/jsx-runtime";
-function getFormatPrice(obProps, fieldValue, currency, decimalDigits) {
-  let result = "";
-  const value = getPropertyByString(obProps, fieldValue);
-  try {
-    result = Number(value).toLocaleString(navigator.language, {
-      currency,
-      style: "currency",
-      currencyDisplay: "symbol",
-      useGrouping: true,
-      maximumFractionDigits: decimalDigits
-    }) || "";
-  } catch (error) {
-    result = Number(value).toLocaleString("en-US", {
-      style: "currency",
-      currency: "USD",
-      currencyDisplay: "symbol",
-      useGrouping: true,
-      maximumFractionDigits: decimalDigits
-    }) || "";
-  }
-  return result;
-}
-function PriceFormatter(props) {
-  const {
-    obProps,
-    fieldValue,
-    Component = WrapperComponent
-  } = props;
-  const {
-    currencyFormatter
-  } = useFormatter();
-  return /* @__PURE__ */ jsx(Component, {
-    children: getFormatPrice(obProps, fieldValue, currencyFormatter.code, currencyFormatter.decimalDigits)
-  });
-}
-export {
-  PriceFormatter as P,
-  getFormatPrice as g
-};

package/components/formatters/UncertaintyFormatter/index.08e1b79f.js

@@ -1,34 +0,0 @@
-import { getPropertyByString } from "@m4l/core";
-import { W as WrapperComponent } from "../../WrapperComponent/index.5e872594.js";
-import { jsx } from "react/jsx-runtime";
-function getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit) {
-  let result = "";
-  const ranges = getPropertyByString(obProps, fieldValue);
-  const symbol = getPropertyByString(obProps, fieldSymbol);
-  const unit = getPropertyByString(obProps, fieldUnit);
-  if (ranges === void 0 || ranges === null || !Array.isArray(ranges) || typeof symbol !== "string" || typeof unit !== "string") {
-    return "[]";
-  }
-  ranges.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 result;
-}
-function UncertaintyFormatter(props) {
-  const {
-    obProps,
-    fieldValue,
-    fieldSymbol,
-    fieldUnit,
-    Component = WrapperComponent
-  } = props;
-  return /* @__PURE__ */ jsx(Component, {
-    children: getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit)
-  });
-}
-export {
-  UncertaintyFormatter as U,
-  getUncertaintyFormat as g
-};

package/components/formatters/index.03471e3f.js

@@ -1,140 +0,0 @@
-import { generateUtilityClasses, styled } from "@mui/material";
-import "@mui/base";
-import { jsx } from "react/jsx-runtime";
-import { W as WrapperComponent } from "../WrapperComponent/index.5e872594.js";
-import { useModuleDictionary } from "@m4l/core";
-import { a as BOOLEAN_FORMATTER_DICTIONARY_KEY } from "./BooleanFormatter/index.9ccf9298.js";
-const COMPONENT_CLASS_NAME = "M4LFormatter";
-const formatterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  "root",
-  "booleanFormatterIcon",
-  "booleanFormatterCheck"
-]);
-const FormatterRootContainer = styled("div")(({ theme }) => ({
-  ...theme.components?.M4LFormatter?.styleOverrides
-}));
-const FormatterRoot = (props) => {
-  const {
-    children
-  } = props;
-  return /* @__PURE__ */ jsx(FormatterRootContainer, {
-    className: formatterClasses.root,
-    children
-  });
-};
-function getFormatConcatenated(values, separator) {
-  const returnSymbol = "";
-  if (values === null)
-    return returnSymbol;
-  if (!Array.isArray(values)) {
-    return values.toString();
-  } else {
-    if (values.length == 0)
-      return returnSymbol;
-    else {
-      const result = values.map((value) => {
-        if (value === null || value === void 0)
-          return returnSymbol;
-        else {
-          if (typeof value === "string" || typeof value === "number") {
-            return value.toString();
-          } else {
-            return returnSymbol;
-          }
-        }
-      });
-      const output = result.join(separator.toString());
-      return output.trim();
-    }
-  }
-}
-function ConcatenatedFormatter(props) {
-  const {
-    values = [],
-    separator = " ",
-    Component = WrapperComponent
-  } = props;
-  return /* @__PURE__ */ jsx(Component, {
-    children: getFormatConcatenated(values, separator)
-  });
-}
-const PERIOD_FORMATTER_DICTIONARY_KEY = `period_formatter`;
-const dictionary = {
-  LABEL_YEARS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_years`,
-  LABEL_YEAR: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_year`,
-  LABEL_MONTHS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_months`,
-  LABEL_MONTH: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_month`,
-  LABEL_DAYS: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_days`,
-  LABEL_DAY: `${PERIOD_FORMATTER_DICTIONARY_KEY}.label_day`
-};
-function getFormatPeriod(years, months, days) {
-  const {
-    getLabel
-  } = useModuleDictionary();
-  let period = "";
-  const separator = ", ";
-  switch (years) {
-    case 0:
-      break;
-    case 1:
-      period = "1 " + getLabel(dictionary.LABEL_YEAR);
-      break;
-    default:
-      period = years.toString() + " " + getLabel(dictionary.LABEL_YEARS);
-  }
-  switch (months) {
-    case 0:
-      break;
-    case 1:
-      if (years > 0)
-        period += separator;
-      period += "1 " + getLabel(dictionary.LABEL_MONTH);
-      break;
-    default:
-      if (years > 0)
-        period += separator;
-      period += months.toString() + " " + getLabel(dictionary.LABEL_MONTHS);
-  }
-  switch (days) {
-    case 0:
-      break;
-    case 1:
-      if (years > 0 || months > 0)
-        period += separator;
-      period += "1 " + getLabel(dictionary.LABEL_DAY);
-      break;
-    default:
-      if (years > 0 || months > 0)
-        period += separator;
-      period += days.toString() + " " + getLabel(dictionary.LABEL_DAYS);
-  }
-  if (period == "")
-    period = "-";
-  return period;
-}
-function PeriodFormatter(props) {
-  const {
-    years = 0,
-    months = 0,
-    days = 0,
-    Component = WrapperComponent
-  } = props;
-  return /* @__PURE__ */ jsx(Component, {
-    children: getFormatPeriod(years, months, days)
-  });
-}
-function getFormattersComponentsDictionary() {
-  return [
-    BOOLEAN_FORMATTER_DICTIONARY_KEY,
-    PERIOD_FORMATTER_DICTIONARY_KEY
-  ];
-}
-export {
-  ConcatenatedFormatter as C,
-  FormatterRoot as F,
-  PeriodFormatter as P,
-  getFormatPeriod as a,
-  getFormattersComponentsDictionary as b,
-  formatterClasses as f,
-  getFormatConcatenated as g
-};

package/components/hook-form/HelperError/index.66bbcac3.js

@@ -1,30 +0,0 @@
-import { useFormContext, useController } from "react-hook-form";
-import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
-import { jsx } from "react/jsx-runtime";
-function HelperError(props) {
-  const {
-    name
-  } = props;
-  const {
-    control
-  } = useFormContext();
-  const {
-    fieldState
-  } = useController({
-    name,
-    control,
-    rules: {
-      required: true
-    }
-  });
-  if (fieldState?.error?.message) {
-    return /* @__PURE__ */ jsx(HelperText, {
-      variant: "error",
-      message: fieldState?.error?.message
-    });
-  }
-  return null;
-}
-export {
-  HelperError as H
-};

package/components/hook-form/RHFAutocomplete/index.1f2afb6b.js

@@ -1,429 +0,0 @@
-import { useModuleDictionary, useModuleSkeleton, useEnvironment } from "@m4l/core";
-import { useFormContext, Controller } from "react-hook-form";
-import { styled, Skeleton, generateUtilityClasses, generateUtilityClass, useTheme, Autocomplete, Popper, TextField, Chip } from "@mui/material";
-import { I as Image } from "../../Image/index.b799c514.js";
-import { useMemo, useRef, useState, useEffect, createElement } from "react";
-import { T as TEST_PROP_ID } from "../../../test/constants_no_mock.86c553a9.js";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { T as Typography } from "../../mui_extended/Typography/index.379dd374.js";
-import { unstable_composeClasses } from "@mui/base";
-import { H as HelperText } from "../../HelperText/index.7d2afdb3.js";
-import { useResponsiveDesktop } from "@m4l/graphics";
-import { useFormFocus } from "../../../index.js";
-import { F as FieldLabel } from "../../FieldLabel/index.0412576c.js";
-import { C as CircularProgress } from "../../mui_extended/CircularProgress/index.ad569afd.js";
-import { I as IconButton } from "../../mui_extended/IconButton/index.f8a3021b.js";
-const AutocompleteRoot = styled("div")(({
-  theme
-}) => ({
-  ...theme.components?.M4LRHFAutocomplete?.styleOverrides
-}));
-const WrapperOption = styled("li")(({
-  theme
-}) => ({
-  "& .m4l_image": {
-    marginRight: theme.spacing(1.5)
-  }
-}));
-const RHFAUTOCOMPLETE_PREFIX = "RHFAutocomplete";
-const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";
-const getNameDataTestId = (KEY) => {
-  return `${RHFAUTOCOMPLETE_PREFIX}-${KEY}`;
-};
-function withRenderOption(getUrlImage, classes, imageWidth) {
-  return function RenderOption(optionProps, option) {
-    return /* @__PURE__ */ jsxs(WrapperOption, {
-      ...optionProps,
-      className: classes.withImage,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("withImage")
-      } : {},
-      children: [/* @__PURE__ */ jsx(Image, {
-        src: getUrlImage(option),
-        width: imageWidth,
-        height: "100%"
-      }), /* @__PURE__ */ jsx(Typography, {
-        variant: "body",
-        children: optionProps.key
-      })]
-    });
-  };
-}
-const SkeletonRHFAutocomplete = (props) => {
-  const {
-    withImage,
-    classes,
-    hasLabel
-  } = props;
-  return /* @__PURE__ */ jsxs("div", {
-    className: classes.skeletonRoot,
-    children: [(hasLabel || hasLabel?.length === 0) && /* @__PURE__ */ jsx(Skeleton, {
-      variant: "text",
-      width: "30%",
-      height: "16px"
-    }), /* @__PURE__ */ jsx("div", {
-      className: classes.skeleton,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId("skeleton")
-      } : {},
-      children: !withImage ? /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx("div", {
-          className: classes.skeletonContainerText,
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "text",
-            width: "50%",
-            height: "14px"
-          })
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 16,
-          height: 16,
-          sx: {
-            minWidth: "16px"
-          }
-        })]
-      }) : /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular"
-        }), /* @__PURE__ */ jsx("div", {
-          className: classes.skeletonContainerText,
-          children: /* @__PURE__ */ jsx(Skeleton, {
-            variant: "text",
-            width: "50%",
-            height: "14px"
-          })
-        }), /* @__PURE__ */ jsx(Skeleton, {
-          variant: "circular",
-          width: 16,
-          height: 16,
-          sx: {
-            minWidth: "16px"
-          }
-        })]
-      })
-    })]
-  });
-};
-const componentName = "M4LRHFAutocomplete";
-generateUtilityClasses(componentName, [
-  "root",
-  "withImage",
-  "skeleton",
-  "label",
-  "popper",
-  "skeletonRoot",
-  "skeletonContainerText",
-  "iconDown",
-  "variantInfo",
-  "variantImage",
-  "isDisabled",
-  "imageWidthDefined",
-  "variantSuccess",
-  "variantWarning",
-  "variantError",
-  "sizeSmall",
-  "sizeMedium",
-  "isFocus",
-  "isTabSelected",
-  "chip"
-]);
-function getRHFAutocompleteClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.isFocus && "isFocus", ownerState.isTabSelected && "isTabSelected", ownerState.disabled && "isDisabled", ownerState.semantics === "info" && "variantInfo", ownerState.semantics === "success" && "variantSuccess", ownerState.semantics === "warning" && "variantWarning", ownerState.semantics === "error" && "variantError", ownerState.imageWidthDefined && "imageWidthDefined", ownerState.multiple && "multiple"],
-    withImage: ["withImage"],
-    skeleton: ["skeleton"],
-    label: ["label"],
-    popper: ["popper", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium", ownerState.imageWidthDefined && "imageWidthDefined"],
-    skeletonRoot: ["skeletonRoot"],
-    skeletonContainerText: ["SkeletonContainerText"],
-    iconDown: ["iconDown"],
-    chip: ["chip", ownerState.size === "small" && "sizeSmall", ownerState.size === "medium" && "sizeMedium"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getRHFAutocompleteClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function RHFAutocomplete(props) {
-  const {
-    name: nameRHF,
-    getOptionLabel,
-    isOptionEqualToValue,
-    label,
-    skeletonWidth = 100,
-    skeletonHeight = "18px",
-    options,
-    disabled,
-    getOptionUrlImage,
-    onOpen,
-    onClose,
-    loading,
-    variant,
-    helperMessage,
-    size = "small",
-    onChangeFilterParmsLocal,
-    imageWidth,
-    imageHeight,
-    mandatory,
-    mandatoryMessage,
-    multiple,
-    ...other
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const withImage = useMemo(() => getOptionUrlImage !== void 0, [getOptionUrlImage]);
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    isFocus,
-    isTabSelected,
-    handlerFocus,
-    handlerOnKeyUp,
-    handlerOnBlur
-  } = useFormFocus();
-  const autocompleteRef = useRef(null);
-  const [open, setOpen] = useState(false);
-  const isDesktop = useResponsiveDesktop();
-  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);
-  };
-  const {
-    control,
-    formState: {
-      errors
-    }
-  } = useFormContext();
-  const [currentVariant, setCurrentVariant] = useState(null);
-  useEffect(() => {
-    if (errors[nameRHF]) {
-      setCurrentVariant("error");
-    } else if (variant) {
-      setCurrentVariant(variant);
-    } else {
-      setCurrentVariant(null);
-    }
-  }, [errors[nameRHF], variant, control]);
-  const ownerState = {
-    size: !isDesktop ? "medium" : size,
-    isFocus: !isSkeleton ? isFocus : false,
-    isTabSelected: !isSkeleton ? isTabSelected : false,
-    semantics: currentVariant,
-    disabled,
-    imageWidthDefined: Boolean(imageWidth),
-    multiple: Boolean(multiple)
-  };
-  const classes = useUtilityClasses(ownerState);
-  const theme = useTheme();
-  return /* @__PURE__ */ jsx(AutocompleteRoot, {
-    className: classes.root,
-    tabIndex: 0,
-    onFocus: handlerFocus,
-    onBlur: handlerOnBlur,
-    onKeyUp: handlerOnKeyUp,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: `${RHFTAUTOCOMPLET_ROOT_TEST_ID}_${nameRHF}`
-    } : {},
-    children: !isSkeleton ? /* @__PURE__ */ jsx(Controller, {
-      name: nameRHF,
-      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?.(getOptionLabelLocal(value), "reset");
-          }
-        }, [value]);
-        const checkKeyDown = (e) => {
-          if (e.code === "Enter")
-            e.preventDefault();
-        };
-        return /* @__PURE__ */ jsxs(Fragment, {
-          children: [label && /* @__PURE__ */ jsx(FieldLabel, {
-            className: classes.label,
-            label,
-            mandatory,
-            mandatoryMessage,
-            helperMessage
-          }), /* @__PURE__ */ jsx(Autocomplete, {
-            autoComplete: true,
-            disableClearable: true,
-            multiple,
-            onKeyDown: checkKeyDown,
-            size,
-            ref: autocompleteRef,
-            autoSelect: false,
-            options,
-            getOptionLabel: getOptionLabelLocal,
-            inputValue,
-            clearOnBlur: false,
-            PopperComponent: (popperProps) => {
-              return /* @__PURE__ */ jsx(Popper, {
-                ...popperProps,
-                className: classes.popper,
-                placement: "bottom-start",
-                placeholder: void 0,
-                onPointerEnterCapture: () => {
-                },
-                onPointerLeaveCapture: () => {
-                },
-                sx: {
-                  ...theme.components?.M4LRHFAutocompletePopover?.styleOverrides
-                }
-              });
-            },
-            onInputChange: (_event, newValue, reason) => {
-              if (reason === "input") {
-                setInputValue(newValue);
-                if (onChangeFilterParmsLocal) {
-                  onChangeFilterParmsLocal(newValue, reason);
-                }
-              } else {
-                onChange(null);
-              }
-            },
-            isOptionEqualToValue: isOptionEqualToValueLocal,
-            value: Array.isArray(value) ? value : multiple ? value ? [value] : [] : value || null,
-            onOpen: onOpenLocal,
-            onClose: onCloseLocal,
-            open,
-            onChange: (_e, newValue) => {
-              if (!multiple && !Array.isArray(newValue)) {
-                setInputValue(getOptionLabelLocal(newValue));
-              } else {
-                setInputValue("");
-              }
-              onChange(Array.isArray(newValue) ? [...newValue] : newValue);
-            },
-            filterOptions: onChangeFilterParmsLocal ? (x) => x : void 0,
-            loading,
-            loadingText: /* @__PURE__ */ jsx(Typography, {
-              variant: "body",
-              children: getLabel("rhf_autocomplete.loading_options")
-            }),
-            disabled,
-            noOptionsText: getLabel("rhf_autocomplete.no_options"),
-            renderOption: withImage ? withRenderOption(getOptionUrlImageLocal, classes, imageWidth) : void 0,
-            renderInput: (params) => {
-              return /* @__PURE__ */ jsx(TextField, {
-                ...params,
-                InputLabelProps: {
-                  ...params.InputLabelProps,
-                  shrink: true
-                },
-                fullWidth: true,
-                size,
-                SelectProps: {
-                  native: true
-                },
-                InputProps: {
-                  ...params.InputProps,
-                  startAdornment: /* @__PURE__ */ jsxs(Fragment, {
-                    children: [!multiple && withImage && value ? /* @__PURE__ */ jsx(Image, {
-                      src: getOptionUrlImageLocal(value),
-                      width: imageWidth,
-                      height: "100%"
-                    }, "ImageTextField") : null, params.InputProps.startAdornment]
-                  }),
-                  endAdornment: loading ? /* @__PURE__ */ jsx(CircularProgress, {
-                    color: "inherit",
-                    size: 18
-                  }) : /* @__PURE__ */ jsx(IconButton, {
-                    className: classes.iconDown,
-                    src: `${host_static_assets}/${environment_assets}/frontend/components/RHFAutocompletarAsync/assets/icons/chevronDown.svg`,
-                    onClick: (event) => onOpenLocal(event),
-                    disabled,
-                    size
-                  })
-                },
-                autoComplete: "off",
-                error: !!error,
-                ...other
-              });
-            },
-            ...multiple ? {
-              renderTags: (tagValue, getTagProps) => tagValue.map((option, index) => {
-                const {
-                  key,
-                  ...restTagProps
-                } = getTagProps({
-                  index
-                });
-                return /* @__PURE__ */ createElement(Chip, {
-                  ...restTagProps,
-                  key,
-                  label: getOptionLabelLocal(option),
-                  className: classes.chip,
-                  icon: withImage && option ? /* @__PURE__ */ jsx(Image, {
-                    src: getOptionUrlImageLocal(option),
-                    width: imageWidth,
-                    height: imageHeight ?? "100%"
-                  }) : void 0,
-                  sx: {
-                    ...theme.components?.M4LRHFAutocompleteChip?.styleOverrides
-                  }
-                });
-              })
-            } : {}
-          }), currentVariant === "error" ? /* @__PURE__ */ jsx(HelperText, {
-            variant: currentVariant,
-            message: error?.message
-          }) : null]
-        });
-      }
-    }) : /* @__PURE__ */ jsx(SkeletonRHFAutocomplete, {
-      withImage,
-      classes,
-      hasLabel: label
-    })
-  });
-}
-function getRHFAutocompleteComponentsDictionary() {
-  return ["rhf_autocomplete"];
-}
-export {
-  RHFAutocomplete as R,
-  getRHFAutocompleteComponentsDictionary as g
-};