@m4l/components 0.0.36 → 0.0.37

package/dist/components/CompanyLogo/index.js

@@ -15,7 +15,6 @@ styled("header")(({
   theme
 }) => ({
   top: 0,
-  zIndex: 9,
   lineHeight: 0,
   width: "100%",
   display: "flex",

package/dist/components/DynamicFilter/components/FilterButton/styles.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 export declare const SKTWrapperFilterButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const InputFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const WrapperFilterButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FilterFieldApply, Field } from '../../../types';
+export declare const getDefaultBooleanFilter: (field: Field, fixed: boolean, getLabel: (key: string) => string) => FilterFieldApply;
+export declare function BooleanFilter(): JSX.Element;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FilterFieldApply, Field } from '../../../types';
+export declare const getDefaultDateTimeFilter: (field: Field, fixed: boolean, getLabel: (key: string) => string) => FilterFieldApply;
+export declare function DateTimeFilter(): JSX.Element;

package/dist/components/DynamicFilter/components/fieldstypes/NumberFilter/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FilterFieldApply, Field } from '../../../types';
+export declare const getDefaultNumberFilter: (field: Field, fixed: boolean, getLabel: (key: string) => string) => FilterFieldApply;
+export declare function NumberFilter(): JSX.Element;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { Field, FilterFieldApply } from '../../../types';
+export declare const getDefaultStringFilter: (field: Field, fixed: boolean, getLabel: (key: string) => string) => FilterFieldApply;
+export declare function StringFilter(): JSX.Element;

package/dist/components/DynamicFilter/components/fieldstypes/StringFilter/styles.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const WrapperStringFilter: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const WrapperAutoComplete: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/DynamicFilter/components/{PopupEditFilter/components → fieldstypes}/factory.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import type { FilterFieldApply, Field, Operator } from '../../../types';
-export declare const getDefaultFilterValues: (field: Field, fixed: boolean, getLabelOperator: (operator: Operator) => string) => FilterFieldApply;
+import type { FilterFieldApply, Field } from '../../types';
+export declare const getDefaultFilterValues: (field: Field, fixed: boolean, getLabel: (key: string) => string) => FilterFieldApply;
 export declare const PopupEditFilterComponent: (props: {
     filter: FilterFieldApply;
 }) => JSX.Element;

package/dist/components/DynamicFilter/components/{PopupEditFilter/components → fieldstypes}/validations.d.ts

@@ -1,4 +1,4 @@
-import { InitialFilterFieldApply } from '../../../types';
+import { InitialFilterFieldApply } from '../../types';
 export declare function isValidDate(d: any): any;
 export declare const verifyStringFilter: (filter: InitialFilterFieldApply) => boolean;
 export declare const verifyBooleanFilter: (filter: InitialFilterFieldApply) => boolean;

package/dist/components/DynamicFilter/index.js

@@ -1,5 +1,5 @@
 import { S as ScrollBar } from "../ScrollBar/index.js";
