@m4l/components 0.0.59 → 0.0.62

package/dist/components/CommonActions/components/Actions/index.js

@@ -110,7 +110,7 @@ function MenuActions(props) {
         dense: true,
         onClick: () => handleClick(menuAction),
         sx: {
-          color: menuAction.color ? menuAction.color : "text.main"
+          color: menuAction.color ?? "text.main"
         },
         disabled: menuAction.disabled,
         children: [/* @__PURE__ */ jsx(Icon, {

package/dist/components/DynamicFilter/components/ApplyedFilters/components/ApplyedFilter/styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export declare const WrapperApplyedFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AplyedFilterStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ContainerField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const ContainerOperator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const ContainerOperands: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const WrapperApplyedFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AplyedFilterStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContainerField: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerOperator: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const ContainerOperands: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/components/DynamicFilter/index.js

@@ -1,5 +1,5 @@
 import { S as ScrollBar } from "../ScrollBar/index.js";
-import { styled, alpha } from "@mui/material/styles";
+import { styled, alpha as alpha$1 } from "@mui/material/styles";
 import require$$0, { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
 import { useModuleDictionary, useHostTools, useEnvironment, voidFunction, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
@@ -7,7 +7,7 @@ import { useFormContext, useWatch } from "react-hook-form";
 import { F as FormProvider } from "../hook-form/FormProvider/index.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { R as RHFAutocomplete } from "../../vendor.js";
-import { styled as styled$1, Skeleton, MenuItem, useTheme, Popper } from "@mui/material";
+import { alpha, styled as styled$1, Skeleton, MenuItem, useTheme, Popper } from "@mui/material";
 import "../hook-form/RHFAutocompleteAsync/index.js";
 import "../hook-form/RHFCheckbox/index.js";
 import { R as RHFDateTime } from "../hook-form/RHFDateTime.js";
@@ -33,8 +33,8 @@ const WrapperApplyedFilters = styled("div")(({
   theme
 }) => ({
   width: "100%",
-  margin: theme.spacing(0, 1.5),
-  paddingLeft: theme.spacing(1.5),
+  margin: theme.spacing(0, 1),
+  paddingLeft: theme.spacing(1),
   borderLeft: `1px solid ${theme.palette.divider}`
 }));
 const ContainerApplyedFilters = styled("div")(({
@@ -1047,8 +1047,11 @@ const WrapperApplyedFilter = styled("div")(({
   alignItems: "center",
   height: "100%",
   minHeight: theme.spacing(3),
-  padding: theme.spacing(0, 1),
-  backgroundColor: theme.palette.action.disabledBackground,
+  paddingLeft: theme.spacing(1),
+  backgroundColor: theme.palette.grid?.sectionHeader,
+  border: "1px solid",
+  borderColor: alpha(`${theme.palette.divider}`, 0.1),
+  overflow: "visible",
   borderRadius: theme.spacing(1),
   "&.waf_no_setted": {
     border: `1px solid ${theme.palette.error.main}`
@@ -1098,13 +1101,13 @@ function ApplyedFilter(props) {
     removeFilter,
     showPopupForEditFilter,
     hidePopupEdit,
-    getFieldByName,
-    isSkeleton
+    getFieldByName
   } = useBase();
   const {
     host_static_assets,
     environment_assets
   } = useEnvironment();
+  useModuleDictionary();
   const field = useMemo(() => {
     return getFieldByName(fieldName);
   }, [getFieldByName]);
@@ -1143,8 +1146,9 @@ function ApplyedFilter(props) {
       })]
     }), !fixed && /* @__PURE__ */ jsx(IconButton, {
       size: "small",
-      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close_filter.svg`,
-      onClick: onDelete
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+      onClick: onDelete,
+      dictionaryTooltip: "dynamic_filter.tooltip_clear_filter"
     })]
   });
 }
@@ -1208,7 +1212,8 @@ const ClearFilters = () => {
     return /* @__PURE__ */ jsx(WrapperClearFilters, {
       children: /* @__PURE__ */ jsx(IconButton, {
         src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
-        onClick: clearFilters
+        onClick: clearFilters,
+        dictionaryTooltip: "dynamic_filter.tooltip_clear_filters"
       })
     });
   }
@@ -1222,14 +1227,9 @@ const SKTWrapperFilterButton = styled("div")(({
   alignItems: "center",
   minWidth: theme.spacing(3.75),
   height: theme.spacing(3.75),
-  background: alpha(theme.palette.primary.main, 0.3)
+  background: alpha$1(theme.palette.primary.main, 0.3)
 }));
-const WrapperFilterButton = styled("div")(({
-  theme
-}) => ({
-  paddingRight: theme.spacing(0.75),
-  marginRight: theme.spacing(0.75),
-  borderRight: `1px solid ${theme.palette.divider}`,
+const WrapperFilterButton = styled("div")(() => ({
   "&.isDirty": {
     animationName: "dirtyEffect",
     animationDuration: "1s",
@@ -1300,6 +1300,9 @@ const WrapperInputFilter = styled("div")(({
   alignItems: "center",
   width: "100%",
   height: theme.spacing(3),
+  borderLeft: `1px solid ${theme.palette.divider}`,
+  paddingLeft: theme.spacing(1),
+  marginLeft: theme.spacing(1),
   [theme.breakpoints.up("sm")]: {
     width: theme.spacing(25)
   }

package/dist/components/Icon/index.js

@@ -1,11 +1,14 @@
-import { styled, useTheme } from "@mui/material";
-import { useState, useMemo, useEffect } from "react";
+import { styled } from "@mui/material";
+import { useState, useEffect } from "react";
+import { useTheme } from "@mui/material/styles";
+import { g as getPaletteColor } from "../../vendor.js";
 import { jsx } from "react/jsx-runtime";
-const MaskIcon = styled("div", {
+const DivIcon = styled("div", {
   shouldForwardProp: (props) => props !== "src" && props !== "width" && props !== "height" && props !== "bgColor"
 })((props) => ({
   maskPosition: "center!important",
   maskRepeat: "no-repeat!important",
+  WebkitMaskRepeat: "no-repeat!important",
   width: props.width === void 0 ? "20px" : props.width,
   height: props.height === void 0 ? "20px" : props.height,
   backgroundColor: props.bgColor,
@@ -26,31 +29,10 @@ function Icon(props) {
     src,
     width = "16px",
     height = "16px",
-    bgColor = "active"
+    bgColor = "action.active"
   } = props;
   const [resource, setResource] = useState(void 0);
   const theme = useTheme();
-  const finalBgColor = useMemo(() => {
-    if (bgColor === "active") {
-      return theme.palette.action.active;
-    }
-    if (bgColor === "selected") {
-      return theme.palette.primary.main;
-    }
-    if (bgColor === "info") {
-      return theme.palette.info.main;
-    }
-    if (bgColor === "warning") {
-      return theme.palette.warning.main;
-    }
-    if (bgColor === "error") {
-      return theme.palette.error.main;
-    }
-    if (bgColor === "disabled") {
-      return theme.palette.action.disabled;
-    }
-    return bgColor;
-  }, [bgColor]);
   useEffect(() => {
     let mounted = true;
     (async function networkOperation() {
@@ -60,9 +42,10 @@ function Icon(props) {
         xml = xml.match(/(<svg\b[^>]*\s*(viewBox="(\b[^"]*)").*?>([\s\S]*?)<\/svg>|<svg>([\s\S]*?)<\/svg>)/g)?.toString() || "";
         if (mounted) {
           setResource(window.btoa(xml));
+          console.log("value icon set resource", resource);
         }
       }).catch((_err) => {
-        console.log("error icon");
+        console.log("error icon", _err);
       });
     })();
     return function clenUp() {
@@ -70,15 +53,16 @@ function Icon(props) {
     };
   }, [src]);
   const placeHolder = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI2LjMuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDcwIDcwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA3MCA3MDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiM2MzczODE7fQo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NSw4LjdjMS40LTEuNSwzLjQtMi4zLDUuNC0yLjNzMy45LDAuOCw1LjQsMi4zczIuNCwzLjUsMi41LDUuN2MwLDIuMi0wLjksNC4yLTIuNCw1LjdzLTMuNSwyLjMtNS41LDIuMgoJCWMtMi4xLDAuMS00LTAuNy01LjUtMi4yYy0xLjQtMS41LTIuMy0zLjUtMi40LTUuN0M0Mi42LDEyLjIsNDMuNSwxMC4yLDQ1LDguN3oiLz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02OC40LDYyLjFjLTAuMywwLjUtMC43LDAuOC0xLjIsMS4xcy0xLDAuNC0xLjYsMC40SDQuM2MtMC42LDAtMS4xLTAuMS0xLjYtMC40cy0wLjktMC42LTEuMi0xLjEKCQljLTAuMi0wLjUtMC40LTEtMC40LTEuNXMwLjEtMS4xLDAuNC0xLjVsMjMtMzYuNGMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNHMwLjksMC42LDEuMiwxLjEKCQlsMTEuNSwxOC4yYzAuMiwwLjMsMC41LDAuNSwwLjgsMC43czAuNiwwLjMsMSwwLjNjMC4zLDAsMC43LTAuMSwxLTAuM3MwLjYtMC40LDAuOC0wLjdsMy4xLTQuOWMwLjMtMC41LDAuNy0wLjgsMS4yLTEuMQoJCXMxLTAuNCwxLjYtMC40czEuMSwwLjEsMS42LDAuNGMwLjUsMC4zLDAuOSwwLjYsMS4yLDEuMWwxNC42LDIzLjFjMC4zLDAuNSwwLjMsMSwwLjMsMS41UzY4LjcsNjEuNyw2OC40LDYyLjF6Ii8+CjwvZz4KPC9zdmc+Cg==";
+  console.log("value for getColor", getPaletteColor(theme.palette, "error.main"));
   return /* @__PURE__ */ jsx(WrapperPlaceHolder, {
     id: "IconReact",
     width,
     height,
-    children: resource ? /* @__PURE__ */ jsx(MaskIcon, {
+    children: resource ? /* @__PURE__ */ jsx(DivIcon, {
       src: resource,
       width,
       height,
-      bgColor: finalBgColor
+      bgColor: getPaletteColor(theme.palette, bgColor)
     }) : /* @__PURE__ */ jsx("img", {
       src: placeHolder,
       alt: "icon_svg"

package/dist/components/Icon/styles.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { WrapperPlaceHolderProps } from './types';
-export declare const MaskIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("./types").OwnProps & import("react").HTMLProps<HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DivIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & import("./types").OwnProps & import("react").HTMLProps<HTMLDivElement>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const WrapperPlaceHolder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & WrapperPlaceHolderProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/ModalDialog/index.js

@@ -2,7 +2,7 @@ import { Dialog, IconButton, Paper } from "@mui/material";
 import { D as Draggable } from "../../react-draggable.js";
 import { u as useModal } from "../../hooks/useModal/index.js";
 import { styled } from "@mui/material/styles";
-import { g as getThemeVariantColor } from "../../vendor.js";
+import { a as getThemeVariantColor } from "../../vendor.js";
 import { R as Resizeable } from "../Resizeable/index.js";
 import { useResponsiveDesktop } from "@m4l/graphics";
 import { useEnvironment } from "@m4l/core";

package/dist/components/ObjectLogs/index.js

@@ -115,7 +115,7 @@ function DetailFormatter(props) {
     });
   };
   return /* @__PURE__ */ jsx(Tooltip, {
-    title: "filtrar",
+    title: getLabel("object_logs.view_log_detail"),
     children: /* @__PURE__ */ jsx(IconButton, {
       onClick: onClickDetail,
       "aria-label": "filter",
@@ -133,6 +133,10 @@ function ObjectLogs(props) {
   const {
     getLabel
   } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
   const [queryParams, setQueryParams] = useState({
     resource_id,
     object_id
@@ -212,28 +216,28 @@ function ObjectLogs(props) {
           type: "datetime",
           multiple: false,
           presence: "fixed",
-          urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg"
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
         }, {
           name: "users.email",
           label: getLabel("object_logs.email"),
           type: "string",
           multiple: true,
           presence: "optional",
-          urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg"
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/email.svg`
         }, {
           name: "user_logs.log_preview",
           label: getLabel("object_logs.log_preview"),
           type: "string",
           multiple: true,
           presence: "optional",
-          urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg"
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_preview.svg`
         }, {
           name: "user_logs.log_detail",
           label: getLabel("object_logs.log_detail"),
           type: "string",
           multiple: true,
           presence: "optional",
-          urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg"
+          urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/object_logs/assets/icons/log_detail.svg`
         }],
         initialFilters: []
       })

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

@@ -64,7 +64,7 @@ function IconButton({
   tooltip,
   size = "small",
   dictionaryTooltip,
-  bgColor = "active",
+  bgColor = "primary.active",
   ...other
 }) {
   const {
@@ -92,7 +92,7 @@ function IconButton({
         ...other,
         children: /* @__PURE__ */ jsx(Icon, {
           src,
-          bgColor: other.disabled ? "disabled" : bgColor
+          bgColor: other.disabled ? "action.disabled" : bgColor
         })
       })
     })
@@ -101,7 +101,7 @@ function IconButton({
     ...other,
     children: /* @__PURE__ */ jsx(Icon, {
       src,
-      bgColor: other.disabled ? "disabled" : bgColor
+      bgColor: other.disabled ? "action.disabled" : bgColor
     })
   });
 }

package/dist/contexts/ModalContext/index.js

@@ -7,7 +7,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { M as ModalDialog } from "../../components/ModalDialog/index.js";
 import { A as ActionIntro } from "../../components/CommonActions/components/ActionIntro/index.js";
 import { A as ActionCancel } from "../../components/CommonActions/components/ActionCancel/index.js";
-import { a as getVariantColor } from "../../vendor.js";
+import { b as getVariantColor } from "../../vendor.js";
 const WrapperContentConfirm = styled("div")(() => ({
   display: "flex",
   flexDirection: "column",
@@ -116,7 +116,7 @@ function ModalProvider({
       title,
       msg,
       onClickIntro,
-      onClickCancel
+      onClickCancel = closeModal
     } = modalOpenConfirmProps;
     const onClickIntroClose = () => {
       onClickIntro && onClickIntro();

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
-import { Theme } from '@mui/material/styles';
+import { Palette, Theme } from '@mui/material/styles';
 import { VariantColor } from './types';
+export declare const getPaletteColor: (palette: Palette, s: string) => any;
 export declare const getVariantColor: (variant: VariantColor | undefined) => "warning" | "info" | "primary" | "error";
 export declare const getThemeVariantColor: (theme: Theme, variant: VariantColor | undefined) => string;

package/dist/vendor.js

@@ -202,6 +202,25 @@ function RHFAutocomplete(props) {
     }
   });
 }
+const getPaletteColor = function(palette, s) {
+  s = s.replace(/\[(\w+)\]/g, ".$1");
+  console.log("value of s first", s, palette);
+  s = s.replace(/^\./, "");
+  console.log("value of s second", s);
+  let o = palette;
+  const a = s.split(".");
+  console.log();
+  for (let i = 0, n = a.length; i < n; ++i) {
+    const k = a[i];
+    if (k in o) {
+      o = o[k];
+      console.log("value of lenght", o);
+    } else {
+      return palette.action.active;
+    }
+  }
+  return o;
+};
 const getVariantColor = (variant) => {
   switch (variant) {
     case "warning":
@@ -245,4 +264,4 @@ const Button = (props) => {
     ...props
   });
 };
-export { Button as B, RHFAutocomplete as R, getVariantColor as a, getThemeVariantColor as g };
+export { Button as B, RHFAutocomplete as R, getThemeVariantColor as a, getVariantColor as b, getPaletteColor as g };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.59",
+  "version": "0.0.62",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",
@@ -14,7 +14,7 @@
     "format": "npm run prettier:fix && npm run lint:fix"
   },
   "dependencies": {
-    "@m4l/graphics": "^0.0.38",
+    "@m4l/graphics": "^0.0.39",
     "react": "^17.0.0 || 18.x",
     "react-dom": "^18.0.0",
     "react-draggable": "^4.4.5",