@m4l/components 0.0.34 → 0.0.37

package/dist/components/hook-form/RHFUpload.js

@@ -1,18 +1,19 @@
-import { Typography, FormHelperText } from "@mui/material";
+import { styled as styled$1, FormHelperText } from "@mui/material";
 import { useCallback } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import { i as isString_1 } from "../../lodash.js";
 import { u as useDropzone } from "../../node_modules.js";
+import { styled, alpha } from "@mui/material/styles";
 import { I as Image } from "../Image/index.js";
-import { useEnvironment } from "@m4l/core";
+import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import "../../react-lazy-load-image-component.js";
-import { styled } from "@mui/material/styles";
 const RootStyle = styled("div")(({
   theme
 }) => ({
-  width: 144,
-  height: 144,
+  width: "inherit",
+  height: "100%",
+  minWidth: theme.spacing(20),
   margin: "auto",
   borderRadius: theme.spacing(1),
   padding: theme.spacing(1),
@@ -45,20 +46,74 @@ const DropZoneStyle = styled("div")(({
 const PlaceholderStyle = styled("div")(({
   theme
 }) => ({
+  "&:hover": {
+    opacity: 1
+  },
   display: "flex",
-  position: "absolute",
-  alignItems: "center",
-  flexDirection: "column",
   justifyContent: "center",
-  color: theme.palette.text.secondary,
-  backgroundColor: theme.palette.background.neutral,
+  position: "absolute",
+  zIndex: "2",
+  inset: "0",
   transition: theme.transitions.create("opacity", {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.shorter
   }),
-  "&:hover": {
-    opacity: 0.72
-  }
+  overflow: "auto"
+}));
+const ContainerUploadBody = styled("div")(({
+  theme
+}) => ({
+  padding: theme.spacing(3, 5),
+  display: "flex",
+  flexWrap: "wrap",
+  justifyContent: "center",
+  width: "100%",
+  height: "100%",
+  gap: theme.spacing(3)
+}));
+const Containermessage = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  flexDirection: "column",
+  gap: theme.spacing(3)
+}));
+const ContainerTitle = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle2,
+  width: "fit-content"
+}));
+const ContainerDescription = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  minWidth: theme.spacing(20)
+}));
+const ContainerConditions = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.caption,
+  width: "fit-content"
+}));
+const WrapperImage = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  maxWidth: theme.spacing(20)
+}));
+styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+  inset: "0",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center"
 }));
 function UploadImage({
   error,
@@ -78,10 +133,14 @@ function UploadImage({
   });
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
+  const {
+    getLabel
+  } = useModuleDictionary();
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(RootStyle, {
+      id: "RootStyle",
       sx: {
         ...(isDragReject || error) && {
           borderColor: "error.light"
@@ -89,6 +148,7 @@ function UploadImage({
         ...sx
       },
       children: /* @__PURE__ */ jsxs(DropZoneStyle, {
+        id: "DropZoneStyle",
         ...getRootProps(),
         sx: {
           ...isDragActive && {
@@ -103,36 +163,54 @@ function UploadImage({
           sx: {
             zIndex: 8
           }
-        }), /* @__PURE__ */ jsxs(PlaceholderStyle, {
+        }), /* @__PURE__ */ jsx(PlaceholderStyle, {
+          id: "PlaceholderStyle",
           className: "placeholder",
           sx: {
-            ...file && {
-              opacity: 0,
+            ...file ? {
+              bgcolor: alpha("#161C24", 0.72),
               color: "common.white",
-              bgcolor: "grey.900",
-              "&:hover": {
-                opacity: 0.72
-              }
+              opacity: 0
+            } : {
+              opacity: 1
             },
             ...(isDragReject || error) && {
-              bgcolor: "error.lighter"
+              backgroundColor: alpha("error.main", 0.72),
+              color: "common.white"
             }
           },
-          children: [/* @__PURE__ */ jsx(Image, {
-            src: `${host_static_assets}/${environment}/frontend/commons/assets/icons/more_vertical.svg`,
-            effect: "opacity",
-            width: "24",
-            height: "24",
-            mb: 1
-          }), /* @__PURE__ */ jsx(Typography, {
-            variant: "caption",
-            children: file ? "Update photo" : "Upload photo"
-          })]
+          children: /* @__PURE__ */ jsxs(ContainerUploadBody, {
+            className: "ContainerUploadBody",
+            children: [/* @__PURE__ */ jsx(WrapperImage, {
+              children: /* @__PURE__ */ jsx(Image, {
+                src: `${host_static_assets}/${environment_assets}/frontend/components/upload_image/assets/img/upload_image_illustration.svg`,
+                effect: "opacity",
+                width: "100%",
+                height: "auto",
+                mb: 1
+              })
+            }), /* @__PURE__ */ jsxs(Containermessage, {
+              children: [/* @__PURE__ */ jsx(ContainerTitle, {
+                children: file ? getLabel("upload_image.title_update") : getLabel("upload_image.title_upload")
+              }), /* @__PURE__ */ jsx(ContainerDescription, {
+                children: getLabel("upload_image.description")
+              }), /* @__PURE__ */ jsx(ContainerConditions, {
+                children: getLabel("upload_image.conditions")
+              })]
+            })]
+          })
         })]
       })
     }), helperText && helperText]
   });
 }
+const WrapperRHFUploadImage = styled$1("div")(({
+  theme
+}) => ({
+  width: "inherit",
+  height: "inherit",
+  padding: "1px"
+}));
 function RHFUploadImage({
   name,
   ...other
@@ -161,7 +239,7 @@ function RHFUploadImage({
       }
     }) => {
       const checkError = !!error && !field.value;
-      return /* @__PURE__ */ jsxs("div", {
+      return /* @__PURE__ */ jsxs(WrapperRHFUploadImage, {
         children: [/* @__PURE__ */ jsx(UploadImage, {
           onDrop: handleDrop,
           error: checkError,

package/dist/components/mui_extended/Accordion/index.js

@@ -5,7 +5,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 function Accordion(props) {
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const {
     label,
@@ -29,7 +29,7 @@ function Accordion(props) {
       disableTouchRipple: false,
       expandIcon: /* @__PURE__ */ jsx(IconButton, {
         "aria-label": "settings",
-        src: `${host_static_assets}/${environment}/frontend/components/accordion/assets/icons/expanded.svg`
+        src: `${host_static_assets}/${environment_assets}/frontend/components/accordion/assets/icons/expanded.svg`
       }),
       ...summaryProps,
       children: isSkeleton ? /* @__PURE__ */ jsx(Skeleton, {

package/dist/components/mui_extended/IconButton/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { IconButtonProps as MUIIconButtonProps } from '@mui/material';
 import { IconButtonProps } from './types';
-export declare function IconButton({ src, tooltip, size, dictionaryTooltip, ...other }: IconButtonProps & MUIIconButtonProps): JSX.Element;
+export declare function IconButton({ src, tooltip, size, dictionaryTooltip, bgColor, ...other }: IconButtonProps & MUIIconButtonProps): JSX.Element;
 export default IconButton;

package/dist/components/mui_extended/IconButton/index.js

@@ -3,7 +3,7 @@ import { forwardRef, useMemo } from "react";
 import { IconButton as IconButton$1, Box, Tooltip } from "@mui/material";
 import { jsx } from "react/jsx-runtime";
 import { useModuleDictionary } from "@m4l/core";
-import { B as BoxIcon } from "../BoxIcon/index.js";
+import { I as Icon } from "../../Icon/index.js";
 const varSmall = {
   hover: {
     scale: 1.1
@@ -64,18 +64,19 @@ function IconButton({
   tooltip,
   size = "small",
   dictionaryTooltip,
+  bgColor = "active",
   ...other
 }) {
   const {
     getLabel
   } = useModuleDictionary();
-  const iconButton = useMemo(() => /* @__PURE__ */ jsx(IconButton$1, {
-    size,
-    ...other,
-    children: /* @__PURE__ */ jsx(BoxIcon, {
-      src
-    })
-  }), [size, other, src]);
+  const iconMemo = useMemo(() => {
+    console.log("IconButton", size, other, src);
+    return /* @__PURE__ */ jsx(Icon, {
+      src,
+      bgColor
+    });
+  }, [src, bgColor]);
   const finalTooltip = useMemo(() => {
     if (dictionaryTooltip && getLabel) {
       return getLabel(dictionaryTooltip);
@@ -85,9 +86,17 @@ function IconButton({
   if (finalTooltip && !other.disabled) {
     return /* @__PURE__ */ jsx(Tooltip, {
       title: finalTooltip,
-      children: iconButton
+      children: /* @__PURE__ */ jsx(IconButton$1, {
+        size,
+        ...other,
+        children: iconMemo
+      })
     });
   }
-  return iconButton;
+  return /* @__PURE__ */ jsx(IconButton$1, {
+    size,
+    ...other,
+    children: iconMemo
+  });
 }
 export { IconButton as I, IconButtonAnimate as a };

package/dist/components/mui_extended/IconButton/types.d.ts

@@ -1,4 +1,5 @@
-export interface IconButtonProps {
+import { OwnProps } from '../../Icon/types';
+export interface IconButtonProps extends Pick<OwnProps, 'bgColor'> {
     src: string;
     tooltip?: string;
     dictionaryTooltip?: string;

package/dist/components/mui_extended/MenuActions/index.js

@@ -3,7 +3,7 @@ import { useEnvironment, useModuleDictionary } from "@m4l/core";
 import { IconButton, Tooltip, MenuItem } from "@mui/material";
 import { M as MenuPopover } from "../MenuPopover/index.js";
 import { styled } from "@mui/material/styles";
-import { B as BoxIcon } from "../BoxIcon/index.js";
+import { I as Icon } from "../../Icon/index.js";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 const WrapperMenuActions = styled(IconButton)(() => ({}));
 const LabelMemuItem = styled("div")(({
@@ -30,7 +30,7 @@ function MenuActions(props) {
   } = props;
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const {
     getLabel
@@ -42,8 +42,8 @@ function MenuActions(props) {
   const urlFinalIcon = useMemo(() => {
     if (urlIcon)
       return urlIcon;
-    return `${host_static_assets}/${environment}/frontend/commons/assets/icons/more_vertical.svg`;
-  }, [urlIcon, host_static_assets, environment]);
+    return `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/more_vertical.svg`;
+  }, [urlIcon, host_static_assets, environment_assets]);
   const handleClose = () => {
     setOpen(null);
   };
@@ -67,12 +67,10 @@ function MenuActions(props) {
         id: "WrapperMenuActions",
         size: "small",
         onClick: handleOpen,
-        children: /* @__PURE__ */ jsx(BoxIcon, {
+        children: /* @__PURE__ */ jsx(Icon, {
           src: urlFinalIcon,
-          sx: {
-            width: 20,
-            height: 20
-          }
+          width: 16,
+          height: 16
         })
       })
     }), /* @__PURE__ */ jsx(MenuPopover, {
@@ -101,7 +99,7 @@ function MenuActions(props) {
           color: menuAction.color ? menuAction.color : "text.main"
         },
         disabled: menuAction.disabled,
-        children: [/* @__PURE__ */ jsx(BoxIcon, {
+        children: [/* @__PURE__ */ jsx(Icon, {
           src: menuAction.urlIcon
         }), /* @__PURE__ */ jsx(LabelMemuItem, {
           children: getLabel(menuAction.dictionaryField)

package/dist/components/mui_extended/Pager/index.js

@@ -24,7 +24,7 @@ function PagerActions(props) {
   } = props;
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
   const handleFirstPageButtonClick = (event) => {
     onPageChange(event, 0);
@@ -45,25 +45,25 @@ function PagerActions(props) {
       onClick: handleFirstPageButtonClick,
       disabled: page === 0,
       "aria-label": "first page",
-      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/first.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/first.svg`
     }), /* @__PURE__ */ jsx(IconButton, {
       dictionaryTooltip: "pager.previous",
       onClick: handleBackButtonClick,
       disabled: page === 0,
       "aria-label": "first page",
-      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/previous.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/previous.svg`
     }), /* @__PURE__ */ jsx(IconButton, {
       dictionaryTooltip: "pager.next",
       onClick: handleNextButtonClick,
       disabled: page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": "next page",
-      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/next.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/next.svg`
     }), /* @__PURE__ */ jsx(IconButton, {
       dictionaryTooltip: "pager.last",
       onClick: handleLastPageButtonClick,
       disabled: page >= Math.ceil(count / rowsPerPage) - 1,
       "aria-label": "last page",
-      src: `${host_static_assets}/${environment}/frontend/components/pager/assets/icons/last.svg`
+      src: `${host_static_assets}/${environment_assets}/frontend/components/pager/assets/icons/last.svg`
     })]
   });
 }

package/dist/contexts/ModalContext/index.js

@@ -47,11 +47,11 @@ const ContentConfirm = (props) => {
   } = props;
   const {
     host_static_assets,
-    environment
+    environment_assets
   } = useEnvironment();
-  const illustrationWarning = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
-  const illustrationError = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
-  const illustrationInfo = `${host_static_assets}/${environment}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
+  const illustrationWarning = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_warning.svg`;
+  const illustrationError = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_danger.svg`;
+  const illustrationInfo = `${host_static_assets}/${environment_assets}/frontend/components/dialog/assets/icons/illustration_confirm_info.svg`;
   return /* @__PURE__ */ jsx(WrapperContentConfirm, {
     children: /* @__PURE__ */ jsxs(ModalContent, {
       children: [/* @__PURE__ */ jsx(IllustrationContainer, {

package/dist/vendor.js

@@ -15,10 +15,11 @@ import "./components/hook-form/RHFDateTime.js";
 import "@mui/x-date-pickers";
 import "./components/hook-form/RHFTextField/index.js";
 import "./lodash.js";
-import "./react-lazy-load-image-component.js";
 import { styled } from "@mui/material/styles";
+import "./react-lazy-load-image-component.js";
 import "./components/Image/index.js";
 import "./components/hook-form/RHFUpload.js";
+import "./components/Icon/index.js";
 import "./components/mui_extended/LoadingButton/index.js";
 import "./components/mui_extended/MenuPopover/index.js";
 import "./components/mui_extended/MenuActions/index.js";
@@ -32,7 +33,6 @@ import "react-dnd-html5-backend";
 import "date-fns";
 import "./components/ScrollBar/index.js";
 import "./components/DynamicFilter/index.js";
-import "./components/Icon/index.js";
 import "./simplebar.js";
 import "yup";
 import "./components/FormActions/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.34",
+  "version": "0.0.37",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",
@@ -14,14 +14,13 @@
     "format": "npm run prettier:fix && npm run lint:fix"
   },
   "dependencies": {
+    "@m4l/graphics": "^0.0.28",
     "react": "^17.0.0 || 18.x",
     "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^2.9.5",
-    "@m4l/core": "^0.0.32",
-    "@m4l/graphics": "^0.0.24",
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
     "@mui/x-date-pickers": "^5.0.0-beta.0",
@@ -42,8 +41,6 @@
   "devDependencies": {
     "@emotion/styled": "^11.9.3",
     "@hookform/resolvers": "^2.9.5",
-    "@m4l/core": "^0.0.32",
-    "@m4l/graphics": "^0.0.24",
     "@mui/lab": "^5.0.0-alpha.89",
     "@mui/material": "^5.8.7",
     "@mui/x-date-pickers": "^5.0.0-beta.0",

package/dist/components/DynamicFilter/components/PopupEditFilter/components/BooleanFilter/index.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function BooleanFilter(): JSX.Element;

package/dist/components/DynamicFilter/components/PopupEditFilter/components/DateTimeFilter/index.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function DateTimeFilter(): JSX.Element;

package/dist/components/DynamicFilter/components/PopupEditFilter/components/StringFilter/index.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function StringFilter(): JSX.Element;