-import { styled } from "@mui/material/styles";
+import { styled, alpha } from "@mui/material/styles";
 import { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
 import { useModuleDictionary, useEnvironment, voidFunction, useHostTools, useFlagsPresent } from "@m4l/core";
 import * as Yup from "yup";
@@ -44,6 +44,7 @@ const ContainerApplyedFilters = styled("div")(({
   gap: theme.spacing(1.5)
 }));
 const STRING_OPERATORS = ["c", "nc"];
+const NUMBER_OPERATORS = ["b", "e", "ne", "gt", "gte", "lt", "lte"];
 const BOOLEAN_OPERATORS = ["e", "ne"];
 const DATE_TIME_OPERATORS = [
   "b",
@@ -56,13 +57,13 @@ const DATE_TIME_OPERATORS = [
 ];
 const ALL_FIELDS = {
   name: "all",
-  label: "filter.all_fields",
+  label: "dynamic_filter.all_fields",
   urlIcon: "https://s3.amazonaws.com/static.made4labs/environments/d1/frontend/components/icon/assets/icons/default.svg",
   type: "string",
   multiple: true,
   fixed: false
 };
-const WrapperStringFilter = styled("div")(({
+const WrapperStringFilter$1 = styled("div")(({
   theme
 }) => ({
   display: "flex",
@@ -74,9 +75,29 @@ const WrapperStringFilter = styled("div")(({
   padding: theme.spacing(3, 0),
   gap: theme.spacing(3)
 }));
-const WrapperAutoComplete$2 = styled("div")(() => ({
+const WrapperAutoComplete$3 = styled("div")(() => ({
   width: "100%"
 }));
+const getDefaultStringFilter = (field, fixed, getLabel) => {
+  const dfop1 = field.defaultOperand1;
+  const defaultFilter = {
+    id: 0,
+    fieldName: field.name,
+    fixed,
+    isSetted: false,
+    operator: "c",
+    labelOperator: "",
+    operand1: "",
+    operand2: "",
+    labelOperands: ""
+  };
+  if (dfop1 !== void 0 && typeof dfop1 === "string") {
+    defaultFilter.operand1 = dfop1;
+  }
+  defaultFilter.labelOperands = defaultFilter.operand1 + "";
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.operator}`);
+  return defaultFilter;
+};
 function StringFilter() {
   const {
     popupData: {
@@ -134,9 +155,9 @@ function StringFilter() {
     console.debug("InputRef", inputRef);
     inputRef.current?.focus();
   }, [isLoaded]);
-  return /* @__PURE__ */ jsx(WrapperStringFilter, {
+  return /* @__PURE__ */ jsx(WrapperStringFilter$1, {
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$2, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$3, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
           name: "valueOperator",
           autoComplete: "off",
@@ -166,9 +187,29 @@ const WrapperAllFieldsFilter$1 = styled("div")(({
   padding: theme.spacing(3, 0),
   gap: theme.spacing(3)
 }));
-const WrapperAutoComplete$1 = styled("div")(() => ({
+const WrapperAutoComplete$2 = styled("div")(() => ({
   width: "100%"
 }));
+const getDefaultBooleanFilter = (field, fixed, getLabel) => {
+  const dfop1 = field.defaultOperand1;
+  const defaultFilter = {
+    id: 0,
+    fieldName: field.name,
+    fixed,
+    isSetted: true,
+    operator: "e",
+    labelOperator: "",
+    operand1: true,
+    operand2: "",
+    labelOperands: ""
+  };
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.operator}`);
+  if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
+    defaultFilter.operand1 = dfop1;
+  }
+  defaultFilter.labelOperands = getLabel(`dynamic_filter.operand_${defaultFilter.operand1}`);
+  return defaultFilter;
+};
 function BooleanFilter() {
   const {
     setPoupEditValidationSchema,
@@ -194,10 +235,10 @@ function BooleanFilter() {
   })), [getLabelOperator]);
   const optionsYesNo = useMemo(() => [{
     value: true,
-    label: getLabel("filter.operand_true")
+    label: getLabel("dynamic_filter.operand_true")
   }, {
     value: false,
-    label: getLabel("filter.operand_false")
+    label: getLabel("dynamic_filter.operand_false")
   }], [getLabel]);
   const transformFunctionFormValuesToValues = useCallback((data) => {
     if (!filter || !field)
@@ -225,7 +266,7 @@ function BooleanFilter() {
     if (filter && field) {
       setValue("valueOperand1", {
         value: filter.operand1,
-        label: getLabel(`filter.operand_${filter.operand1}`)
+        label: getLabel(`dynamic_filter.operand_${filter.operand1}`)
       }, {
         shouldTouch: false,
         shouldValidate: false
@@ -236,7 +277,7 @@ function BooleanFilter() {
   return /* @__PURE__ */ jsx(WrapperAllFieldsFilter$1, {
     id: "WrapperAllFieldsFilter",
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$1, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$2, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
           name: "valueOperator",
           autoComplete: "off",
@@ -245,7 +286,7 @@ function BooleanFilter() {
           isOptionEqualToValue: (option, value) => option.id === value.id,
           label: ""
         })
-      }), /* @__PURE__ */ jsx(WrapperAutoComplete$1, {
+      }), /* @__PURE__ */ jsx(WrapperAutoComplete$2, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
           name: "valueOperand1",
           autoComplete: "off",
@@ -270,9 +311,93 @@ const WrapperAllFieldsFilter = styled("div")(({
   padding: theme.spacing(3, 0),
   gap: theme.spacing(3)
 }));
-const WrapperAutoComplete = styled("div")(() => ({
+const WrapperAutoComplete$1 = styled("div")(() => ({
   width: "100%"
 }));
+function isValidDate(d) {
+  return d && d instanceof Date;
+}
+const verifyStringFilter = (filter) => {
+  if (typeof filter.operator !== "string") {
+    return false;
+  }
+  if (STRING_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+    return false;
+  }
+  if (typeof filter.operand1 !== "string") {
+    return false;
+  }
+  return true;
+};
+const verifyBooleanFilter = (filter) => {
+  if (typeof filter.operator !== "string") {
+    return false;
+  }
+  if (BOOLEAN_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+    return false;
+  }
+  if (typeof filter.operand1 !== "boolean") {
+    return false;
+  }
+  return true;
+};
+const verifyDateTime = (filter) => {
+  if (typeof filter.operator !== "string") {
+    return false;
+  }
+  if (DATE_TIME_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+    return false;
+  }
+  if (typeof filter.operand1 !== "string") {
+    return false;
+  }
+  if (filter.operator === "b" && typeof filter.operand2 !== "string") {
+    return false;
+  }
+  return true;
+};
+const getDefaultDateTimeFilter = (field, fixed, getLabel) => {
+  const defaultStartDate = new Date();
+  const defaultEndDate = new Date();
+  let dfop1 = field.defaultOperand1;
+  let dfop2 = field.defaultOperand2;
+  const defaultFilter = {
+    id: 0,
+    fieldName: field.name,
+    fixed,
+    isSetted: true,
+    operator: "b",
+    labelOperator: "",
+    operand1: dfop1,
+    operand2: dfop2,
+    labelOperands: ""
+  };
+  if (dfop1) {
+    if (isValidDate(dfop1)) {
+      defaultStartDate.setDate(dfop1.getDate());
+    } else {
+      dfop1 = void 0;
+    }
+  }
+  if (dfop1 === void 0) {
+    defaultStartDate.setHours(0, 0, 0, 0);
+  }
+  if (dfop2) {
+    if (isValidDate(dfop2)) {
+      defaultEndDate.setDate(dfop2.getDate());
+    } else {
+      dfop2 = void 0;
+    }
+  }
+  if (dfop2 === void 0) {
+    defaultEndDate.setHours(23, 59, 59, 999);
+  }
+  defaultFilter.operand1 = defaultStartDate.toISOString();
+  defaultFilter.operand2 = defaultEndDate.toISOString();
+  defaultFilter.labelOperands = `${format(defaultStartDate, "yyyy-MM-dd HH:mm:ss")} - ${format(defaultEndDate, "yyyy-MM-dd HH:mm:ss")}`;
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.operator}`);
+  return defaultFilter;
+};
 function DateTimeFilter() {
   const {
     setPoupEditValidationSchema,
@@ -333,12 +458,12 @@ function DateTimeFilter() {
     if (!isLoaded) {
       setPoupEditValidationSchema({
         valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
-        valueOperand1: Yup.date().test("valueOperand1", getLabel(`filter.error_invalid_date1`), (value) => {
+        valueOperand1: Yup.date().test("valueOperand1", getLabel(`dynamic_filter.error_invalid_date1`), (value) => {
           return Boolean(value);
         }),
         valueOperand2: Yup.date().when(["valueOperator.id"], {
           is: "b",
-          then: Yup.date().test("DOB", getLabel(`filter.error_invalid_date2`), (value) => {
+          then: Yup.date().test("DOB", getLabel(`dynamic_filter.error_invalid_date2`), (value) => {
             return Boolean(value);
           })
         })
@@ -359,7 +484,7 @@ function DateTimeFilter() {
   }, [getLabel, filter, field]);
   return /* @__PURE__ */ jsx(WrapperAllFieldsFilter, {
     children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(WrapperAutoComplete, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$1, {
         children: /* @__PURE__ */ jsx(RHFAutocomplete, {
           name: "valueOperator",
           autoComplete: "off",
@@ -371,7 +496,8 @@ function DateTimeFilter() {
       }), /* @__PURE__ */ jsx(RHFDateTime, {
         name: "valueOperand1",
         autoComplete: "off",
-        label: ""
+        label: "",
+        focused: true
       }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFDateTime, {
         name: "valueOperand2",
         autoComplete: "off",
@@ -380,108 +506,166 @@ function DateTimeFilter() {
     })
   });
 }
-function isValidDate(d) {
-  return d && d instanceof Date;
-}
-const verifyStringFilter = (filter) => {
-  if (typeof filter.operator !== "string") {
-    return false;
-  }
-  if (STRING_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
-    return false;
-  }
-  if (typeof filter.operand1 !== "string") {
-    return false;
-  }
-  return true;
-};
-const verifyBooleanFilter = (filter) => {
-  if (typeof filter.operator !== "string") {
-    return false;
-  }
-  if (BOOLEAN_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
-    return false;
-  }
-  if (typeof filter.operand1 !== "boolean") {
-    return false;
-  }
-  return true;
-};
-const verifyDateTime = (filter) => {
-  if (typeof filter.operator !== "string") {
-    return false;
-  }
-  if (DATE_TIME_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
-    return false;
-  }
-  if (typeof filter.operand1 !== "string") {
-    return false;
-  }
-  if (filter.operator === "b" && typeof filter.operand2 !== "string") {
-    return false;
-  }
-  return true;
-};
-const getDefaultFilterValues = (field, fixed, getLabelOperator) => {
-  const defaultStartDate = new Date();
-  const defaultEndDate = new Date();
-  let dfop1 = field.defaultOperand1;
-  let dfop2 = field.defaultOperand2;
+const WrapperStringFilter = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  minWidth: theme.spacing(3.75),
+  padding: theme.spacing(3, 0),
+  gap: theme.spacing(3)
+}));
+const WrapperAutoComplete = styled("div")(() => ({
+  width: "100%"
+}));
+const getDefaultNumberFilter = (field, fixed, getLabel) => {
+  const dfop1 = field.defaultOperand1;
+  const dfop2 = field.defaultOperand2;
   const defaultFilter = {
     id: 0,
     fieldName: field.name,
     fixed,
     isSetted: false,
-    operator: "c",
+    operator: "e",
     labelOperator: "",
     operand1: "",
+    operand2: "",
     labelOperands: ""
   };
+  if (dfop1 !== void 0 && typeof dfop1 === "number") {
+    defaultFilter.operand1 = dfop1;
+    defaultFilter.labelOperands = defaultFilter.operand1;
+  }
+  if (dfop2 !== void 0 && typeof dfop2 === "number") {
+    defaultFilter.operand2 = dfop2;
+  }
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.operator}`);
+  return defaultFilter;
+};
+function NumberFilter() {
+  const {
+    popupData: {
+      filter,
+      field
+    },
+    setPoupEditValidationSchema,
+    setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
+    getLabelOperator
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const inputRef = useRef(null);
+  const {
+    control,
+    setValue
+  } = useFormContext();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const operator = useWatch({
+    control,
+    name: "valueOperator"
+  });
+  const options = useMemo(() => NUMBER_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabelOperator(o)
+  })), [getLabelOperator]);
+  const transformFunctionFormValuesToValues = useCallback((data) => {
+    if (!filter || !field)
+      return void 0;
+    const newFilter = {
+      id: filter.id,
+      fieldName: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      operator: data.valueOperator.id,
+      operand1: Number(data.valueOperand1),
+      operand2: data.valueOperand2,
+      labelOperator: data.valueOperator.label,
+      labelOperands: data.valueOperand1
+    };
+    if (data.valueOperator.id === "b") {
+      newFilter.labelOperands = `${data.valueOperand1} - ${data.valueOperand2}`;
+      newFilter.operand2 = Number(data.valueOperand2);
+    } else {
+      newFilter.operand2 = void 0;
+    }
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.operator_required`)),
+        valueOperand1: Yup.number().typeError(getLabel(`dynamic_filter.operand_mustbe_number`)),
+        valueOperand2: Yup.string().when("valueOperator", {
+          is: (o) => {
+            console.log("valueOperand2", o);
+            return o.id === "b";
+          },
+          then: Yup.string().test("DOB", getLabel(`dynamic_filter.operand_mustbe_number`), (value) => {
+            console.log("imprimir", value);
+            if (value === "")
+              return false;
+            return !isNaN(Number(value));
+          })
+        })
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    if (filter && field) {
+      setValue("valueOperand1", filter.operand1, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+      setValue("valueOperand2", filter.operand2, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+    }
+    setIsLoaded(true);
+  }, [getLabel, filter, field]);
+  useEffect(() => {
+    console.debug("InputRef", inputRef);
+    inputRef.current?.focus();
+  }, [isLoaded]);
+  return /* @__PURE__ */ jsx(WrapperStringFilter, {
+    children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete, {
+        children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "valueOperator",
+          autoComplete: "off",
+          options,
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          label: ""
+        })
+      }), /* @__PURE__ */ jsx(RHFTextField, {
+        name: "valueOperand1",
+        ref: inputRef,
+        focused: true
+      }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFTextField, {
+        name: "valueOperand2",
+        ref: inputRef
+      })]
+    })
+  });
+}
+const getDefaultFilterValues = (field, fixed, getLabel) => {
   switch (field.type) {
     case "string":
-      break;
+      return getDefaultStringFilter(field, fixed, getLabel);
     case "number":
+      return getDefaultNumberFilter(field, fixed, getLabel);
     case "boolean":
-      defaultFilter.operator = "e";
-      if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
-        defaultFilter.operand1 = dfop1;
-      } else {
-        defaultFilter.operand1 = true;
-      }
-      break;
+      return getDefaultBooleanFilter(field, fixed, getLabel);
     case "time":
     case "date":
     case "datetime":
-      if (dfop1) {
-        if (isValidDate(dfop1)) {
-          defaultStartDate.setDate(dfop1.getDate());
-        } else {
-          dfop1 = void 0;
-        }
-      }
-      if (dfop1 === void 0) {
-        defaultStartDate.setHours(0, 0, 0, 0);
-      }
-      if (dfop2) {
-        if (isValidDate(dfop2)) {
-          defaultEndDate.setDate(dfop2.getDate());
-        } else {
-          dfop2 = void 0;
-        }
-      }
-      if (dfop2 === void 0) {
-        defaultEndDate.setHours(23, 59, 59, 999);
-      }
-      defaultFilter.operator = "b";
-      defaultFilter.operand1 = defaultStartDate.toISOString();
-      defaultFilter.operand2 = defaultEndDate.toISOString();
-      defaultFilter.labelOperands = `${format(defaultStartDate, "yyyy-MM-dd HH:mm:ss")} - ${format(defaultEndDate, "yyyy-MM-dd HH:mm:ss")}`;
-      defaultFilter.isSetted = true;
-      break;
+      return getDefaultDateTimeFilter(field, fixed, getLabel);
   }
-  defaultFilter.labelOperator = getLabelOperator(defaultFilter.operator);
-  console.log("operator", defaultFilter);
-  return defaultFilter;
+  throw new Error("Type no defined");
 };
 const PopupEditFilterComponent = (props) => {
   const {
@@ -493,6 +677,8 @@ const PopupEditFilterComponent = (props) => {
   switch (field.type) {
     case "string":
       return /* @__PURE__ */ jsx(StringFilter, {});
+    case "number":
+      return /* @__PURE__ */ jsx(NumberFilter, {});
     case "boolean":
       return /* @__PURE__ */ jsx(BooleanFilter, {});
     case "datetime":
@@ -551,7 +737,7 @@ const getRawFilter = (applyedFilter) => {
     o2: af.operand2
   }));
 };
-const getInitialFilters = (fields, filters, getFieldByName, getLabelOperator) => {
+const getInitialFilters = (fields, filters, getFieldByName, getLabel) => {
   const newFilters = [];
   const fixedFields = [];
   for (let index = 0; index < filters.length; index++) {
@@ -596,7 +782,7 @@ const getInitialFilters = (fields, filters, getFieldByName, getLabelOperator) =>
     const field = fields[index];
     if (field.fixed) {
       if (!filters.find((f) => f.fieldName === field.name)) {
-        const newFilter = getDefaultFilterValues(field, true, getLabelOperator);
+        const newFilter = getDefaultFilterValues(field, true, getLabel);
         newFilter.id = newFilters.length + 1;
         newFilters.push(newFilter);
       }
@@ -633,7 +819,7 @@ function BaseProvider(props) {
     return {
       ...ALL_FIELDS,
       label: getLabel("filter.all_fields"),
-      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/filter/assets/icons/all_fields.svg`
+      urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
     };
   }, [getLabel, host_static_assets, environment_assets]);
   const [inEdition, setInEdition] = useState(false);
@@ -648,9 +834,9 @@ function BaseProvider(props) {
     });
   }, [fields, all_fields]);
   const getLabelOperator = useCallback((operator) => {
-    return getLabel(`filter.operator_${operator}`);
+    return getLabel(`dynamic_filter.operator_${operator}`);
   }, [getLabel]);
-  const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabelOperator));
+  const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabel));
   const availableFields = useMemo(() => {
     const newFields = [];
     for (let index = 0; index < fields.length; index++) {
@@ -675,7 +861,7 @@ function BaseProvider(props) {
         setIsDirty(false);
       onChangeFilter(applyedFilters, getRawFilter(applyedFilters));
     } else {
-      toast(getLabel("filter.error_filters_no_setted"), {
+      toast(getLabel("dynamic_filter.error_filters_no_setted"), {
         type: "error",
         autoClose: 1e4
       });
@@ -693,7 +879,6 @@ function BaseProvider(props) {
       return;
     }
     if (!NoValid) {
-      console.log("Ingrese");
       setIsDirty(false);
       onChangeFilter(applyedFilters, getRawFilter(applyedFilters));
     }
@@ -758,7 +943,7 @@ function BaseProvider(props) {
   const showPopupForAddFilter = useCallback((anchorEl, field) => {
     setPopupData({
       popupAnchorEl: anchorEl,
-      filter: getDefaultFilterValues(field, false, getLabelOperator),
+      filter: getDefaultFilterValues(field, false, getLabel),
       field
     });
     setInEdition(true);
@@ -1015,28 +1200,27 @@ const SKTWrapperFilterButton = styled("div")(({
   justifyContent: "center",
   alignItems: "center",
   minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
-}));
-styled("div")(({
-  theme
-}) => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  minWidth: theme.spacing(3.75),
-  height: theme.spacing(3.75)
+  height: theme.spacing(3.75),
+  background: alpha(theme.palette.primary.main, 0.3)
 }));
 const WrapperFilterButton = styled("div")(() => ({
   "&.isDirty": {
+    animationName: "dirtyEffect",
+    animationDuration: "1s",
+    animationFillMode: "both",
+    animationIterationCount: "infinite",
+    transition: "all .3s",
     "@keyframes dirtyEffect": {
-      from: {
+      "20%": {
         opacity: 1
       },
-      to: {
-        opacity: 0
+      "50%": {
+        opacity: 0.5
+      },
+      "100%": {
+        opacity: 1
       }
-    },
-    animation: "dirtyEffect 2s infinite ease"
+    }
   },
   "&.isDirtyError": {}
 }));
@@ -1064,18 +1248,21 @@ function FilterButton() {
   }
   const color = useMemo(() => {
     if (automatic) {
-      return "default";
+      return "active";
     }
     if (!isValid) {
       return "error";
     }
-    return "primary";
+    return "selected";
   }, [automatic, isValid]);
+  console.log("Dynamic color value", color);
+  console.log("Dynamic automatic value", automatic);
   return /* @__PURE__ */ jsx(WrapperFilterButton, {
+    id: "WrapperFilterButton",
     className: isDirty && isValid ? "isDirty" : "",
     children: /* @__PURE__ */ jsx(IconButton, {
-      color,
-      dictionaryTooltip: "filter.filter_tooltip",
+      bgColor: color,
+      dictionaryTooltip: "dynamic_filter.filter_tooltip",
       onClick: () => fireOnChangeFilters(),
       "aria-label": "settings",
       src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/${automatic ? "refresh" : "search"}.svg`
@@ -1186,6 +1373,7 @@ function InputFilter() {
   if (!withAllField && availableFields.length == 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
+  console.log("availableFields test", availableFields.length);
   return /* @__PURE__ */ jsxs(WrapperInputFilter, {
     id: "WrapperInputFilter",
     children: [/* @__PURE__ */ jsx(StyledInputFilter, {
@@ -1195,7 +1383,7 @@ function InputFilter() {
       onClick: onClickFilter,
       onChange: onChangeFilter,
       onKeyPress: handleKeyPressMenu
-    }), /* @__PURE__ */ jsx(MenuPopover, {
+    }), availableFields.length > 0 && /* @__PURE__ */ jsx(MenuPopover, {
       id: "MenuPopover",
       open: Boolean(openAnchorEl),
       anchorEl: openAnchorEl,

package/dist/components/DynamicFilter/types.d.ts

@@ -1,10 +1,12 @@
 import { Maybe } from '@m4l/core';
 export declare type FieldType = 'number' | 'string' | 'boolean' | 'date' | 'datetime' | 'time' | 'select' | 'in';
 export declare type OperandType = number | string | boolean | Date | [] | object;
-export declare type Operator = 'e' | 'ne' | 'b' | 'gt' | 'gte' | 'lt' | 'lte' | 'c' | 'nc';
+export declare type Operator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte' | 'c' | 'nc';
 export declare const OPERATORS: Array<Operator>;
 export declare type StringOperator = 'c' | 'nc';
 export declare const STRING_OPERATORS: Array<StringOperator>;
+export declare type NumberOperator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
+export declare const NUMBER_OPERATORS: Array<NumberOperator>;
 export declare type BooleanOperator = 'e' | 'ne';
 export declare const BOOLEAN_OPERATORS: Array<BooleanOperator>;
 export declare type DateTimeOperator = 'b' | 'e' | 'ne' | 'gt' | 'gte' | 'lt' | 'lte';
@@ -32,7 +34,7 @@ export interface BaseApplyFilter {
 export interface ValuesFilter {
     operator: Operator;
     labelOperator: string;
-    labelOperands: string;
+    labelOperands: string | number;
     operand1?: Maybe<OperandType>;
     operand2?: Maybe<OperandType>;
 }

package/dist/components/Icon/index.js

@@ -1,4 +1,4 @@
-import { styled } from "@mui/material";
+import { styled, useTheme } from "@mui/material";
 import { useState, useEffect } from "react";
 import { jsx } from "react/jsx-runtime";
 const MaskIcon = styled("div", {
@@ -8,7 +8,7 @@ const MaskIcon = styled("div", {
   mask: `url(${props.src}) no-repeat`,
   width: props.width === void 0 ? "20px" : props.width,
   height: props.height === void 0 ? "20px" : props.height,
-  backgroundColor: props.bgColor === "active" ? props.theme.palette.action.active : props.bgColor === "selected" ? props.theme.palette.primary.main : props.bgColor === "info" ? props.theme.palette.info.main : props.bgColor === "warning" ? props.theme.palette.warning.main : props.bgColor === "error" ? props.theme.palette.warning.main : props.bgColor === "selected" ? props.theme.palette.primary.main : props.bgColor
+  backgroundColor: props.bgColor
 }));
 const WrapperPlaceHolder = styled("div", {
   shouldForwardProp: (props) => props !== "widht" && props !== "height"
@@ -20,13 +20,35 @@ const WrapperPlaceHolder = styled("div", {
   height: props.height
 }));
 function Icon(props) {
-  const [resource, setResource] = useState(void 0);
   const {
     src,
     width = "16px",
     height = "16px",
     bgColor = "active"
   } = props;
+  const [resource, setResource] = useState(void 0);
+  const theme = useTheme();
+  const getBgColor = () => {
+    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;
+  };
   useEffect(() => {
     let mounted = true;
     if (resource)
@@ -54,7 +76,7 @@ function Icon(props) {
       src: resource,
       width,
       height,
-      bgColor
+      bgColor: getBgColor()
     }) : /* @__PURE__ */ jsx("img", {
       src: placeHolder,
       alt: "icon_svg"

package/dist/components/NoItemSelected/index.js

@@ -19,7 +19,6 @@ const Image = styled("span", {
   src,
   theme
 }) => ({
-  zIndex: 9,
   top: 0,
   height: "100%",
   width: "100%",

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

@@ -64,6 +64,7 @@ function IconButton({
   tooltip,
   size = "small",
   dictionaryTooltip,
+  bgColor = "active",
   ...other
 }) {
   const {
@@ -72,9 +73,10 @@ function IconButton({
   const iconMemo = useMemo(() => {
     console.log("IconButton", size, other, src);
     return /* @__PURE__ */ jsx(Icon, {
-      src
+      src,
+      bgColor
     });
-  }, [src]);
+  }, [src, bgColor]);
   const finalTooltip = useMemo(() => {
     if (dictionaryTooltip && getLabel) {
       return getLabel(dictionaryTooltip);

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@m4l/components",
   "private": false,
-  "version": "0.0.36",
+  "version": "0.0.37",
   "license": "UNLICENSED",
   "scripts": {
     "dev": "vite",

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;