@m4l/components 0.1.35 → 0.1.37

package/dist/components/DynamicFilter/index.071aa795.js

@@ -0,0 +1,1658 @@
+import { S as ScrollBar } from "../ScrollBar/index.39eeb2de.js";
+import { styled, alpha as alpha$1 } from "@mui/material/styles";
+import { useRef, useState, useMemo, useCallback, useEffect, createContext, useContext } from "react";
+import { useModuleDictionary, voidFunction, useEnvironment, useHostTools, useFlagsPresent } from "@m4l/core";
+import * as Yup from "yup";
+import { useFormContext, useWatch } from "react-hook-form";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.de93fe01.js";
+import "lodash/debounce";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import "../hook-form/RHFCheckbox/index.6dcec9e2.js";
+import { alpha, styled as styled$1, Skeleton, MenuItem, useTheme, Popper, ClickAwayListener } from "@mui/material";
+import "@mui/x-date-pickers";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.7f1cbd85.js";
+import { useFormatter, useResponsiveDesktop } from "@m4l/graphics";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.b17d68f4.js";
+import { I as Icon } from "../Icon/index.8d754623.js";
+import "../hook-form/RHFPeriod/index.3772295b.js";
+import "../ErrorLabel/index.c8615f16.js";
+import "../Period/index.abe445bd.js";
+import { A as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.d3e1f36e.js";
+import "@mui/material/Button";
+import "../../contexts/ModalContext/index.b90eec94.js";
+import "../../react-draggable.84d6b038.js";
+import "../ModalDialog/index.a684827f.js";
+import "../Resizeable/index.c96c0f09.js";
+import "../areas/contexts/DynamicMFParmsContext/index.668bc2e2.js";
+import "../modal/WindowConfirm.0b8a6818.js";
+import "../modal/WindowBase.04439b8e.js";
+import "@mui/lab";
+import "lodash/isString";
+import "react-dropzone";
+import "../Image/index.93d5f37f.js";
+import "../hook-form/RHFUpload/index.d5cc7c13.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.82f16572.js";
+import "simplebar/dist/simplebar.min.css";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.ee17bddd.js";
+import { P as Popover } from "../mui_extended/Popover/index.53c77d23.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.d88e6e27.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.9230c57b.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.a0a341c7.js";
+const WrapperApplyedFilters = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  margin: theme.spacing(0, 1),
+  paddingLeft: theme.spacing(1),
+  borderLeft: `1px solid ${theme.palette.divider}`
+}));
+const ContainerApplyedFilters = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  height: "auto",
+  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",
+  "e",
+  "ne",
+  "gt",
+  "gte",
+  "lt",
+  "lte"
+];
+const ALL_FIELDS = {
+  name: "all",
+  label: "dynamic_filter.all_fields",
+  urlIcon: "",
+  type: "string",
+  multiple: true,
+  presence: "optional"
+};
+const WrapperStringFilter$1 = 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$3 = styled("div")(() => ({
+  width: "100%"
+}));
+const getDefaultStringFilter = (field, fixed, getLabel) => {
+  const dfop1 = field.defaultOperand1;
+  const defaultFilter = {
+    id: 0,
+    n: field.name,
+    fixed,
+    isSetted: false,
+    o: "c",
+    labelOperator: "",
+    o1: "",
+    o2: "",
+    labelOperands: ""
+  };
+  if (dfop1 !== void 0 && typeof dfop1 === "string") {
+    defaultFilter.o1 = dfop1;
+  }
+  defaultFilter.labelOperands = defaultFilter.o1 + "";
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
+  return defaultFilter;
+};
+function StringFilter() {
+  const {
+    popupData: {
+      filter,
+      field
+    },
+    setPoupEditValidationSchema,
+    setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
+    getLabelOperator
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const inputRef = useRef(null);
+  const {
+    setValue
+  } = useFormContext();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const options = useMemo(() => STRING_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabelOperator(o)
+  })), [getLabelOperator]);
+  const transformFunctionFormValuesToValues = useCallback((data) => {
+    if (!filter || !field)
+      return void 0;
+    const newFilter = {
+      id: filter.id,
+      n: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      o: data.valueOperator.id,
+      labelOperator: data.valueOperator.label,
+      o1: data.valueOperand1,
+      labelOperands: data.valueOperand1
+    };
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
+        valueOperand1: Yup.string().required(getLabel(`operand_required`))
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    if (filter && field) {
+      setValue("valueOperand1", filter.o1, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+    }
+    setIsLoaded(true);
+  }, [getLabel, filter, field]);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [isLoaded]);
+  return /* @__PURE__ */ jsx(WrapperStringFilter$1, {
+    children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$3, {
+        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
+      })]
+    })
+  });
+}
+const WrapperAllFieldsFilter$1 = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  minWidth: theme.spacing(3.75),
+  height: "100%",
+  padding: theme.spacing(3, 0),
+  gap: theme.spacing(3)
+}));
+const WrapperAutoComplete$2 = styled("div")(() => ({
+  width: "100%"
+}));
+const getDefaultBooleanFilter = (field, fixed, getLabel) => {
+  const dfop1 = field.defaultOperand1;
+  const defaultFilter = {
+    id: 0,
+    n: field.name,
+    fixed,
+    isSetted: true,
+    o: "e",
+    labelOperator: "",
+    o1: true,
+    o2: "",
+    labelOperands: ""
+  };
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
+  if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
+    defaultFilter.o1 = dfop1;
+  }
+  defaultFilter.labelOperands = getLabel(`dynamic_filter.operand_${defaultFilter.o1}`);
+  return defaultFilter;
+};
+function BooleanFilter() {
+  const {
+    setPoupEditValidationSchema,
+    setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
+    getLabelOperator
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    popupData: {
+      filter,
+      field
+    }
+  } = useBase();
+  const {
+    setValue
+  } = useFormContext();
+  const [isLoaded, setIsLoaded] = useState(false);
+  const operators = useMemo(() => BOOLEAN_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabelOperator(o)
+  })), [getLabelOperator]);
+  const optionsYesNo = useMemo(() => [{
+    value: true,
+    label: getLabel("dynamic_filter.operand_true")
+  }, {
+    value: false,
+    label: getLabel("dynamic_filter.operand_false")
+  }], [getLabel]);
+  const transformFunctionFormValuesToValues = useCallback((data) => {
+    if (!filter || !field)
+      return void 0;
+    const newFilter = {
+      id: filter.id,
+      n: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      o: data.valueOperator.id,
+      labelOperator: data.valueOperator.label,
+      o1: data.valueOperand1.value,
+      labelOperands: data.valueOperand1.label
+    };
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`error_operator_required`)),
+        valueOperand1: Yup.object().nullable().required(getLabel(`error_operand_required`))
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    if (filter && field) {
+      setValue("valueOperand1", {
+        value: filter.o1,
+        label: getLabel(`dynamic_filter.operand_${filter.o1}`)
+      }, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+    }
+    setIsLoaded(true);
+  }, [getLabel]);
+  return /* @__PURE__ */ jsx(WrapperAllFieldsFilter$1, {
+    id: "WrapperAllFieldsFilter",
+    children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$2, {
+        children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "valueOperator",
+          autoComplete: "off",
+          options: operators,
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          label: ""
+        })
+      }), /* @__PURE__ */ jsx(WrapperAutoComplete$2, {
+        children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "valueOperand1",
+          autoComplete: "off",
+          options: optionsYesNo,
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value) => option.value === value.value,
+          label: ""
+        })
+      })]
+    })
+  });
+}
+const WrapperAllFieldsFilter = 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$1 = styled("div")(() => ({
+  width: "100%"
+}));
+function isValidDate(d) {
+  return d && d instanceof Date;
+}
+const verifyStringFilter = (filter) => {
+  if (typeof filter.o !== "string") {
+    return false;
+  }
+  if (STRING_OPERATORS.findIndex((f) => f === filter.o) === -1) {
+    return false;
+  }
+  if (typeof filter.o1 !== "string") {
+    return false;
+  }
+  return true;
+};
+const verifyNumberFilter = (filter) => {
+  if (typeof filter.o !== "number") {
+    return false;
+  }
+  if (NUMBER_OPERATORS.findIndex((f) => f === filter.o) === -1) {
+    return false;
+  }
+  if (typeof filter.o1 !== "number") {
+    return false;
+  }
+  if (filter.o === "b" && typeof filter.o2 !== "number") {
+    return false;
+  }
+  return true;
+};
+const verifyBooleanFilter = (filter) => {
+  if (typeof filter.o !== "string") {
+    return false;
+  }
+  if (BOOLEAN_OPERATORS.findIndex((f) => f === filter.o) === -1) {
+    return false;
+  }
+  if (typeof filter.o1 !== "boolean") {
+    return false;
+  }
+  return true;
+};
+const verifyDateTime = (filter) => {
+  if (typeof filter.o !== "string") {
+    return false;
+  }
+  if (DATE_TIME_OPERATORS.findIndex((f) => f === filter.o) === -1) {
+    return false;
+  }
+  if (typeof filter.o1 !== "string") {
+    return false;
+  }
+  if (filter.o === "b" && typeof filter.o2 !== "string") {
+    return false;
+  }
+  return true;
+};
+const getDefaultDateTimeFilter = (field, fixed, getLabel, formatters) => {
+  const defaultStartDate = new Date();
+  const defaultEndDate = new Date();
+  const {
+    dateFormatter
+  } = formatters;
+  let dfop1 = field.defaultOperand1;
+  let dfop2 = field.defaultOperand2;
+  const defaultFilter = {
+    id: 0,
+    n: field.name,
+    fixed,
+    isSetted: true,
+    o: "b",
+    labelOperator: "",
+    o1: dfop1,
+    o2: 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.o1 = defaultStartDate.toISOString();
+  defaultFilter.o2 = defaultEndDate.toISOString();
+  defaultFilter.labelOperands = `${dateFormatter.formatDate(defaultStartDate, formatters.dateFormatter.datetimeFormat)} - ${dateFormatter.formatDate(defaultEndDate, dateFormatter.datetimeFormat)}`;
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
+  return defaultFilter;
+};
+function DateTimeFilter() {
+  const {
+    setPoupEditValidationSchema,
+    setFnTransformFormValuesIntoValues: setTransformFunctionFormValuesToValues,
+    getLabelOperator
+  } = useBase();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    dateFormatter
+  } = useFormatter();
+  const {
+    popupData: {
+      filter,
+      field
+    }
+  } = useBase();
+  const {
+    control,
+    setValue
+  } = useFormContext();
+  const operator = useWatch({
+    control,
+    name: "valueOperator"
+  });
+  const [isLoaded, setIsLoaded] = useState(false);
+  const options = useMemo(() => DATE_TIME_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabelOperator(o)
+  })), [getLabelOperator]);
+  const transformFunctionFormValuesToValues = useCallback((data) => {
+    if (!filter || !field)
+      return void 0;
+    const newFilter = {
+      id: filter.id,
+      n: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      o: data.valueOperator.id,
+      o1: data.valueOperand1.toISOString(),
+      labelOperator: data.valueOperator.label,
+      labelOperands: ""
+    };
+    if (data.valueOperator.id === "b") {
+      newFilter.o2 = data.valueOperand2.toISOString();
+      newFilter.labelOperands = `${dateFormatter.formatDate(data.valueOperand1, dateFormatter.datetimeFormat)} - ${dateFormatter.formatDate(data.valueOperand2, dateFormatter.datetimeFormat)}`;
+    } else {
+      newFilter.o2 = newFilter.o2 ? newFilter.o2 : newFilter.o1;
+      newFilter.labelOperands = dateFormatter.formatDate(data.valueOperand1, dateFormatter.datetimeFormat);
+    }
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
+        valueOperand1: Yup.date().required(getLabel(`dynamic_filter.error_invalid_date`)).typeError(getLabel(`dynamic_filter.error_invalid_date`)),
+        valueOperand2: Yup.mixed().when(["valueOperator.id"], {
+          is: "b",
+          then: Yup.date().typeError(getLabel(`dynamic_filter.error_invalid_date`)).min(Yup.ref("valueOperand1"), getLabel(`dynamic_filter.error_less_than_start`))
+        })
+      });
+    }
+    if (filter && field) {
+      setValue("valueOperand1", new Date(filter.o1), {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+      setValue("valueOperand2", new Date(filter.o2), {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    setIsLoaded(true);
+  }, [getLabel, filter, field]);
+  return /* @__PURE__ */ jsx(WrapperAllFieldsFilter, {
+    children: isLoaded && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(WrapperAutoComplete$1, {
+        children: /* @__PURE__ */ jsx(RHFAutocomplete, {
+          name: "valueOperator",
+          autoComplete: "off",
+          options,
+          getOptionLabel: (option) => option.label,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          label: ""
+        })
+      }), /* @__PURE__ */ jsx(RHFDateTime, {
+        name: "valueOperand1",
+        autoComplete: "off",
+        label: "",
+        focused: true
+      }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFDateTime, {
+        name: "valueOperand2",
+        autoComplete: "off",
+        label: ""
+      })]
+    })
+  });
+}
+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,
+    n: field.name,
+    fixed,
+    isSetted: false,
+    o: "e",
+    labelOperator: "",
+    o1: "",
+    o2: "",
+    labelOperands: ""
+  };
+  if (dfop1 !== void 0 && typeof dfop1 === "number") {
+    defaultFilter.o1 = dfop1;
+    defaultFilter.labelOperands = defaultFilter.o1;
+  }
+  if (dfop2 !== void 0 && typeof dfop2 === "number") {
+    defaultFilter.o2 = dfop2;
+  }
+  defaultFilter.labelOperator = getLabel(`dynamic_filter.operator_${defaultFilter.o}`);
+  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,
+      n: field.name,
+      fixed: filter.fixed,
+      isSetted: true,
+      o: data.valueOperator.id,
+      o1: Number(data.valueOperand1),
+      o2: data.valueOperand2,
+      labelOperator: data.valueOperator.label,
+      labelOperands: data.valueOperand1
+    };
+    if (data.valueOperator.id === "b") {
+      newFilter.labelOperands = `${data.valueOperand1} - ${data.valueOperand2}`;
+      newFilter.o2 = Number(data.valueOperand2);
+    } else {
+      newFilter.o2 = void 0;
+    }
+    return newFilter;
+  }, []);
+  useEffect(() => {
+    if (!isLoaded) {
+      setPoupEditValidationSchema({
+        valueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
+        valueOperand1: Yup.number().typeError(getLabel(`dynamic_filter.error_operand_mustbe_number`)),
+        valueOperand2: Yup.string().when("valueOperator", {
+          is: (o) => {
+            return o.id === "b";
+          },
+          then: Yup.string().test("DOB", getLabel(`dynamic_filter.error_operand_mustbe_number`), (value) => {
+            if (value === "")
+              return false;
+            return !isNaN(Number(value));
+          })
+        })
+      });
+    }
+    setTransformFunctionFormValuesToValues(transformFunctionFormValuesToValues);
+    if (filter && field) {
+      setValue("valueOperand1", filter.o1, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+      setValue("valueOperand2", filter.o2, {
+        shouldTouch: false,
+        shouldValidate: false
+      });
+    }
+    setIsLoaded(true);
+  }, [getLabel, filter, field]);
+  useEffect(() => {
+    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,
+        type: "number",
+        focused: true
+      }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFTextField, {
+        name: "valueOperand2",
+        ref: inputRef,
+        type: "number"
+      })]
+    })
+  });
+}
+const strategiesDefaultFilterValues = {
+  string: getDefaultStringFilter,
+  number: getDefaultNumberFilter,
+  boolean: getDefaultBooleanFilter,
+  datetime: getDefaultDateTimeFilter,
+  __default__: () => {
+    throw new Error("Type no defined");
+  }
+};
+const getDefaultFilterValues = (field, fixed, getLabel, formatters) => {
+  const transformer = strategiesDefaultFilterValues[field.type] ?? strategiesDefaultFilterValues.__default__;
+  return transformer(field, fixed, getLabel, formatters);
+};
+const strategiesEditFilterComponent = {
+  string: StringFilter,
+  number: NumberFilter,
+  boolean: BooleanFilter,
+  datetime: DateTimeFilter,
+  __default__: /* @__PURE__ */ jsx(Fragment, {})
+};
+const PopupEditFilterComponent = (props) => {
+  const {
+    getFieldByName
+  } = useBase();
+  const field = getFieldByName(props.filter.n);
+  if (!field)
+    return /* @__PURE__ */ jsx(Fragment, {});
+  const Component = strategiesEditFilterComponent[field.type] ?? strategiesEditFilterComponent.__default__;
+  return /* @__PURE__ */ jsx(Component, {});
+};
+const initialState = {
+  fields: [],
+  withAllField: true,
+  isDirty: false,
+  isValid: true,
+  automatic: false,
+  availableFields: [],
+  getFieldByName: () => void 0,
+  getLabelOperator: () => "",
+  applyedFilters: [],
+  addFilter: voidFunction,
+  updateFilter: voidFunction,
+  removeFilter: voidFunction,
+  clearFilters: voidFunction,
+  fireOnChangeFilters: voidFunction,
+  openAnchorEl: null,
+  openMenuFields: voidFunction,
+  closeMenuFields: voidFunction,
+  popupData: {
+    popupAnchorEl: null,
+    filter: null,
+    field: null
+  },
+  popupValidationSchema: {},
+  setPoupEditValidationSchema: voidFunction,
+  showPopupForAddFilter: voidFunction,
+  showPopupForEditFilter: voidFunction,
+  hidePopupEdit: voidFunction,
+  setInEdition: voidFunction,
+  inEdition: false,
+  setFnTransformFormValuesIntoValues: voidFunction,
+  fnTransformFormValuesIntoRawValues: () => void 0
+};
+const BaseContext = createContext(initialState);
+const getMaxId = (applyedFilters) => {
+  return applyedFilters.reduce((prev, n) => {
+    return n.id > prev ? n.id : prev;
+  }, 0);
+};
+const getFilterById = (id, applyedFilters) => {
+  return applyedFilters.findIndex((f) => f.id === id);
+};
+const formatToInitialFilters = (applyedFilter) => {
+  return applyedFilter.map((af) => ({
+    n: af.n,
+    o: af.o,
+    labelOperands: af.labelOperands,
+    o1: af.o1,
+    o2: af.o2
+  }));
+};
+const formatToRawFilter = (applyedFilter) => {
+  return applyedFilter.map((af) => ({
+    n: af.n,
+    o: af.o,
+    o1: af.o1,
+    o2: af.o2
+  }));
+};
+const getInitialFilters = (fields, filters, getFieldByName, getLabel, formatters) => {
+  const newFilters = [];
+  const fixedFields = [];
+  for (let index = 0; index < filters.length; index++) {
+    let add;
+    const filter = {
+      ...filters[index],
+      id: 0,
+      isSetted: true,
+      fixed: false,
+      labelOperator: ""
+    };
+    const field = getFieldByName(filter.n);
+    if (!field)
+      continue;
+    switch (field.type) {
+      case "string":
+        add = verifyStringFilter(filter);
+        break;
+      case "number":
+        add = verifyNumberFilter(filter);
+        break;
+      case "boolean":
+        add = verifyBooleanFilter(filter);
+        break;
+      case "datetime":
+        add = verifyDateTime(filter);
+        break;
+      default:
+        add = false;
+    }
+    if (add) {
+      if (field.presence === "fixed") {
+        if (fixedFields.findIndex((f) => f === field.name) === -1) {
+          filter.fixed = true;
+          fixedFields.push(field.name);
+        } else {
+          filter.fixed = false;
+        }
+      }
+      filter.isSetted = true;
+      filter.id = newFilters.length + 1;
+      filter.labelOperator = getLabel(`dynamic_filter.operator_${filter.o}`);
+      newFilters.push(filter);
+    }
+  }
+  for (let index = 0; index < fields.length; index++) {
+    const field = fields[index];
+    if (field.presence === "initialized" || field.presence === "fixed") {
+      if (!filters.find((f) => f.n === field.name)) {
+        const newFilter = getDefaultFilterValues(field, field.presence === "fixed", getLabel, formatters);
+        newFilter.id = newFilters.length + 1;
+        newFilters.push(newFilter);
+      }
+    }
+  }
+  return newFilters;
+};
+function BaseProvider(props) {
+  const {
+    isSkeleton = false,
+    fields,
+    initialFilters = [],
+    withAllField = true,
+    onChangeFilter,
+    automatic = true,
+    children
+  } = props;
+  const [openAnchorEl, setOpenAnchorEl] = useState(null);
+  const [popupData, setPopupData] = useState({
+    popupAnchorEl: null,
+    filter: null,
+    field: null
+  });
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [popupValidationSchema, setInternalPopupValidationSchema] = useState(Yup.object().shape({}));
+  const [fnTransformFormValuesIntoRawValues, setInternalfnTransormFormValuesIntoRawValues] = useState(() => void 0);
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const formatter = useFormatter();
+  const all_fields = useMemo(() => {
+    return {
+      ...ALL_FIELDS,
+      label: getLabel("dynamic_filter.all_fields"),
+      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);
+  const [isDirty, setIsDirty] = useState(!automatic);
+  const [isValid, setIsValid] = useState(false);
+  const {
+    toast
+  } = useHostTools();
+  const getFieldByName = useCallback((name) => {
+    return fields.concat(all_fields).find((f) => {
+      return f.name === name;
+    });
+  }, [fields, all_fields]);
+  const getLabelOperator = useCallback((operator) => {
+    return getLabel(`dynamic_filter.operator_${operator}`);
+  }, [getLabel]);
+  const [applyedFilters, setApplyedFilters] = useState(getInitialFilters(fields, initialFilters, getFieldByName, getLabel, formatter));
+  const availableFields = useMemo(() => {
+    const newFields = [];
+    for (let index = 0; index < fields.length; index++) {
+      let add;
+      const field = fields[index];
+      add = true;
+      if (field.multiple !== void 0 && field.multiple === false) {
+        const fIndx = applyedFilters.findIndex((f) => f.n === field.name);
+        if (fIndx > -1) {
+          add = false;
+        }
+      }
+      if (add) {
+        newFields.push(field);
+      }
+    }
+    return newFields;
+  }, [fields, applyedFilters]);
+  const fireOnChangeFilters = useCallback(() => {
+    if (isValid) {
+      if (!automatic)
+        setIsDirty(false);
+      onChangeFilter(formatToInitialFilters(applyedFilters), formatToRawFilter(applyedFilters));
+    } else {
+      toast(getLabel("dynamic_filter.error_filters_no_setted"), {
+        type: "error",
+        autoClose: 1e4
+      });
+    }
+  }, [isValid, applyedFilters, onChangeFilter]);
+  useEffect(() => {
+    const NoValid = applyedFilters.findIndex((f) => !f.isSetted) > -1;
+    if (NoValid) {
+      setIsValid(false);
+    } else {
+      setIsValid(true);
+    }
+    if (!automatic) {
+      setIsDirty(true);
+      return;
+    }
+    if (!NoValid) {
+      setIsDirty(false);
+      onChangeFilter(formatToInitialFilters(applyedFilters), formatToRawFilter(applyedFilters));
+    }
+  }, [applyedFilters]);
+  const addFilter = useCallback((newFilter) => {
+    setApplyedFilters((lastApplyedFilters) => {
+      const newArray = [...lastApplyedFilters];
+      const newFilterFull = {
+        ...newFilter,
+        id: getMaxId(lastApplyedFilters) + 1,
+        labelOperator: getLabelOperator(newFilter.o)
+      };
+      newArray.push(newFilterFull);
+      return newArray;
+    });
+  }, []);
+  const updateFilter = useCallback((newFilter) => {
+    setApplyedFilters((lastApplyedFilters) => {
+      const newArray = [...lastApplyedFilters];
+      const findedFilter = getFilterById(newFilter.id, newArray);
+      if (findedFilter > -1) {
+        newArray.splice(findedFilter, 1, {
+          ...newFilter,
+          labelOperator: getLabelOperator(newFilter.o)
+        });
+      }
+      return newArray;
+    });
+  }, []);
+  const clearFilters = useCallback(() => {
+    setApplyedFilters((lastFilters) => {
+      const newFilters = [];
+      for (let index = 0; index < lastFilters.length; index++) {
+        const filter = lastFilters[index];
+        if (filter.fixed) {
+          newFilters.push(filter);
+        }
+      }
+      return newFilters;
+    });
+  }, []);
+  const openMenuFields = useCallback((anchorEl) => {
+    setOpenAnchorEl(anchorEl);
+    setInEdition(true);
+  }, [applyedFilters]);
+  const closeMenuFields = useCallback(() => {
+    setOpenAnchorEl(null);
+    setInEdition(false);
+  }, []);
+  const hidePopupEdit = useCallback((stayInEditon) => {
+    if (popupData.popupAnchorEl) {
+      setPopupData({
+        popupAnchorEl: null,
+        filter: null,
+        field: null
+      });
+    }
+    if (!stayInEditon && inEdition) {
+      setInEdition(false);
+    }
+  }, [popupData, inEdition]);
+  const showPopupForAddFilter = useCallback((anchorEl, field) => {
+    setPopupData({
+      popupAnchorEl: anchorEl,
+      filter: getDefaultFilterValues(field, false, getLabel, formatter),
+      field
+    });
+    setInEdition(true);
+  }, []);
+  const showPopupForEditFilter = useCallback((anchorEl, filterToEdit) => {
+    setPopupData({
+      popupAnchorEl: anchorEl,
+      filter: filterToEdit,
+      field: getFieldByName(filterToEdit.n)
+    });
+    setInEdition(true);
+  }, []);
+  const removeFilter = useCallback((id) => {
+    setApplyedFilters((lastApplyedFilters) => {
+      const newArray = [...lastApplyedFilters];
+      const index_to_remove = lastApplyedFilters.findIndex((filter) => id === filter.id);
+      if (index_to_remove > -1) {
+        if (!newArray[index_to_remove].fixed) {
+          newArray.splice(index_to_remove, 1);
+        }
+      }
+      return newArray;
+    });
+  }, []);
+  const setPoupEditValidationSchema = useCallback((validationSchema) => {
+    setInternalPopupValidationSchema(Yup.object().shape({
+      ...validationSchema
+    }));
+  }, []);
+  const setFnTransformFormValuesIntoValues = useCallback((fn) => {
+    setInternalfnTransormFormValuesIntoRawValues(() => fn);
+  }, []);
+  return /* @__PURE__ */ jsx(BaseContext.Provider, {
+    value: {
+      isSkeleton,
+      inEdition,
+      automatic,
+      isDirty,
+      isValid,
+      withAllField,
+      fields,
+      availableFields,
+      getFieldByName,
+      getLabelOperator,
+      applyedFilters,
+      addFilter,
+      updateFilter,
+      removeFilter,
+      clearFilters,
+      fireOnChangeFilters,
+      openAnchorEl,
+      openMenuFields,
+      closeMenuFields,
+      popupData,
+      popupValidationSchema,
+      showPopupForAddFilter,
+      showPopupForEditFilter,
+      hidePopupEdit,
+      setInEdition,
+      setPoupEditValidationSchema,
+      fnTransformFormValuesIntoRawValues,
+      setFnTransformFormValuesIntoValues
+    },
+    children
+  });
+}
+const useBase = () => useContext(BaseContext);
+const WrapperApplyedFilter = styled("div")(({
+  theme
+}) => ({
+  width: "auto",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  height: "100%",
+  minHeight: theme.spacing(3),
+  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}`
+  }
+}));
+const AplyedFilterStyled = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "auto",
+  height: "100%",
+  marginRight: theme.spacing(1),
+  marginLeft: theme.spacing(1),
+  whiteSpace: "nowrap"
+}));
+const ContainerField = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle2
+}));
+const ContainerOperator = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  marginLeft: theme.spacing(1.5),
+  fontStyle: "italic"
+}));
+const ContainerOperands = styled("span")(({
+  theme
+}) => ({
+  ...theme.typography.body2,
+  marginLeft: theme.spacing(1.5)
+}));
+function ApplyedFilter(props) {
+  const {
+    n: fieldName,
+    id,
+    isSetted,
+    fixed,
+    labelOperator,
+    labelOperands
+  } = props;
+  const {
+    removeFilter,
+    showPopupForEditFilter,
+    hidePopupEdit,
+    getFieldByName
+  } = useBase();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const field = useMemo(() => {
+    return getFieldByName(fieldName);
+  }, [getFieldByName]);
+  const urlIcon = useMemo(() => {
+    if (!field)
+      return;
+    if (field && field.urlIcon !== "") {
+      return field.urlIcon;
+    }
+    return "";
+  }, [field]);
+  const onDelete = () => {
+    hidePopupEdit(false);
+    removeFilter(id);
+  };
+  const onClick = (event) => {
+    showPopupForEditFilter(event.currentTarget, props);
+  };
+  if (!field) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
+    id: "WrapperApplyedFilter",
+    className: !isSetted ? "waf_no_setted" : "",
+    children: [urlIcon && /* @__PURE__ */ jsx(IconButton, {
+      src: urlIcon,
+      onClick
+    }), /* @__PURE__ */ jsxs(AplyedFilterStyled, {
+      onClick,
+      children: [/* @__PURE__ */ jsx(ContainerField, {
+        children: field.label
+      }), /* @__PURE__ */ jsx(ContainerOperator, {
+        children: labelOperator
+      }), /* @__PURE__ */ jsx(ContainerOperands, {
+        children: labelOperands
+      })]
+    }), !fixed && /* @__PURE__ */ jsx(IconButton, {
+      size: "small",
+      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+      onClick: onDelete,
+      dictionaryTooltip: "dynamic_filter.tooltip_clear_filter"
+    })]
+  });
+}
+function ApplyedFilters() {
+  const {
+    applyedFilters,
+    isSkeleton
+  } = useBase();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+      id: "WrapperApplyedFilters"
+    });
+  }
+  return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+    className: "WrapperApplyedFilters",
+    children: /* @__PURE__ */ jsx(ScrollBar, {
+      children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
+        id: "WrapperApplyedFilters",
+        children: [...applyedFilters].sort((a, b) => a.isSetted === b.isSetted ? 0 : a.isSetted ? -1 : 1).reverse().map((filter) => /* @__PURE__ */ jsx(ApplyedFilter, {
+          ...filter
+        }, filter.id))
+      })
+    })
+  });
+}
+const SKTClearFilters = styled$1("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75)
+}));
+const WrapperClearFilters = styled$1("div")(({
+  theme
+}) => ({
+  paddingLeft: theme.spacing(0.5),
+  borderLeft: `1px solid ${theme.palette.divider}`
+}));
+const ClearFilters = () => {
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    clearFilters,
+    isSkeleton,
+    applyedFilters
+  } = useBase();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTClearFilters, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "20px",
+        height: "20px"
+      })
+    });
+  }
+  if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
+    return /* @__PURE__ */ jsx(WrapperClearFilters, {
+      children: /* @__PURE__ */ jsx(IconButton, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+        onClick: clearFilters,
+        dictionaryTooltip: "dynamic_filter.tooltip_clear_filters"
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(Fragment, {});
+};
+const SKTWrapperFilterButton = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  height: theme.spacing(3.75),
+  background: alpha$1(theme.palette.primary.main, 0.3)
+}));
+const WrapperFilterButton = styled("div")(() => ({
+  "&.isDirty": {
+    animationName: "dirtyEffect",
+    animationDuration: "1s",
+    animationFillMode: "both",
+    animationIterationCount: "infinite",
+    transition: "all .3s",
+    "@keyframes dirtyEffect": {
+      "20%": {
+        opacity: 1
+      },
+      "50%": {
+        opacity: 0.5
+      },
+      "100%": {
+        opacity: 1
+      }
+    }
+  },
+  "&.isDirtyError": {}
+}));
+function FilterButton() {
+  const {
+    isSkeleton,
+    fireOnChangeFilters,
+    automatic,
+    isDirty,
+    isValid
+  } = useBase();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  }
+  const color = useMemo(() => {
+    if (automatic || !isDirty) {
+      return "action.active";
+    }
+    if (!isValid) {
+      return "error.main";
+    }
+    return "primary.main";
+  }, [automatic, isValid, isDirty]);
+  return /* @__PURE__ */ jsx(WrapperFilterButton, {
+    id: "WrapperFilterButton",
+    className: isDirty && isValid ? "isDirty" : "",
+    children: /* @__PURE__ */ jsx(IconButton, {
+      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`
+    })
+  });
+}
+const WrapperInputFilter = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  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)
+  }
+}));
+const StyledInputFilter = styled("input")(({
+  theme
+}) => ({
+  background: "transparent",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  minWidth: theme.spacing(3.75),
+  width: "100%",
+  "&": {
+    outline: "none",
+    border: "none"
+  },
+  [theme.breakpoints.up("sm")]: {
+    width: "auto"
+  }
+}));
+function InputFilter() {
+  const {
+    isSkeleton,
+    withAllField,
+    availableFields,
+    showPopupForAddFilter,
+    addFilter,
+    openAnchorEl,
+    openMenuFields,
+    closeMenuFields,
+    hidePopupEdit
+  } = useBase();
+  const [valueFilter, setValueFilter] = useState("");
+  const finalFields = useMemo(() => {
+    if (!openAnchorEl) {
+      return [];
+    }
+    return availableFields.filter((field) => field.label.includes(valueFilter));
+  }, [valueFilter, openAnchorEl]);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WrapperInputFilter, {
+      id: "SKTWrapperInputFilter",
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "100%",
+        height: 24
+      })
+    });
+  }
+  const handleClose = () => {
+    closeMenuFields();
+  };
+  const handleClickItem = (field) => {
+    closeMenuFields();
+    showPopupForAddFilter(openAnchorEl, field);
+  };
+  const onClickFilter = (event) => {
+    openMenuFields(event.currentTarget);
+  };
+  const onChangeFilter = (event) => {
+    setValueFilter(event.target.value);
+    if (!openAnchorEl) {
+      openMenuFields(event.currentTarget);
+    }
+    hidePopupEdit(true);
+  };
+  const handleKeyPressMenu = (event) => {
+    if (event.key !== "Enter")
+      return;
+    if (valueFilter.trim() === "") {
+      closeMenuFields();
+      return;
+    }
+    if (withAllField) {
+      addFilter({
+        n: ALL_FIELDS.name,
+        isSetted: true,
+        fixed: false,
+        o: "c",
+        o1: valueFilter,
+        labelOperands: valueFilter
+      });
+      setValueFilter("");
+      closeMenuFields();
+    }
+  };
+  if (!withAllField && availableFields.length == 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsxs(WrapperInputFilter, {
+    id: "WrapperInputFilter",
+    children: [/* @__PURE__ */ jsx(StyledInputFilter, {
+      type: "text",
+      value: valueFilter,
+      placeholder: "filter",
+      onClick: onClickFilter,
+      onChange: onChangeFilter,
+      onKeyPress: handleKeyPressMenu
+    }), availableFields.length > 0 && /* @__PURE__ */ jsx(Popover, {
+      id: "Popover",
+      open: Boolean(openAnchorEl),
+      anchorEl: openAnchorEl,
+      onClose: handleClose,
+      disableAutoFocus: true,
+      arrowType: "right-top",
+      sx: {
+        "& .MuiMenuItem-root": {
+          px: 1,
+          typography: "body2",
+          borderRadius: 0.75
+        }
+      },
+      children: Boolean(openAnchorEl) && finalFields.map((field, index) => /* @__PURE__ */ jsxs(MenuItem, {
+        dense: true,
+        onClick: () => handleClickItem(field),
+        children: [/* @__PURE__ */ jsx(Icon, {
+          src: field.urlIcon
+        }), /* @__PURE__ */ jsx(LabelMemuItem, {
+          children: field.label
+        })]
+      }, `menu_action_${index}`))
+    })]
+  });
+}
+const WrapperPopupEditFilter = styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  padding: theme.spacing(1.4, 3, 3, 3),
+  backgroundColor: theme.palette.background.default,
+  borderRadius: theme.spacing(1)
+}));
+styled("div")(({
+  theme
+}) => ({
+  display: "flex",
+  justifyContent: "center",
+  gap: theme.spacing(3),
+  paddingTop: theme.spacing(3)
+}));
+const TitleContainer = styled("div")(({
+  theme
+}) => ({
+  ...theme.typography.subtitle2,
+  width: "100%",
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  padding: theme.spacing(2, 0),
+  marginLeft: theme.spacing(1.5)
+}));
+const HeaderContainer = styled("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+const WrapperEditFilter = styled("div")(() => ({
+  "& .m4l_FormProvider": {
+    padding: "0px",
+    margin: "0px"
+  }
+}));
+const PopupEditFilter = () => {
+  const {
+    popupValidationSchema,
+    popupData: {
+      popupAnchorEl,
+      filter,
+      field
+    },
+    hidePopupEdit,
+    addFilter,
+    updateFilter,
+    getLabelOperator,
+    fnTransformFormValuesIntoRawValues
+  } = useBase();
+  const theme = useTheme();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const values = useMemo(() => {
+    if (!filter || !field)
+      return {};
+    const valuesFilter = {
+      ...filter,
+      valueOperator: {
+        id: filter.o,
+        label: getLabelOperator(filter.o)
+      }
+    };
+    return valuesFilter;
+  }, [filter, field, getLabelOperator, getLabel]);
+  const onSubmit = async (data) => {
+    if (!filter || !field)
+      return;
+    const newFilter = fnTransformFormValuesIntoRawValues(data);
+    if (!newFilter)
+      return;
+    if (filter.id === 0) {
+      addFilter(newFilter);
+    } else {
+      updateFilter(newFilter);
+    }
+    hidePopupEdit(false);
+  };
+  const onClose = () => {
+    hidePopupEdit(false);
+  };
+  return /* @__PURE__ */ jsx(Popper, {
+    open: Boolean(popupAnchorEl),
+    anchorEl: popupAnchorEl,
+    sx: {
+      boxShadow: theme.customShadows.dropdown,
+      borderRadius: 1
+    },
+    children: /* @__PURE__ */ jsx(ClickAwayListener, {
+      onClickAway: onClose,
+      children: /* @__PURE__ */ jsx(WrapperEditFilter, {
+        children: filter && /* @__PURE__ */ jsx(RHFormProvider, {
+          onSubmit,
+          values,
+          validationSchema: popupValidationSchema,
+          children: /* @__PURE__ */ jsxs(WrapperPopupEditFilter, {
+            children: [/* @__PURE__ */ jsxs(HeaderContainer, {
+              children: [field?.urlIcon && /* @__PURE__ */ jsx(Icon, {
+                src: field.urlIcon
+              }), /* @__PURE__ */ jsx(TitleContainer, {
+                children: field?.label
+              })]
+            }), /* @__PURE__ */ jsx(PopupEditFilterComponent, {
+              filter
+            }), /* @__PURE__ */ jsxs(Actions, {
+              children: [/* @__PURE__ */ jsx(ActionCancel, {
+                onClick: onClose
+              }), /* @__PURE__ */ jsx(ActionIntro, {})]
+            })]
+          })
+        })
+      })
+    })
+  });
+};
+const WrapperFilter = styled("div", {
+  shouldForwardProp: (prop) => prop !== "inEdition"
+})(({
+  theme,
+  inEdition
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  height: "auto",
+  width: "100%",
+  padding: theme.spacing(0.5),
+  borderRadius: theme.spacing(1),
+  border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`
+}));
+const WrapperFilterMobile = styled("div", {
+  shouldForwardProp: (prop) => prop !== "inEdition"
+})(({
+  theme,
+  inEdition
+}) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "space-between",
+  minWidth: theme.spacing(25),
+  height: "auto",
+  width: "100%",
+  padding: theme.spacing(0.5),
+  borderRadius: theme.spacing(1),
+  border: inEdition ? `1px solid ${theme.palette.primary.main}` : `1px solid ${theme.palette.divider}`,
+  gap: theme.spacing(0.75),
+  "& .WrapperApplyedFilters": {
+    margin: "0px",
+    padding: "0px",
+    border: "0px"
+  }
+}));
+const ContainerFistRow = styled("div")(() => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "space-between"
+}));
+const DynamicFilter = (props) => {
+  const isDesktop = useResponsiveDesktop();
+  const render = useFlagsPresent(["dictionary_loaded"]);
+  if (!render) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  return /* @__PURE__ */ jsx(BaseProvider, {
+    ...props,
+    children: /* @__PURE__ */ jsx(BaseContext.Consumer, {
+      children: ({
+        inEdition
+      }) => isDesktop ? /* @__PURE__ */ jsxs(WrapperFilter, {
+        id: "WrapperFilter",
+        inEdition,
+        children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
+      }) : /* @__PURE__ */ jsxs(WrapperFilterMobile, {
+        id: "WrapperFilterMobile",
+        inEdition,
+        children: [/* @__PURE__ */ jsxs(ContainerFistRow, {
+          id: "ContainerFistRow",
+          children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
+        }), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopupEditFilter, {})]
+      })
+    })
+  });
+};
+function getDynamicFilterComponentsDictionary() {
+  return ["dynamic_filter"].concat(getCommonActionsDictionary());
+}
+const defaultDynamicFilterDictionary = {
+  dynamic_filter: {
+    filter_tooltip: "Search",
+    operator_b: "between",
+    operator_e: "=",
+    operator_ne: "!=",
+    operator_gt: ">",
+    operator_gte: ">=",
+    operator_lt: "<",
+    operator_lte: "<=",
+    operator_c: "contains",
+    operator_nc: "not contains",
+    all_fields: "all_fields",
+    operand_true: "true",
+    operand_false: "false",
+    error_operator_required: "Operator required",
+    error_operand_required: "Operand required",
+    error_invalid_date: "Invalid date",
+    error_operand_mustbe_number: "Invalid number",
+    error_filters_no_setted: "Filters not yet set"
+  }
+};
+export {
+  DynamicFilter as D,
+  defaultDynamicFilterDictionary as d,
+  getDynamicFilterComponentsDictionary as g
+};