@m4l/components 0.1.52 → 0.1.53

package/components/DynamicFilter/index.2189989e.js

@@ -0,0 +1,1808 @@
+import { shallow } from "zustand/shallow";
+import { S as ScrollBar } from "../ScrollBar/index.35ebe9a1.js";
+import { I as IconButton } from "../mui_extended/IconButton/index.460c0476.js";
+import { useContext, useMemo, useEffect, createContext, useRef, createElement, useState, useCallback } from "react";
+import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
+import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
+import clsx from "clsx";
+import { T as TEST_PROP_ID } from "../../vendor.d5904857.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { generateUtilityClasses, alpha, styled as styled$1, Skeleton, MenuItem } from "@mui/material";
+import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.aaafafc3.js";
+import { P as Popover } from "../mui_extended/Popover/index.58c49cc0.js";
+import { I as Icon } from "../Icon/index.b29ff2d9.js";
+import { R as RHFormProvider } from "../../contexts/RHFormContext/index.3dc6e2f5.js";
+import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.93c9823a.js";
+import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.a81752ef.js";
+import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.5d5294f2.js";
+import { useFormContext, useWatch } from "react-hook-form";
+import "@mui/material/Button";
+import "../mui_extended/Button/index.8406ed5b.js";
+import "../../contexts/ModalContext/index.d1aaddbc.js";
+import "../../react-draggable.6471b07e.js";
+import "../ModalDialog/index.49c40899.js";
+import "../Resizeable/index.04fa8de5.js";
+import "../modal/WindowConfirm.b31ed329.js";
+import "../modal/WindowBase.66ef3c9a.js";
+import "../areas/components/index.912056a0.js";
+import "../areas/components/AreasAdmin/index.25e50e70.js";
+import { useStore, createStore } from "zustand";
+import "../areas/contexts/AreasContext/index.fb21af84.js";
+import "../areas/components/AreasContainer/index.432b9d4c.js";
+import "react-grid-layout/css/styles.css";
+import "../../react-resizable.b620abed.js";
+import "../areas/contexts/index.1e46147e.js";
+import "../areas/contexts/DynamicMFParmsContext/index.c19cb8cc.js";
+import "@mui/lab";
+import "../mui_extended/Accordion/index.002bad72.js";
+import "../mui_extended/Avatar/index.fe06afd7.js";
+import "react-router-dom";
+import "../Image/index.aa24e982.js";
+import "../mui_extended/Pager/index.458f9f0d.js";
+import "../mui_extended/Tab/index.e0653a0a.js";
+import "../mui_extended/Typography/index.be3a279a.js";
+import { unstable_composeClasses } from "@mui/base";
+import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.b6ae791a.js";
+import { devtools } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
+import { R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.0ffa2185.js";
+import "lodash/debounce";
+import "../hook-form/RHFCheckbox/index.1fcf42c8.js";
+import { styled, alpha as alpha$1 } from "@mui/material/styles";
+import "../ErrorLabel/index.12994bff.js";
+import "@mui/x-date-pickers";
+import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.6c129ce4.js";
+import { R as RHFTextField } from "../hook-form/RHFTextField/index.a021a2b3.js";
+import "../hook-form/RHFPeriod/index.1f6aa4c6.js";
+import "../Period/index.4f6e419d.js";
+import "lodash/isString";
+import "react-dropzone";
+import "../hook-form/RHFUpload/index.7fdff30f.js";
+import * as Yup from "yup";
+import "@hookform/resolvers/yup";
+import { styled as styled$2 } from "@m4l/styles";
+const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
+const ASSETS_URL = "/frontend/components/dynamic_filter/assets/icons/";
+const ASSETS = {
+  refresh: "refresh.svg",
+  search: "search.svg"
+};
+const ALL_FIELDS = {
+  name: "all",
+  dictionaryId: "dynamic_filter.all_fields",
+  urlIcon: "",
+  type: "string",
+  multiple: true,
+  presence: "optional"
+};
+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 dynamicFilterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
+  "root",
+  "containerFistRow",
+  "containerInputFilter",
+  "filterButton",
+  "wrapperApplyedFilters",
+  "containerApplyedFilters",
+  "applyedFilter",
+  "popUpMenuFields",
+  "popoverMenuFieldsItem",
+  "popoverFilterPaper",
+  "popoverFilterHeader",
+  "containerBooleanFilter",
+  "containerDateTimeFilter",
+  "containerNumberFilter",
+  "containerStringFilter",
+  "isMobile",
+  "inEdition",
+  "isDirty",
+  "isValid"
+]);
+const useUtilityClasses = (ownerState) => {
+  const slots = {
+    root: ["root", ownerState.inEdition && "inEdition", ownerState.isDirty && "isDirty", ownerState.isValid && "isValid", ownerState.isMobile && "isMobile"],
+    filterButton: ["filterButton", ownerState.isValid && "isValid", ownerState.isDirty && "isDirty"],
+    containerFistRow: ["containerFistRow"],
+    containerInputFilter: ["containerInputFilter"],
+    wrapperApplyedFilters: ["wrapperApplyedFilters"],
+    containerApplyedFilters: ["containerApplyedFilters"],
+    applyedFilter: ["applyedFilter"],
+    popUpMenuFields: ["popUpMenuFields"],
+    popoverMenuFieldsItem: ["popoverMenuFieldsItem"],
+    popoverFilterPaper: ["popoverFilterPaper"],
+    popoverFilterHeader: ["popoverFilterHeader"],
+    clearFilters: ["clearFilters"],
+    containerBooleanFilter: ["containerBooleanFilter"],
+    containerDateTimeFilter: ["containerDateTimeFilter"],
+    containerNumberFilter: ["containerNumberFilter"],
+    containerStringFilter: ["containerStringFilter"]
+  };
+  return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
+};
+const ContainerBooleanFilter = 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)
+}));
+function useDynamicFilter(selector, equalityFn) {
+  const store = useContext(DynamicFilterContext);
+  if (!store)
+    throw new Error("useDynamicFilterStore context must be use inside DynamicFilterContext");
+  return useStore(store, selector, equalityFn);
+}
+const DYNAMICFILTER_TEST_ID = "m4ldynamicfilter";
+const PREFIX_TEST_ATTRIBUTE = "data-test";
+const TEST_PROP_FIELDS = `${PREFIX_TEST_ATTRIBUTE}-${DYNAMICFILTER_TEST_ID}-fields`;
+function getTestIdByClass(key, detailId) {
+  return `${DYNAMICFILTER_TEST_ID}-${key}` + (detailId ? "-" + detailId : "");
+}
+const DYNAMICFILTER_DICTIONARY_ID = "dynamic_filter";
+function getDynamicFilterComponentsDictionary() {
+  return [DYNAMICFILTER_DICTIONARY_ID].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"
+  }
+};
+const LABEL_FILTER_BUTTON = "filter_tooltip";
+const DICCTIONARY = {
+  input_placeholder: "input_placeholder",
+  operand_true: "true",
+  operand_false: "false",
+  filter_tooltip_refresh: "filter_tooltip_refresh",
+  filter_tooltip_dirty: "filter_tooltip_dirty",
+  filter_tooltip_invalid: "filter_tooltip_invalid",
+  operator_b: "operator_b",
+  operator_e: "operator_e",
+  operator_ne: "operator_ne",
+  operator_gt: "operator_gt",
+  operator_gte: "operator_gte",
+  operator_lt: "operator_lt",
+  operator_lte: "operator_lte",
+  operator_c: "operator_c",
+  operator_nc: "operator_nc"
+};
+const getDynamicFilterDictionary = (key) => {
+  return `${DYNAMICFILTER_DICTIONARY_ID}.${key}`;
+};
+function BooleanFilter() {
+  const classesContainerBooleanFilter = useDynamicFilter((state) => state.classes.containerBooleanFilter);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const operators = useMemo(() => BOOLEAN_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+  })), [getLabel]);
+  const optionsYesNo = useMemo(() => [{
+    value: true,
+    label: getLabel(getDynamicFilterDictionary(`operand_true`))
+  }, {
+    value: false,
+    label: getLabel(getDynamicFilterDictionary(`operand_false`))
+  }], [getLabel]);
+  return /* @__PURE__ */ jsxs(ContainerBooleanFilter, {
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getTestIdByClass("containerBooleanFilter")
+    } : {},
+    className: classesContainerBooleanFilter,
+    children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
+      name: "formValueOperator",
+      autoComplete: "off",
+      options: operators,
+      getOptionLabel: (option) => option.label,
+      isOptionEqualToValue: (option, value) => option.id === value.id,
+      label: ""
+    }), /* @__PURE__ */ jsx(RHFAutocomplete, {
+      name: "formValueOperand1",
+      autoComplete: "off",
+      options: optionsYesNo,
+      getOptionLabel: (option) => option.label,
+      isOptionEqualToValue: (option, value) => option.value === value.value,
+      label: ""
+    })]
+  });
+}
+const ContainerDateTimeFilter = 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)
+}));
+function DateTimeFilter() {
+  const classesContainerDateTimeFilter = useDynamicFilter((state) => state.classes.containerDateTimeFilter, shallow);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    control
+  } = useFormContext();
+  const operator = useWatch({
+    control,
+    name: "formValueOperator"
+  });
+  const operators = useMemo(() => DATE_TIME_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+  })), [getLabel]);
+  return /* @__PURE__ */ jsxs(ContainerDateTimeFilter, {
+    className: classesContainerDateTimeFilter,
+    children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
+      name: "formValueOperator",
+      autoComplete: "off",
+      options: operators,
+      getOptionLabel: (option) => option.label,
+      isOptionEqualToValue: (option, value) => option.id === value.id,
+      label: ""
+    }), /* @__PURE__ */ jsx(RHFDateTime, {
+      name: "formValueOperand1",
+      autoComplete: "off",
+      label: ""
+    }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFDateTime, {
+      name: "formValueOperand2",
+      autoComplete: "off",
+      label: ""
+    })]
+  });
+}
+const ContainerNumberFilter = 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)
+}));
+function NumberFilter() {
+  const classesContainerNumberFilter = useDynamicFilter((state) => state.classes.containerNumberFilter);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    control
+  } = useFormContext();
+  const operator = useWatch({
+    control,
+    name: "formValueOperator"
+  });
+  const operators = useMemo(() => NUMBER_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+  })), [getLabel]);
+  return /* @__PURE__ */ jsxs(ContainerNumberFilter, {
+    className: classesContainerNumberFilter,
+    children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
+      name: "formValueOperator",
+      autoComplete: "off",
+      options: operators,
+      getOptionLabel: (option) => option.label,
+      isOptionEqualToValue: (option, value) => option.id === value.id,
+      label: ""
+    }), /* @__PURE__ */ jsx(RHFTextField, {
+      name: "formValueOperand1",
+      type: "number"
+    }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFTextField, {
+      name: "formValueOperand2",
+      type: "number"
+    })]
+  });
+}
+const ContainerStringFilter = 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)
+}));
+function StringFilter() {
+  const classesContainerStringFilter = useDynamicFilter((state) => state.classes.containerStringFilter);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const operators = useMemo(() => STRING_OPERATORS.map((o) => ({
+    id: o,
+    label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
+  })), [getLabel]);
+  return /* @__PURE__ */ jsxs(ContainerStringFilter, {
+    className: classesContainerStringFilter,
+    children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
+      name: "formValueOperator",
+      autoComplete: "off",
+      options: operators,
+      getOptionLabel: (option) => option.label,
+      isOptionEqualToValue: (option, value) => option.id === value.id,
+      label: ""
+    }), /* @__PURE__ */ jsx(RHFTextField, {
+      name: "formValueOperand1"
+    })]
+  });
+}
+const getDefaultBooleanFilter = (field, fixed) => {
+  const dfop1 = field.defaultOperand1;
+  const defaultFilter = {
+    id: 0,
+    fieldType: "boolean",
+    field,
+    fixed,
+    isSetted: true,
+    operator: "e",
+    operand1: true
+  };
+  if (dfop1 !== void 0 && typeof dfop1 === "boolean") {
+    defaultFilter.operand1 = dfop1;
+  }
+  return defaultFilter;
+};
+const getBooleanLabels = (filter, getLabel) => {
+  const labelOperands = filter.operand1 ? getLabel(getDynamicFilterDictionary("operand_true")) : getLabel(getDynamicFilterDictionary("operand_false"));
+  return {
+    labelField: getLabel(filter.field.dictionaryId),
+    labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+    labelOperands
+  };
+};
+const getBooleanSchema = (getLabel) => Yup.object({
+  formValueOperator: Yup.object().nullable().required(getLabel(`error_operator_required`)),
+  formValueOperand1: Yup.object().nullable().required(getLabel(`error_operand_required`))
+});
+const getBooleanFormValue = (field, getLabel, filterValueBoolean) => {
+  const filterValue = filterValueBoolean ? filterValueBoolean : void 0;
+  const operator = filterValue ? filterValue.operator : field.defaultOperator ?? "e";
+  const formValueOperand1 = filterValue ? {
+    value: filterValue.operand1,
+    label: getLabel(getDynamicFilterDictionary(`operand_${filterValue.operand1}`))
+  } : null;
+  const ret = {
+    fieldType: "boolean",
+    formValueOperator: {
+      id: operator,
+      label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+    },
+    formValueOperand1
+  };
+  return ret;
+};
+const getFilterFromBooleanFormValue = (formFilterValue) => {
+  const operator = formFilterValue.formValueOperator.id;
+  const opeand1 = formFilterValue.formValueOperand1?.value || false;
+  return {
+    fieldType: "boolean",
+    operator,
+    operand1: opeand1
+  };
+};
+const getDefaultStringFilter = (field, fixed) => {
+  const dfop1 = field.defaultOperand1;
+  const defaultFilter = {
+    id: 0,
+    fieldType: "string",
+    field,
+    fixed,
+    isSetted: false,
+    operator: "c",
+    operand1: ""
+  };
+  if (dfop1 !== void 0 && typeof dfop1 === "string") {
+    defaultFilter.operand1 = dfop1;
+  }
+  return defaultFilter;
+};
+const getStringLabels = (filter, getLabel) => {
+  const labelOperands = filter.operand1 !== void 0 ? filter.operand1 + "" : "";
+  return {
+    labelField: getLabel(filter.field.dictionaryId),
+    labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+    labelOperands
+  };
+};
+const getStringSchema = (getLabel) => Yup.object({
+  formValueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
+  formValueOperand1: Yup.string().required(getLabel(`operand_required`))
+});
+const getStringFormValue = (field, getLabel, filterValue) => {
+  const filterValueString = filterValue;
+  const operator = filterValueString ? filterValueString.operator : field.defaultOperator ?? "c";
+  const formValueOperand1 = filterValueString ? filterValueString.operand1 : "";
+  return {
+    fieldType: "string",
+    formValueOperator: {
+      id: operator,
+      label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+    },
+    formValueOperand1
+  };
+};
+const getFilterFromStringFormValue = (formFilterValue) => {
+  const operator = formFilterValue.formValueOperator.id;
+  const operand1 = formFilterValue.formValueOperand1;
+  return {
+    fieldType: "string",
+    operator,
+    operand1
+  };
+};
+const getDefaultDateTimeFilter = (field, fixed) => {
+  const defaultStartDate = new Date();
+  const defaultEndDate = new Date();
+  defaultStartDate.setHours(0, 0, 0, 0);
+  defaultEndDate.setHours(23, 59, 59, 999);
+  const dfop1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
+  const dfop2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
+  const defaultFilter = {
+    id: 0,
+    fieldType: "datetime",
+    field,
+    fixed,
+    isSetted: true,
+    operator: "b",
+    operand1: dfop1,
+    operand2: dfop2
+  };
+  return defaultFilter;
+};
+const getDateLabels = (filter, getLabel, formatters) => {
+  const { dateFormatter } = formatters;
+  let labelOperands;
+  if (filter.operator === "b") {
+    labelOperands = filter.operand1 && filter.operand2 ? `${dateFormatter.formatDate(
+      filter.operand1,
+      dateFormatter.datetimeFormat
+    )} - ${dateFormatter.formatDate(
+      filter.operand2,
+      dateFormatter.datetimeFormat
+    )}` : "";
+  } else {
+    labelOperands = filter.operand1 ? dateFormatter.formatDate(filter.operand1, dateFormatter.datetimeFormat) : "";
+  }
+  return {
+    labelField: getLabel(filter.field.dictionaryId),
+    labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+    labelOperands
+  };
+};
+const getDateTimeSchema = (getLabel) => Yup.object({
+  formValueOperator: Yup.object().nullable().required(getLabel(`operator_required`)),
+  formValueOperand1: Yup.date().required(getLabel(`dynamic_filter.error_invalid_date`)).typeError(getLabel(`dynamic_filter.error_invalid_date`)),
+  formValueOperand2: Yup.mixed().when(["formValueOperator.id"], {
+    is: "b",
+    then: Yup.date().typeError(getLabel(`dynamic_filter.error_invalid_date`)).min(
+      Yup.ref("formValueOperand1"),
+      getLabel(`dynamic_filter.error_less_than_start`)
+    )
+  })
+});
+const getDateTimeFormValue = (field, getLabel, filterValueDateTime) => {
+  const filterValue = filterValueDateTime;
+  const operator = filterValue ? filterValue.operator : field.defaultOperator ?? "b";
+  const defaultStartDate = new Date();
+  const defaultEndDate = new Date();
+  const dfop1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
+  const dfop2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
+  const formValueOperand1 = filterValue ? filterValue.operand1 : dfop1;
+  const formValueOperand2 = filterValue && filterValue.operator === "b" ? filterValue.operand2 : dfop2;
+  return {
+    fieldType: "datetime",
+    formValueOperator: {
+      id: operator,
+      label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+    },
+    formValueOperand1,
+    formValueOperand2
+  };
+};
+const getFilterFromDateTimeFormValue = (formFilterValue) => {
+  const operator = formFilterValue.formValueOperator.id;
+  const operand1 = formFilterValue.formValueOperand1;
+  if (operator === "b") {
+    const operand2 = formFilterValue.formValueOperand2;
+    return {
+      fieldType: "datetime",
+      operator,
+      operand1,
+      operand2
+    };
+  } else {
+    return {
+      fieldType: "datetime",
+      operator,
+      operand1
+    };
+  }
+};
+const getDefaultNumberFilter = (fieldNumber, fixed) => {
+  const field = fieldNumber;
+  const dOperator = field.defaultOperator ?? "e";
+  const dfop1 = field.defaultOperand1 ?? null;
+  const dfop2 = field.defaultOperand2 ?? null;
+  const defaultFilter = {
+    id: 0,
+    fieldType: "number",
+    field,
+    fixed,
+    isSetted: false,
+    operator: dOperator,
+    operand1: dfop1,
+    operand2: dfop2
+  };
+  return defaultFilter;
+};
+const getNumberLabels = (filter, getLabel) => {
+  let labelOperands;
+  if (filter.operator === "b") {
+    labelOperands = filter.operand1 && filter.operand2 ? `${filter.operand1} - ${filter.operand2}` : "";
+  } else {
+    labelOperands = filter.operand1 !== void 0 ? filter.operand1 + "" : "";
+  }
+  return {
+    labelField: getLabel(filter.field.dictionaryId),
+    labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
+    labelOperands
+  };
+};
+const getNumberSchema = (getLabel) => Yup.object({
+  formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
+  formValueOperand1: Yup.number().typeError(
+    getLabel(`dynamic_filter.error_operand_mustbe_number`)
+  ),
+  formValueOperand2: Yup.mixed().when(["formValueOperator.id"], {
+    is: "b",
+    then: Yup.number().typeError(getLabel(`dynamic_filter.error_operand_mustbe_number`)).min(
+      Yup.ref("formValueOperand1"),
+      getLabel(`dynamic_filter.error_less_than_start`)
+    )
+  })
+});
+const getNumberFormValue = (field, getLabel, filterValue) => {
+  const filterValueNumber = filterValue;
+  const operator = filterValueNumber ? filterValueNumber.operator : field.defaultOperator ?? "e";
+  const formValueOperand1 = filterValueNumber ? filterValueNumber.operand1 : null;
+  const formValueOperand2 = filterValueNumber && filterValueNumber?.operator === "b" ? filterValueNumber.operand2 : null;
+  return {
+    fieldType: "number",
+    formValueOperator: {
+      id: operator,
+      label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
+    },
+    formValueOperand1,
+    formValueOperand2
+  };
+};
+const getFilterFromNumberFormValue = (formFilterValue) => {
+  const operator = formFilterValue.formValueOperator.id;
+  const operand1 = formFilterValue.formValueOperand1 ? formFilterValue.formValueOperand1 : 0;
+  if (operator === "b") {
+    const operand2 = formFilterValue.formValueOperand2 ? formFilterValue.formValueOperand2 : 0;
+    return {
+      fieldType: "number",
+      operator,
+      operand1,
+      operand2
+    };
+  } else {
+    return {
+      fieldType: "number",
+      operator,
+      operand1
+    };
+  }
+};
+const strategiesEditFilterComponent = {
+  boolean: BooleanFilter,
+  datetime: DateTimeFilter,
+  number: NumberFilter,
+  string: StringFilter,
+  __default__: () => {
+    throw new Error("Type no defined");
+  }
+};
+const DataTypeComponent = (props) => {
+  const {
+    formFilter,
+    statusLoad
+  } = props;
+  const {
+    setFocus
+  } = useFormContext();
+  const Component = strategiesEditFilterComponent[formFilter.field.type] ?? strategiesEditFilterComponent.__default__;
+  useEffect(() => {
+    setTimeout(() => setFocus("formValueOperand1"), 100);
+  }, [statusLoad]);
+  return /* @__PURE__ */ jsx(Component, {});
+};
+const strategiesLabelsFilters = {
+  boolean: getBooleanLabels,
+  datetime: getDateLabels,
+  number: getNumberLabels,
+  string: getStringLabels,
+  __default__: () => {
+    throw new Error("Type no defined");
+  }
+};
+const getLabelsFilter = (filter, getLabel, formatters) => {
+  const transformer = strategiesLabelsFilters[filter.field.type] ?? strategiesLabelsFilters.__default__;
+  return transformer(filter, getLabel, formatters);
+};
+const strategiesDefaultFilterValues = {
+  boolean: getDefaultBooleanFilter,
+  datetime: getDefaultDateTimeFilter,
+  number: getDefaultNumberFilter,
+  string: getDefaultStringFilter,
+  __default__: () => {
+    throw new Error("Type no defined");
+  }
+};
+const getDefaultValues = (field, fixed) => {
+  const transformer = strategiesDefaultFilterValues[field.type] ?? strategiesDefaultFilterValues.__default__;
+  return transformer(field, fixed);
+};
+const strategiesSchhemaValidationsFilters = {
+  boolean: getBooleanSchema,
+  datetime: getDateTimeSchema,
+  number: getNumberSchema,
+  string: getStringSchema,
+  __default__: () => {
+    throw new Error("Type no defined");
+  }
+};
+const getSchemaValidations = (field, getLabel) => {
+  const transformer = strategiesSchhemaValidationsFilters[field.type] ?? strategiesSchhemaValidationsFilters.__default__;
+  return transformer(getLabel);
+};
+const strategiesFormValue = {
+  boolean: getBooleanFormValue,
+  datetime: getDateTimeFormValue,
+  number: getNumberFormValue,
+  string: getStringFormValue,
+  __default__: () => {
+    throw new Error("Type no defined");
+  }
+};
+const getFormValue = (field, getLabel, filter) => {
+  const transformer = strategiesFormValue[field.type] ?? strategiesFormValue.__default__;
+  return transformer(field, getLabel, filter);
+};
+const strategiesFilterFromFormValue = {
+  boolean: getFilterFromBooleanFormValue,
+  datetime: getFilterFromDateTimeFormValue,
+  number: getFilterFromNumberFormValue,
+  string: getFilterFromStringFormValue,
+  __default__: () => {
+    throw new Error("Type no defined");
+  }
+};
+const getFilterFromFormValue = (filter) => {
+  const transformer = strategiesFilterFromFormValue[filter.fieldType] ?? strategiesFilterFromFormValue.__default__;
+  return transformer(filter);
+};
+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 (!isValidDate(new Date(filter.operand1))) {
+    return false;
+  }
+  if (filter.operator === "b") {
+    if (typeof filter.operand2 !== "string") {
+      return false;
+    }
+    if (!isValidDate(new Date(filter.operand1))) {
+      return false;
+    }
+  }
+  return true;
+};
+const verifyNumberFilter = (filter) => {
+  if (typeof filter.operator !== "number") {
+    return false;
+  }
+  if (NUMBER_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
+    return false;
+  }
+  if (typeof filter.operand1 !== "number") {
+    return false;
+  }
+  if (filter.operator === "b" && typeof filter.operand2 !== "number") {
+    return false;
+  }
+  return true;
+};
+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 formatToInitialFilters = (applyedFilters) => {
+  return applyedFilters.map((af) => {
+    const ret = {
+      name: af.field.name,
+      operator: af.operator,
+      operand1: af.operand1,
+      operand2: af.operator === "b" ? af.operand2 : void 0
+    };
+    if (af.fieldType === "datetime") {
+      ret.operand1 = af.operand1.toISOString();
+      ret.operand2 = af.operator === "b" ? af.operand2.toISOString() : void 0;
+    }
+    return ret;
+  });
+};
+const formatToRawFilter = (applyedFilters) => {
+  return applyedFilters.map((af) => ({
+    n: af.field.name,
+    o: af.operator,
+    o1: af.operand1,
+    o2: af.operator === "b" ? af.operand2 : void 0
+  }));
+};
+const getPurgedInitialFiltersApplyed = (fields, initialFilters, getFieldByName) => {
+  const newFilters = [];
+  const fixedFields = [];
+  for (let index = 0; index < initialFilters.length; index++) {
+    try {
+      let add;
+      const initialFilter = initialFilters[index];
+      const field = getFieldByName(initialFilter.name);
+      const filter = {
+        id: 0,
+        isSetted: true,
+        fixed: false,
+        field,
+        fieldType: field.type,
+        operator: initialFilters[index].operator,
+        operand1: initialFilters[index].operand1,
+        operand2: initialFilters[index].operand2
+      };
+      if (!field)
+        continue;
+      switch (field.type) {
+        case "string":
+          add = verifyStringFilter(initialFilter);
+          break;
+        case "number":
+          add = verifyNumberFilter(initialFilter);
+          break;
+        case "boolean":
+          add = verifyBooleanFilter(initialFilter);
+          break;
+        case "datetime":
+          add = verifyDateTime(initialFilter);
+          break;
+        default:
+          add = false;
+      }
+      if (add) {
+        if (filter.fieldType === "datetime") {
+          filter.operand1 = new Date(filter.operand1 + "");
+          filter.operand2 = new Date(filter.operand2 + "");
+        }
+        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;
+        newFilters.push(filter);
+      }
+    } catch (error) {
+    }
+  }
+  for (let index = 0; index < fields.length; index++) {
+    const field = fields[index];
+    if (field.presence === "initialized" || field.presence === "fixed") {
+      if (!initialFilters.find((f) => f.name === field.name)) {
+        const newFilter = getDefaultValues(field, field.presence === "fixed");
+        newFilter.id = newFilters.length + 1;
+        newFilters.push(newFilter);
+      }
+    }
+  }
+  return newFilters;
+};
+const updateAvailableFieldsNoBoilerPlate = (state) => {
+  const newFields = [];
+  for (let index = 0; index < state.fields.length; index++) {
+    let add;
+    const field = state.fields[index];
+    add = true;
+    if (field.multiple !== void 0 && field.multiple === false) {
+      const fIndx = state.applyedFilters.findIndex((f) => f.field.name === field.name);
+      if (fIndx > -1) {
+        add = false;
+      }
+    }
+    if (add) {
+      newFields.push(field);
+    }
+  }
+  state.availableFields = newFields;
+};
+const updateOwnerStateClasses = (state) => {
+  state.classes = useUtilityClasses(state.ownerState);
+};
+const createAreaStore = (initProps) => {
+  const startProps = {
+    applyedFilters: [],
+    availableFields: [],
+    fnAnchorEl: void 0,
+    popoverFilterData: void 0,
+    classes: useUtilityClasses(initProps.ownerState),
+    inputData: "",
+    ...initProps
+  };
+  return createStore(
+    devtools(
+      immer((set, get) => ({
+        ...startProps,
+        actions: {
+          init: (initialFiltersApplyed) => {
+            set((state) => {
+              state.applyedFilters = getPurgedInitialFiltersApplyed(
+                state.fields,
+                initialFiltersApplyed,
+                state.actions.getFieldByName
+              );
+              updateAvailableFieldsNoBoilerPlate(state);
+            });
+          },
+          getFieldByName: (name) => {
+            const field = (get().withAllField ? get().fields.concat(get().allField) : get().fields).find((f) => {
+              return f.name === name;
+            });
+            if (field) {
+              return field;
+            }
+            throw new Error("No exist field");
+          },
+          removeFilter: (id) => {
+            set((state) => {
+              const index_to_remove = state.applyedFilters.findIndex(
+                (f) => id === f.id && !f.fixed
+              );
+              if (index_to_remove > -1) {
+                state.applyedFilters.splice(index_to_remove, 1);
+              }
+              updateAvailableFieldsNoBoilerPlate(state);
+            });
+          },
+          showPopoverFilterForAdd: (anchorEl, field) => {
+            set((state) => {
+              state.fnAnchorEl = void 0;
+              state.inputData = "";
+              state.popoverFilterData = {
+                openFor: "add",
+                fnAnchorEl: () => anchorEl,
+                field
+              };
+            });
+            get().actions.setInEdition(true);
+          },
+          showPopoverFilterForEdit: (anchorEl, filterToEdit) => {
+            set((state) => {
+              state.popoverFilterData = {
+                openFor: "edit",
+                fnAnchorEl: () => anchorEl,
+                filter: filterToEdit
+              };
+            });
+            get().actions.setInEdition(true);
+          },
+          hidePopoverFilter: (stayInEditon) => {
+            set((state) => {
+              state.popoverFilterData = void 0;
+            });
+            get().actions.setInEdition(stayInEditon);
+          },
+          clearFilters: () => {
+            set((state) => {
+              state.applyedFilters = state.applyedFilters.filter((f) => f.fixed);
+              updateAvailableFieldsNoBoilerPlate(state);
+            });
+          },
+          fireOnChangeFilters: () => {
+            set((state) => {
+              if (state.ownerState.isValid) {
+                if (!state.automatic) {
+                  state.ownerState.isDirty = false;
+                }
+                state.onChangeFilters(
+                  formatToInitialFilters(state.applyedFilters),
+                  formatToRawFilter(state.applyedFilters)
+                );
+              }
+            });
+          },
+          getNewId: () => {
+            return get().applyedFilters.reduce((prev, n) => {
+              return n.id > prev ? n.id : prev;
+            }, 0) + 1;
+          },
+          addFilter: (newFilter) => {
+            set((state) => {
+              state.applyedFilters.push(newFilter);
+            });
+          },
+          updateFilter: (editFilter) => {
+            set((state) => {
+              const index = state.applyedFilters.findIndex(
+                (ap) => ap.id === editFilter.id
+              );
+              if (index > -1) {
+                state.applyedFilters[index] = editFilter;
+              }
+            });
+          },
+          setInputData: (inputData) => {
+            set((state) => {
+              state.inputData = inputData;
+            });
+          },
+          setInEdition: (newInEdition) => {
+            set((state) => {
+              state.ownerState.inEdition = newInEdition;
+              updateOwnerStateClasses(state);
+            });
+          },
+          setIsMobile: (newIsMobile) => {
+            set((state) => {
+              state.ownerState.isMobile = newIsMobile;
+              updateOwnerStateClasses(state);
+            });
+          },
+          openPopoverMenuFields: (anchorEl) => {
+            set((state) => {
+              state.fnAnchorEl = () => anchorEl;
+            });
+          },
+          closePopoverMenuFields: (newInEdition) => {
+            set((state) => {
+              state.fnAnchorEl = void 0;
+              state.ownerState.inEdition = newInEdition || false;
+              updateOwnerStateClasses(state);
+            });
+          }
+        }
+      })),
+      { name: `Dynamic filter` }
+    )
+  );
+};
+const DynamicFilterContext = createContext(null);
+function DynamicFilterProvider(props) {
+  const {
+    automatic = true,
+    withAllField = true,
+    fields,
+    initialApplyedFilters = [],
+    onChangeFilters,
+    children
+  } = props;
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const dynamicFilterStoreRef = useRef();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const isDesktop = useResponsiveDesktop();
+  const isFirstRender = useFirstRender([isDesktop]);
+  if (!dynamicFilterStoreRef.current) {
+    dynamicFilterStoreRef.current = createAreaStore({
+      allField: {
+        ...ALL_FIELDS,
+        urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/all_fields.svg`
+      },
+      withAllField,
+      fields,
+      automatic,
+      onChangeFilters,
+      getLabel,
+      ownerState: {
+        isDirty: !automatic,
+        inEdition: false,
+        isValid: true,
+        isMobile: !isDesktop
+      }
+    });
+    dynamicFilterStoreRef.current.getState().actions.init(initialApplyedFilters);
+  }
+  useEffect(() => {
+    if (isFirstRender) {
+      return;
+    }
+    dynamicFilterStoreRef.current?.getState().actions.setIsMobile(!isDesktop);
+  }, [isDesktop]);
+  return /* @__PURE__ */ jsx(DynamicFilterContext.Provider, {
+    value: dynamicFilterStoreRef.current,
+    children
+  });
+}
+const DynamicFilterRoot = styled("div", {})(({
+  theme
+}) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "flex-start",
+  height: "auto",
+  width: "100%",
+  padding: theme.spacing(0.5),
+  borderRadius: theme.spacing(1),
+  border: `1px solid ${theme.palette.divider}`,
+  [`&.${dynamicFilterClasses.isMobile}`]: {
+    flexDirection: "column",
+    justifyContent: "space-between",
+    minWidth: theme.spacing(25),
+    gap: theme.spacing(0.75)
+  },
+  [`&.${dynamicFilterClasses.root}.${dynamicFilterClasses.inEdition}`]: {
+    border: `1px solid ${theme.palette.primary.main}`
+  },
+  [`&.${dynamicFilterClasses.isMobile} .${dynamicFilterClasses.containerApplyedFilters}`]: {
+    margin: "0px",
+    padding: "0px",
+    border: "0px"
+  },
+  [`&.${dynamicFilterClasses.filterButton}.${dynamicFilterClasses.isDirty}`]: {
+    animationName: "dirtyEffect",
+    animationDuration: "1s",
+    animationFillMode: "both",
+    animationIterationCount: "infinite",
+    transition: "all .3s",
+    "@keyframes dirtyEffect": {
+      "20%": {
+        opacity: 1
+      },
+      "50%": {
+        opacity: 0.5
+      },
+      "100%": {
+        opacity: 1
+      }
+    }
+  },
+  [`&.${dynamicFilterClasses.filterButton} .${dynamicFilterClasses.applyedFilter}`]: {
+    border: `1px solid ${theme.palette.error.main}`
+  },
+  ...theme.components?.M4LDynamicFilter?.styleOverrides
+}));
+const ContainerFistRow = styled("div")(() => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "space-between"
+}));
+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 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)
+}));
+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 {
+    id,
+    fixed,
+    field,
+    isSetted
+  } = props;
+  const classesApplyedFilter = useDynamicFilter((state) => state.classes.applyedFilter);
+  const formatters = useFormatter();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  const {
+    removeFilter,
+    hidePopoverFilter: hidePopupEdit,
+    showPopoverFilterForEdit: showPopupForEdit
+  } = useDynamicFilter((state) => state.actions);
+  const labels = useMemo(() => {
+    return getLabelsFilter(props, getLabel, formatters);
+  }, [props]);
+  const urlIcon = useMemo(() => {
+    return field.urlIcon;
+  }, [field]);
+  const onDelete = () => {
+    hidePopupEdit(false);
+    removeFilter(id);
+  };
+  const onClick = (event) => {
+    hidePopupEdit(false);
+    const currentTarget = event.currentTarget;
+    setTimeout(() => showPopupForEdit(currentTarget, props), 10);
+  };
+  return /* @__PURE__ */ jsxs(WrapperApplyedFilter, {
+    className: clsx(classesApplyedFilter, !isSetted ? "noSetted" : null),
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getTestIdByClass("applyedFilter", field.name)
+    } : {},
+    children: [urlIcon && /* @__PURE__ */ jsx(IconButton, {
+      src: urlIcon,
+      onClick
+    }), /* @__PURE__ */ jsxs(AplyedFilterStyled, {
+      onClick,
+      children: [/* @__PURE__ */ jsx(ContainerField, {
+        children: labels.labelField
+      }), /* @__PURE__ */ jsx(ContainerOperator, {
+        children: labels.labelOperator
+      }), /* @__PURE__ */ jsx(ContainerOperands, {
+        children: labels.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 classesWrapperApplyedFilters = useDynamicFilter((state) => state.classes.wrapperApplyedFilters, shallow);
+  const classesContainerApplyedFilters = useDynamicFilter((state) => state.classes.containerApplyedFilters, shallow);
+  const applyedFilters = useDynamicFilter((state) => state.applyedFilters, shallow);
+  const isSkeleton = useModuleSkeleton();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+      className: classesWrapperApplyedFilters
+    });
+  }
+  return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
+    className: classesWrapperApplyedFilters,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getTestIdByClass("wrapperApplyedFilters")
+    } : {},
+    children: /* @__PURE__ */ jsx(ScrollBar, {
+      children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
+        className: classesContainerApplyedFilters,
+        ...process.env.NODE_ENV !== "production" ? {
+          [TEST_PROP_ID]: getTestIdByClass("containerApplyedFilters")
+        } : {},
+        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 isSkeleton = useModuleSkeleton();
+  const {
+    clearFilters,
+    hidePopoverFilter: hidePopupEdit
+  } = useDynamicFilter((state) => state.actions);
+  const applyedFilters = useDynamicFilter((state) => state.applyedFilters, shallow);
+  const clearFiltersClasses = useDynamicFilter((state) => state.classes.clearFilters, shallow);
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTClearFilters, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: "20px",
+        height: "20px"
+      })
+    });
+  }
+  const onClickClearFilters = () => {
+    hidePopupEdit(false);
+    clearFilters();
+  };
+  if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
+    return /* @__PURE__ */ jsx(WrapperClearFilters, {
+      className: clearFiltersClasses,
+      children: /* @__PURE__ */ jsx(IconButton, {
+        src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`,
+        onClick: onClickClearFilters,
+        dictionaryTooltip: "dynamic_filter.tooltip_clear_filters"
+      })
+    });
+  }
+  return null;
+};
+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)
+}));
+styled("div")(() => ({
+  display: "block"
+}));
+function FilterButton() {
+  const automatic = useDynamicFilter((state) => state.automatic);
+  const isValid = useDynamicFilter((state) => state.ownerState.isValid);
+  const isDirty = useDynamicFilter((state) => state.ownerState.isDirty);
+  const {
+    fireOnChangeFilters
+  } = useDynamicFilter((state) => state.actions);
+  const classesFilterButton = useDynamicFilter((state) => state.classes.filterButton);
+  const isSkeleton = useModuleSkeleton();
+  const {
+    host_static_assets,
+    environment_assets
+  } = useEnvironment();
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "circular",
+        width: 20,
+        height: 20
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(IconButton, {
+    className: classesFilterButton,
+    bgColor: "primary.main",
+    dictionaryTooltip: getDynamicFilterDictionary(isValid ? isDirty ? DICCTIONARY.filter_tooltip_dirty : DICCTIONARY.filter_tooltip_refresh : DICCTIONARY.filter_tooltip_invalid),
+    onClick: fireOnChangeFilters,
+    "aria-label": "settings",
+    src: `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${automatic ? ASSETS.refresh : ASSETS.search}`
+  });
+}
+function PopoverMenuFields(props) {
+  const {
+    selectFieldIndex,
+    fields
+  } = props;
+  const fnAnchorEl = useDynamicFilter((state) => state.fnAnchorEl, shallow);
+  const classesPopUpMenuFields = useDynamicFilter((state) => state.classes.popUpMenuFields, shallow);
+  const classespopoverMenuFieldsItem = useDynamicFilter((state) => state.classes.popoverMenuFieldsItem, shallow);
+  const {
+    showPopoverFilterForAdd,
+    closePopoverMenuFields
+  } = useDynamicFilter((state) => state.actions, shallow);
+  const handleClosePopover = () => {
+    closePopoverMenuFields(false);
+  };
+  const handleOpenPopUpClickItem = (_event, field) => {
+    if (fnAnchorEl) {
+      showPopoverFilterForAdd(fnAnchorEl(), field);
+    }
+  };
+  return /* @__PURE__ */ jsx(Popover, {
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getTestIdByClass("popUpMenuFields")
+    } : {},
+    disableRestoreFocus: true,
+    className: classesPopUpMenuFields,
+    open: Boolean(fnAnchorEl),
+    anchorEl: fnAnchorEl && fnAnchorEl(),
+    onClose: handleClosePopover,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    disableAutoFocus: true,
+    arrowType: "top-left",
+    sx: {
+      "& .MuiMenuItem-root": {
+        px: 1,
+        typography: "body2",
+        borderRadius: 0.75
+      },
+      mt: "16px"
+    },
+    children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ createElement(MenuItem, {
+      ...process.env.NODE_ENV !== "production" ? {
+        [TEST_PROP_ID]: getTestIdByClass("popoverMenuFieldsItem", field.name)
+      } : {},
+      className: classespopoverMenuFieldsItem,
+      key: `menu_action_${index}`,
+      dense: true,
+      onClick: (event) => handleOpenPopUpClickItem(event, field),
+      selected: index === selectFieldIndex
+    }, /* @__PURE__ */ jsx(Icon, {
+      src: field.urlIcon
+    }), /* @__PURE__ */ jsx(LabelMemuItem, {
+      children: field.dictionaryId
+    })))
+  });
+}
+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)
+  },
+  "& > input": {
+    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 anchorEl = useDynamicFilter((state) => state.fnAnchorEl, shallow);
+  useDynamicFilter((state) => state.popoverFilterData, shallow);
+  const withAllField = useDynamicFilter((state) => state.withAllField);
+  const inputData = useDynamicFilter((state) => state.inputData);
+  const availableFields = useDynamicFilter((state) => state.availableFields, shallow);
+  const classesContainerInputFilter = useDynamicFilter((state) => state.classes.containerInputFilter, shallow);
+  const {
+    showPopoverFilterForAdd,
+    addFilter,
+    openPopoverMenuFields,
+    closePopoverMenuFields,
+    hidePopoverFilter,
+    getFieldByName,
+    getNewId,
+    setInEdition,
+    setInputData
+  } = useDynamicFilter((state) => state.actions, shallow);
+  const isSkeleton = useModuleSkeleton();
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const [selectFieldIndex, setSelectFieldIndex] = useState(-1);
+  const [finalFields, setFinalFields] = useState([]);
+  useEffect(() => {
+    if (!anchorEl) {
+      setFinalFields([]);
+      return;
+    }
+    setFinalFields(availableFields.filter((field) => field.dictionaryId.includes(inputData)));
+    setSelectFieldIndex(-1);
+  }, [anchorEl, inputData, availableFields]);
+  const handleOpenPopUpClickItem = (field) => {
+    closePopoverMenuFields();
+    if (anchorEl)
+      showPopoverFilterForAdd(anchorEl(), field);
+  };
+  const onFocusInputFilter = (event) => {
+    openPopoverMenuFields(event.currentTarget);
+    setInEdition(true);
+  };
+  const onChangeInputFilter = (event) => {
+    setInputData(event.target.value);
+    if (!anchorEl) {
+      openPopoverMenuFields(event.currentTarget);
+    }
+    hidePopoverFilter(true);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      let newIndex = -1;
+      if (finalFields.length > 0) {
+        if (selectFieldIndex < finalFields.length - 1) {
+          newIndex = selectFieldIndex + 1;
+        } else {
+          newIndex = finalFields.length - 1;
+        }
+      }
+      setSelectFieldIndex(newIndex);
+    }
+    if (event.key === "ArrowUp") {
+      let newIndex = -1;
+      if (finalFields.length > 0) {
+        if (selectFieldIndex > -1) {
+          newIndex = selectFieldIndex - 1;
+        }
+      }
+      setSelectFieldIndex(newIndex);
+    }
+    if (event.key === "Escape") {
+      closePopoverMenuFields();
+    }
+    if (event.key !== "Enter")
+      return;
+    if (selectFieldIndex === -1) {
+      if (inputData.trim() === "") {
+        closePopoverMenuFields();
+        return;
+      }
+      if (withAllField) {
+        addFilter({
+          id: getNewId(),
+          fieldType: "string",
+          field: getFieldByName(ALL_FIELDS.name),
+          isSetted: true,
+          fixed: false,
+          operator: "c",
+          operand1: inputData
+        });
+        setInputData("");
+        closePopoverMenuFields();
+      }
+    } else {
+      handleOpenPopUpClickItem(finalFields[selectFieldIndex]);
+    }
+  };
+  if (isSkeleton) {
+    return /* @__PURE__ */ jsx(WrapperInputFilter, {
+      children: /* @__PURE__ */ jsx(Skeleton, {
+        variant: "text",
+        width: "100%",
+        height: 24
+      })
+    });
+  }
+  if (!withAllField && availableFields.length == 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(WrapperInputFilter, {
+    className: classesContainerInputFilter,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getTestIdByClass("containerInputFilter")
+    } : {},
+    children: [/* @__PURE__ */ jsx("input", {
+      type: "text",
+      value: inputData,
+      placeholder: getLabel(getDynamicFilterDictionary("input_placeholder")),
+      onFocus: onFocusInputFilter,
+      onChange: onChangeInputFilter,
+      onKeyDown: handleKeyDown
+    }), /* @__PURE__ */ jsx(PopoverMenuFields, {
+      selectFieldIndex,
+      fields: finalFields
+    })]
+  });
+}
+const TitleContainer = styled$2("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 StyledHeaderFilter = styled$2("div")(({
+  theme
+}) => ({
+  width: "100%",
+  display: "flex",
+  justifyContent: "flex-start",
+  alignItems: "center",
+  borderBottom: `1px solid ${theme.palette.divider}`
+}));
+const PopoverFilter = () => {
+  let popupValidationSchema;
+  let field;
+  let formFilter;
+  let filterFormValue;
+  let anchorEl;
+  const popoverFilterData = useDynamicFilter((state) => state.popoverFilterData, shallow);
+  const refPreviousPopoverFilterData = useRef(popoverFilterData);
+  const classesPopoverFilterPapper = useDynamicFilter((state) => state.classes.popoverFilterPaper, shallow);
+  const classesPopoverFilterHeader = useDynamicFilter((state) => state.classes.popoverFilterHeader, shallow);
+  const {
+    hidePopoverFilter,
+    addFilter,
+    updateFilter,
+    getNewId
+  } = useDynamicFilter((state) => state.actions);
+  const {
+    getLabel
+  } = useModuleDictionary();
+  const onClose = useCallback(() => {
+    hidePopoverFilter(false);
+  }, []);
+  const handleKeyDownPopper = useCallback((event) => {
+    if (event.key === "Escape") {
+      onClose();
+    }
+  }, []);
+  const statusLoad = useMemo(() => {
+    let returnStatus;
+    if (popoverFilterData && refPreviousPopoverFilterData.current === void 0) {
+      returnStatus = "ready";
+    } else if (!popoverFilterData) {
+      returnStatus = "initial";
+    } else {
+      returnStatus = "reload_values_provider";
+    }
+    refPreviousPopoverFilterData.current = popoverFilterData;
+    return returnStatus;
+  }, [popoverFilterData]);
+  if (!popoverFilterData) {
+    return null;
+  }
+  if (popoverFilterData.openFor === "add") {
+    popupValidationSchema = getSchemaValidations(popoverFilterData.field, getLabel);
+    field = popoverFilterData.field;
+    anchorEl = popoverFilterData.fnAnchorEl();
+    filterFormValue = getFormValue(field, getLabel);
+    formFilter = {
+      field,
+      id: getNewId(),
+      isSetted: true,
+      fixed: false,
+      ...filterFormValue
+    };
+  } else {
+    field = popoverFilterData.filter.field;
+    anchorEl = popoverFilterData.fnAnchorEl();
+    popupValidationSchema = getSchemaValidations(popoverFilterData.filter.field, getLabel);
+    filterFormValue = getFormValue(field, getLabel, popoverFilterData.filter);
+    formFilter = {
+      ...popoverFilterData.filter,
+      ...filterFormValue
+    };
+  }
+  const onSubmit = async (data) => {
+    const newFilter = {
+      ...formFilter,
+      ...getFilterFromFormValue({
+        ...filterFormValue,
+        ...data
+      })
+    };
+    if (popoverFilterData?.openFor === "add") {
+      addFilter(newFilter);
+    } else {
+      updateFilter(newFilter);
+    }
+    hidePopoverFilter(false);
+  };
+  const handleClosePopover = () => {
+    hidePopoverFilter(false);
+  };
+  return /* @__PURE__ */ jsx(Popover, {
+    open: true,
+    anchorEl,
+    disableRestoreFocus: true,
+    onKeyDown: handleKeyDownPopper,
+    onClose: handleClosePopover,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    arrowType: "top-left",
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_ID]: getTestIdByClass("popoverFilterPaper")
+    } : {},
+    PaperProps: {
+      className: classesPopoverFilterPapper,
+      sx: {
+        mt: "12px"
+      }
+    },
+    children: /* @__PURE__ */ jsxs(RHFormProvider, {
+      onSubmit,
+      values: filterFormValue,
+      validationSchema: popupValidationSchema,
+      statusLoad,
+      children: [/* @__PURE__ */ jsxs(StyledHeaderFilter, {
+        className: classesPopoverFilterHeader,
+        children: [field.urlIcon && /* @__PURE__ */ jsx(Icon, {
+          src: field.urlIcon
+        }), /* @__PURE__ */ jsx(TitleContainer, {
+          children: getLabel(field.dictionaryId)
+        })]
+      }), /* @__PURE__ */ jsx(DataTypeComponent, {
+        formFilter,
+        statusLoad
+      }), /* @__PURE__ */ jsxs(Actions, {
+        children: [/* @__PURE__ */ jsx(ActionCancel, {
+          onClick: onClose
+        }), /* @__PURE__ */ jsx(ActionIntro, {})]
+      })]
+    })
+  });
+};
+const InnerForHooks = () => {
+  const isMobile = useDynamicFilter((state) => state.ownerState.isMobile, shallow);
+  const classesRoot = useDynamicFilter((state) => state.classes.root, shallow);
+  const classesContainerFistRow = useDynamicFilter((state) => state.classes.containerFistRow, shallow);
+  const fields = useDynamicFilter((state) => state.fields, shallow);
+  return /* @__PURE__ */ jsx(DynamicFilterRoot, {
+    "data-testid": "DynamicFilter",
+    className: classesRoot,
+    ...process.env.NODE_ENV !== "production" ? {
+      [TEST_PROP_FIELDS]: fields
+    } : {},
+    children: !isMobile ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
+    }) : /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsxs(ContainerFistRow, {
+        className: classesContainerFistRow,
+        children: [/* @__PURE__ */ jsx(FilterButton, {}), /* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ClearFilters, {})]
+      }), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {})]
+    })
+  });
+};
+const DynamicFilter = (inProps) => {
+  const render = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
+  if (!render) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(DynamicFilterProvider, {
+    ...inProps,
+    children: /* @__PURE__ */ jsx(InnerForHooks, {})
+  });
+};
+export {
+  DynamicFilter as D,
+  LABEL_FILTER_BUTTON as L,
+  DYNAMICFILTER_DICTIONARY_ID as a,
+  DICCTIONARY as b,
+  getDynamicFilterDictionary as c,
+  defaultDynamicFilterDictionary as d,
+  getDynamicFilterComponentsDictionary as g
+};