@m4l/components 0.1.62 → 0.1.63

package/components/Icon/index.b29ff2d9.js

@@ -1,200 +0,0 @@
-import { m } from "framer-motion";
-import { forwardRef, useState, useMemo, useEffect } from "react";
-import { IconButton, Box, styled, generateUtilityClasses, generateUtilityClass } from "@mui/material";
-import { jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material/styles";
-import { a as getPaletteColor } from "../../utils/index.b6ae791a.js";
-import { unstable_composeClasses } from "@mui/base";
-const varSmall = {
-  hover: {
-    scale: 1.1
-  },
-  tap: {
-    scale: 0.95
-  }
-};
-const varMedium = {
-  hover: {
-    scale: 1.09
-  },
-  tap: {
-    scale: 0.97
-  }
-};
-const varLarge = {
-  hover: {
-    scale: 1.08
-  },
-  tap: {
-    scale: 0.99
-  }
-};
-function AnimateWrap({
-  size,
-  children
-}) {
-  const isSmall = size === "small";
-  const isLarge = size === "large";
-  return /* @__PURE__ */ jsx(Box, {
-    component: m.div,
-    whileTap: "tap",
-    whileHover: "hover",
-    variants: isSmall && varSmall || isLarge && varLarge || varMedium,
-    sx: {
-      display: "inline-flex"
-    },
-    children
-  });
-}
-const IconButtonAnimate = forwardRef(({
-  children,
-  size = "medium",
-  ...other
-}, ref) => /* @__PURE__ */ jsx(AnimateWrap, {
-  size,
-  children: /* @__PURE__ */ jsx(IconButton, {
-    size,
-    ref,
-    ...other,
-    children
-  })
-}));
-IconButtonAnimate.displayName = "IconButtonAnimate";
-const IconRoot = styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  ...theme.components?.M4LIcon?.styleOverrides
-}));
-const DivIcon = styled("div", {
-  shouldForwardProp: (props) => props !== "src" && props !== "size" && props !== "bgColor" && props !== "rotationAngle" && props !== "angleTransition"
-})(({
-  size,
-  src,
-  bgColor,
-  rotationAngle,
-  angleTransition
-}) => ({
-  maskPosition: "center!important",
-  maskRepeat: "no-repeat!important",
-  WebkitMaskRepeat: "no-repeat!important",
-  width: size,
-  height: size,
-  backgroundColor: bgColor,
-  mask: `url('data:image/svg+xml;base64,${src}')`,
-  WebkitMask: `url('data:image/svg+xml;base64,${src}')`,
-  ...rotationAngle && {
-    transform: `rotate(${rotationAngle}deg)`
-  },
-  ...angleTransition && rotationAngle && {
-    transition: `transform ${angleTransition}s ease-in-out`
-  }
-}));
-const componentName = "M4LIcon";
-generateUtilityClasses(componentName, [
-  "root",
-  "icon",
-  "placeHolder",
-  "sizeExtraSmall",
-  "sizeSmall",
-  "sizeNormal",
-  "sizeLarge",
-  "colorInfo",
-  "colorWarning",
-  "colorError",
-  "colorActive",
-  "colorSelected",
-  "colorDisabled",
-  "rotationAngle"
-]);
-function getIconClassesUtilityClass(slot) {
-  return generateUtilityClass(componentName, slot);
-}
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root"],
-    icon: ["icon", ownerState.size === "extra-small" && "sizeExtraSmall", ownerState.size === "small" && "sizeSmall", ownerState.size === "normal" && "sizeNormal", ownerState.size === "large" && "sizeLarge", ownerState.bgColor === "info" && "colorInfo", ownerState.bgColor === "warning" && "colorWarning", ownerState.bgColor === "error" && "colorError", ownerState.bgColor === "active" && "colorActive", ownerState.bgColor === "selected" && "colorSelected", ownerState.bgColor === "disabled" && "colorDisabled", ownerState.rotationAngle ? "rotationAngle" : ""],
-    placeHolder: ["placeHolder"]
-  };
-  const composedClasses = unstable_composeClasses(slots, getIconClassesUtilityClass, {});
-  return {
-    ...composedClasses
-  };
-};
-function Icon(props) {
-  const {
-    src,
-    size = "small",
-    bgColor = "action.active",
-    rotationAngle,
-    angleTransition,
-    testingProps
-  } = props;
-  const [resource, setResource] = useState(testingProps?.resource || void 0);
-  const theme = useTheme();
-  const finalSize = useMemo(() => {
-    switch (size) {
-      case "extra-small":
-        return "12px";
-      case "small":
-        return "16px";
-      case "medium":
-        return "18px";
-      case "large":
-        return "22px";
-    }
-    return size;
-  }, [size]);
-  useEffect(() => {
-    let mounted = true;
-    (async function networkOperation() {
-      await fetch(src).then((response) => {
-        return response.text() || "";
-      }).then((xml) => {
-        xml = xml.match(
-          /(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g
-        )?.toString() || "";
-        if (mounted) {
-          setResource(window.btoa(xml));
-        }
-      }).catch((_err) => {
-      });
-    })();
-    return function clenUp() {
-      mounted = false;
-    };
-  }, [src]);
-  const ownerState = {
-    size,
-    bgColor,
-    rotationAngle
-  };
-  const classes = useUtilityClasses(ownerState);
-  const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
-  return /* @__PURE__ */ jsx(IconRoot, {
-    className: classes.root,
-    "data-testid": "IconRoot",
-    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
-      className: classes.icon,
-      "data-testid": "DivIcon",
-      src: resource,
-      size: finalSize,
-      bgColor: getPaletteColor(theme.palette, bgColor),
-      rotationAngle,
-      angleTransition
-    }) : /* @__PURE__ */ jsx("img", {
-      className: classes.placeHolder,
-      "data-testid": "img",
-      src: placeHolder,
-      alt: "icon_svg",
-      width: finalSize,
-      height: finalSize
-    })
-  });
-}
-export {
-  Icon as I,
-  IconButtonAnimate as a
-};

package/components/areas/index.a0456f95.js

@@ -1,21 +0,0 @@
-import "./components/index.9f62ca8e.js";
-import "./components/AreasAdmin/index.645bd2c7.js";
-import "react";
-import "@m4l/core";
-import "@mui/material";
-import "../Icon/index.b29ff2d9.js";
-import "@mui/material/styles";
-import "react/jsx-runtime";
-import "../mui_extended/IconButton/index.afa201a7.js";
-import "zustand";
-import "./contexts/AreasContext/index.f3d6e728.js";
-import "zustand/shallow";
-import "./components/AreasContainer/index.3e74c849.js";
-import "react-grid-layout/css/styles.css";
-import "../../react-resizable.b620abed.js";
-import "./contexts/index.3623b460.js";
-import "./contexts/DynamicMFParmsContext/index.c19cb8cc.js";
-const LABEL_NEW_AREA = "label_new_area";
-export {
-  LABEL_NEW_AREA as L
-};

package/components/hook-form/RHFAutocomplete/index.bb6cb5df.js

@@ -1,289 +0,0 @@
-import { useModuleDictionary, useModuleSkeleton } from "@m4l/core";
-import { useFormContext, Controller } from "react-hook-form";
-import { styled as styled$1, Skeleton, Autocomplete, TextField, CircularProgress } from "@mui/material";
-import { styled } from "@mui/material/styles";
-import { I as Image } from "../../Image/index.aa24e982.js";
-import { useMemo, useState, useEffect } from "react";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { T as TEST_PROP_ID } from "../../../vendor.29969396.js";
-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]
-    });
-  };
-}
-const WrapperSkeletonRHFAutocomplete = styled$1("div")(({
-  theme
-}) => ({
-  width: "100%",
-  display: "flex",
-  justifyContent: "space-between",
-  alignItems: "center",
-  height: `${theme.spacing(4.5)}`,
-  border: `1px solid ${theme.palette.divider}`,
-  borderRadius: `${theme.spacing(1)}`,
-  padding: `0 ${theme.spacing(2)}`,
-  overflow: "hidden",
-  [theme.breakpoints.down("md")]: {
-    width: "100%"
-  }
-}));
-const SkeletonContainerText = styled$1("div")(({
-  theme
-}) => ({
-  width: "100%",
-  height: "auto",
-  overflow: "hidden",
-  margin: theme.spacing(1.5)
-}));
-const SkeletonRHFAutocomplete = (props) => {
-  const {
-    withImage,
-    skeletonWidth,
-    skeletonHeight,
-    imageWidth,
-    imageHeight
-  } = props;
-  if (withImage) {
-    return /* @__PURE__ */ jsxs(WrapperSkeletonRHFAutocomplete, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: imageWidth,
-        height: imageHeight,
-        sx: {
-          minWidth: imageWidth
-        }
-      }), /* @__PURE__ */ jsx(SkeletonContainerText, {
-        children: /* @__PURE__ */ jsx(Skeleton, {
-          variant: "text",
-          width: skeletonWidth,
-          height: skeletonHeight
-        })
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 16,
-        height: 16,
-        sx: {
-          minWidth: "16px"
-        }
-      })]
-    });
-  }
-  return /* @__PURE__ */ jsxs(WrapperSkeletonRHFAutocomplete, {
-    children: [/* @__PURE__ */ jsx(SkeletonContainerText, {
-      sx: {
-        marginLeft: "0px"
-      },
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: skeletonWidth,
-        height: skeletonHeight
-      })
-    }), /* @__PURE__ */ jsx(Skeleton, {
-      variant: "circular",
-      width: 16,
-      height: 16,
-      sx: {
-        minWidth: "16px"
-      }
-    })]
-  });
-};
-const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";
-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(SkeletonRHFAutocomplete, {
-      withImage,
-      skeletonWidth,
-      skeletonHeight,
-      imageWidth,
-      imageHeight
-    });
-  }
-  return /* @__PURE__ */ jsx(Controller, {
-    name,
-    control,
-    render: ({
-      field: {
-        onChange,
-        value,
-        ref
-      },
-      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]);
-      const checkKeyDown = (e) => {
-        if (e.code === "Enter")
-          e.preventDefault();
-      };
-      return /* @__PURE__ */ jsx(WrapperAutocomplete, {
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: `${RHFTAUTOCOMPLET_ROOT_TEST_ID}_${name}`
-        } : {},
-        className: "m4l_rhf_autocomplete",
-        children: /* @__PURE__ */ jsx(
-          Autocomplete,
-          {
-            onKeyDown: checkKeyDown,
-            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,
-                inputRef: ref,
-                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/RHFAutocomplete/test/contants.d.ts

@@ -1 +0,0 @@
-export declare const RHFTAUTOCOMPLET_ROOT_TEST_ID = "RHFAutocomplete";

package/components/hook-form/RHFAutocompleteAsync/index.815949a9.js

@@ -1,87 +0,0 @@
-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.bb6cb5df.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
-};

package/components/hook-form/RHFAutocompleteAsync/index.d.ts

@@ -1,2 +0,0 @@
-import type { RHFAutocompleteAsyncProps } from './types';
-export declare function RHFAutocompleteAsync<T>(props: RHFAutocompleteAsyncProps<T>): JSX.Element;