@m4l/components 0.2.35 → 0.2.36

package/components/DynamicFilter/index.c52a8e96.js

@@ -1,1954 +0,0 @@
-import { useContext, useMemo, useEffect, createContext, useRef, createElement, useState, useCallback } from "react";
-import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
-import { useStore, createStore } from "zustand";
-import { generateUtilityClasses, styled, alpha, Skeleton, MenuItem } from "@mui/material";
-import { unstable_composeClasses } from "@mui/base";
-import { g as getComponentUtilityClass, i as isValidDate } from "../../utils/index.6469f148.js";
-import { devtools } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-import { T as TEST_PROP_ID } from "../../test/constants_no_mock.86c553a9.js";
-import { g as getCommonActionsDictionary, A as Actions } from "../CommonActions/components/Actions/index.fa7ab18c.js";
-import { g as getRHFAutocompleteComponentsDictionary, R as RHFAutocomplete } from "../hook-form/RHFAutocomplete/index.1f2afb6b.js";
-import { g as getNameDataTestId } from "../../test/getNameDataTestId.14875ec7.js";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useFormContext, useWatch } from "react-hook-form";
-import { shallow } from "zustand/shallow";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.e554b068.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.1bfa601f.js";
-import * as Yup from "yup";
-import { R as RHFAutocompleteAsync } from "../hook-form/RHFAutocompleteAsync/index.bc278965.js";
-import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
-import { S as ScrollBar } from "../ScrollBar/index.7dfc2f29.js";
-import clsx from "clsx";
-import { I as IconButton } from "../mui_extended/IconButton/index.f8a3021b.js";
-import { L as LabelMemuItem } from "../mui_extended/MenuActions/index.90f53670.js";
-import { P as Popover } from "../mui_extended/Popover/index.d85de73b.js";
-import { I as Icon } from "../Icon/index.ad330e78.js";
-import { useTheme } from "@mui/material/styles";
-import { R as RHFormProvider } from "../../contexts/RHFormContext/index.7b2a8723.js";
-import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.416cbf9b.js";
-import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.094290fd.js";
-import { T as Typography } from "../mui_extended/Typography/index.379dd374.js";
-const COMPONENT_PREFIX = "M4LDynamicFilter";
-const COMPONENT_CLASS_NAME = "M4LDynamicFilter";
-const ASSETS_URL = "frontend/components/dynamic_filter/assets/icons";
-const ASSETS = {
-  refresh: "restart.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 SELECT_OPERATORS = ["in", "nin"];
-const DATE_TIME_OPERATORS = [
-  "b",
-  "e",
-  "ne",
-  "gt",
-  "gte",
-  "lt",
-  "lte"
-];
-const dynamicFilterClasses = generateUtilityClasses(COMPONENT_CLASS_NAME, [
-  "root",
-  "filterButton",
-  "containerFistRow",
-  "containerInputFilter",
-  "wrapperApplyedFilters",
-  "containerApplyedFilters",
-  "containerClearFilter",
-  "clearFiltersButton",
-  "applyedFilter",
-  "popoverMenuFields",
-  "popoverMenuFieldsPaper",
-  "popoverMenuFieldsItem",
-  "popoverFilter",
-  "popoverFilterPaper",
-  "popoverFilterHeader",
-  "popoverHeaderTitle",
-  "containerBooleanFilter",
-  "containerDateTimeFilter",
-  "containerNumberFilter",
-  "containerStringFilter",
-  "containerSelectFilter",
-  "classespopoverLabelMemuItem",
-  "popoverContainerFields",
-  "classesFilterButton",
-  "inputFilter",
-  "isSkeleton",
-  "isMobile",
-  "inEdition",
-  "isDirty",
-  "isInvalid",
-  "noSetted",
-  "isEmpty"
-]);
-const useUtilityClasses = (ownerState) => {
-  const slots = {
-    root: ["root", ownerState.inEdition && "inEdition", ownerState.isDirty && "isDirty", !ownerState.isValid && "isInvalid", ownerState.isMobile && "isMobile", ownerState.isSkeleton && "isSkeleton", ownerState.isEmpty && "isEmpty"],
-    filterButton: ["filterButton"],
-    containerFistRow: ["containerFistRow"],
-    containerInputFilter: ["containerInputFilter"],
-    classesFilterButton: ["classesFilterButton"],
-    wrapperApplyedFilters: ["wrapperApplyedFilters"],
-    containerApplyedFilters: ["containerApplyedFilters"],
-    containerClearFilter: ["containerClearFilter"],
-    applyedFilter: ["applyedFilter"],
-    clearFiltersButton: ["clearFiltersButton"],
-    popoverContainerFields: ["popoverContainerFields"],
-    popoverMenuFields: ["popoverMenuFields"],
-    popoverMenuFieldsPaper: ["popoverMenuFieldsPaper"],
-    popoverMenuFieldsItem: ["popoverMenuFieldsItem"],
-    popoverFilter: ["popoverFilter"],
-    classespopoverLabelMemuItem: ["classespopoverLabelMemuItem"],
-    popoverFilterPaper: ["popoverFilterPaper"],
-    popoverFilterHeader: ["popoverFilterHeader"],
-    popoverHeaderTitle: ["popoverHeaderTitle"],
-    containerBooleanFilter: ["containerBooleanFilter"],
-    containerDateTimeFilter: ["containerDateTimeFilter"],
-    containerNumberFilter: ["containerNumberFilter"],
-    containerStringFilter: ["containerStringFilter"],
-    containerSelectFilter: ["containerSelectFilter"],
-    inputFilter: ["inputFilter"]
-  };
-  return unstable_composeClasses(slots, getComponentUtilityClass(COMPONENT_CLASS_NAME), {});
-};
-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_DICTIONARY_ID = "dynamic_filter";
-function getDynamicFilterComponentsDictionary() {
-  return [DYNAMICFILTER_DICTIONARY_ID].concat(
-    getCommonActionsDictionary().concat(getRHFAutocompleteComponentsDictionary())
-  );
-}
-const DICCTIONARY = {
-  input_placeholder: "input_placeholder",
-  operand_true: "operand_true",
-  operand_false: "operand_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",
-  operator_in: "operator_in",
-  operator_nin: "operator_nin",
-  label_boolean_operator: "label_boolean_operator",
-  label_boolean_operand1: "label_boolean_operand1",
-  label_operator_date_time: "label_operator_date_time",
-  label_operand1_date_time: "label_operand1_date_time",
-  label_operand2_date_time: "label_operand2_date_time",
-  label_operator_number: "label_operator_number",
-  label_operand1_number: "label_operand1_number",
-  label_operand2_number: "label_operand2_number",
-  label_operator_string: "label_operator_string",
-  label_operand1_string: "label_operand1_string",
-  operator_required: "operator_required",
-  error_invalid_date: "error_invalid_date",
-  error_less_than_start: "error_less_than_start",
-  label_select_operator: "label_select_operator",
-  label_select_operands_array: "label_select_operands_array",
-  error_operand_required: "error_operand_required"
-};
-const getDynamicFilterDictionary = (key) => {
-  return `${DYNAMICFILTER_DICTIONARY_ID}.${key}`;
-};
-function BooleanFilter() {
-  const classesContainerBooleanFilter = useDynamicFilter((state) => state.classes.containerBooleanFilter);
-  const dataTestId = 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(DICCTIONARY.operand_true))
-  }, {
-    value: false,
-    label: getLabel(getDynamicFilterDictionary(DICCTIONARY.operand_false))
-  }], [getLabel]);
-  return /* @__PURE__ */ jsxs("div", {
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerBooleanFilter", dataTestId)
-    } : {},
-    className: classesContainerBooleanFilter,
-    children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
-      name: "formValueOperator",
-      autoComplete: "off",
-      options: operators,
-      getOptionLabel: (option) => option.label,
-      isOptionEqualToValue: (option, value) => option.id === value.id,
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_boolean_operator))
-    }), /* @__PURE__ */ jsx(RHFAutocomplete, {
-      name: "formValueOperand1",
-      autoComplete: "off",
-      options: optionsYesNo,
-      getOptionLabel: (option) => option.label,
-      isOptionEqualToValue: (option, value) => option.value === value.value,
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_boolean_operand1))
-    })]
-  });
-}
-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("div", {
-    className: classesContainerDateTimeFilter,
-    children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
-      name: "formValueOperator",
-      autoComplete: "off",
-      options: operators,
-      getOptionLabel: (option) => option.label,
-      isOptionEqualToValue: (option, value) => option.id === value.id,
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operator_date_time))
-    }), /* @__PURE__ */ jsx(RHFDateTime, {
-      name: "formValueOperand1",
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand1_date_time))
-    }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFDateTime, {
-      name: "formValueOperand2",
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand2_date_time))
-    })]
-  });
-}
-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("div", {
-    className: classesContainerNumberFilter,
-    children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
-      name: "formValueOperator",
-      autoComplete: "off",
-      options: operators,
-      getOptionLabel: (option) => option.label,
-      isOptionEqualToValue: (option, value) => option.id === value.id,
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operator_number))
-    }), /* @__PURE__ */ jsx(RHFTextField, {
-      name: "formValueOperand1",
-      type: "number",
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand1_number))
-    }), operator && operator.id === "b" && /* @__PURE__ */ jsx(RHFTextField, {
-      name: "formValueOperand2",
-      type: "number",
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand2_number))
-    })]
-  });
-}
-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("div", {
-    className: classesContainerStringFilter,
-    children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
-      name: "formValueOperator",
-      autoComplete: "off",
-      options: operators,
-      getOptionLabel: (option) => option.label,
-      isOptionEqualToValue: (option, value) => option.id === value.id,
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operator_string))
-    }), /* @__PURE__ */ jsx(RHFTextField, {
-      name: "formValueOperand1",
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_operand1_string))
-    })]
-  });
-}
-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"));
-  const ret = {
-    labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-    labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
-    labelOperands
-  };
-  return ret;
-};
-const getBooleanSchema = (getLabel) => Yup.object({
-  formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
-  formValueOperand1: Yup.object().nullable().required(getLabel(`dynamic_filter.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: filter.field.label ?? getLabel(filter.field.dictionaryId),
-    labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
-    labelOperands
-  };
-};
-const getStringSchema = (getLabel) => Yup.object({
-  formValueOperator: Yup.object().nullable().required(getLabel(getDynamicFilterDictionary(DICCTIONARY.operator_required))),
-  formValueOperand1: Yup.string().required(
-    getLabel(getDynamicFilterDictionary(DICCTIONARY.error_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: filter.field.label ?? getLabel(filter.field.dictionaryId),
-    labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
-    labelOperands
-  };
-};
-const getDateTimeSchema = (getLabel) => Yup.object({
-  formValueOperator: Yup.object().nullable().required(getLabel(getDynamicFilterDictionary(DICCTIONARY.operator_required))),
-  formValueOperand1: Yup.date().required(getLabel(getDynamicFilterDictionary(DICCTIONARY.error_invalid_date))).typeError(getLabel(getDynamicFilterDictionary(DICCTIONARY.error_invalid_date))),
-  formValueOperand2: Yup.mixed().when(["formValueOperator.id"], {
-    is: "b",
-    then: Yup.date().typeError(getLabel(getDynamicFilterDictionary(DICCTIONARY.error_invalid_date))).min(
-      Yup.ref("formValueOperand1"),
-      getLabel(getDynamicFilterDictionary(DICCTIONARY.error_invalid_date))
-    )
-  })
-});
-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: filter.field.label ?? 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
-    };
-  }
-};
-function filterValidOperandsArraySelect(operandsArray, field) {
-  const operandsArrayFormatted = Array.isArray(operandsArray) ? operandsArray : [operandsArray];
-  const getOptionId = field?.selectOptions?.getOptionId;
-  const getOptionLabel = field?.selectOptions?.getOptionLabel;
-  return operandsArrayFormatted?.filter((operand) => {
-    return typeof operand === "object" && getOptionId?.(operand) && getOptionLabel?.(operand);
-  });
-}
-const getDefaultSelectFilter = (field, fixed) => {
-  const defaultOperand = field.defaultOperandsArray;
-  const defaultFilter = {
-    id: 0,
-    fieldType: "select",
-    field,
-    fixed,
-    isSetted: true,
-    operator: "in",
-    operandsArray: []
-  };
-  if (defaultOperand !== void 0 && Array.isArray(defaultOperand)) {
-    const validOperandsArray = filterValidOperandsArraySelect(defaultOperand, field);
-    defaultFilter.operandsArray = validOperandsArray || [];
-  }
-  return defaultFilter;
-};
-const getSelectLabels = (filter, getLabel, formatters, field) => {
-  const operandsArray = filter.operandsArray;
-  const labelOperands = operandsArray?.reduce?.((label, operand) => {
-    const textLabel = field.selectOptions?.getOptionLabel?.(operand) || "";
-    return label ? `${label} | ${textLabel}` : textLabel;
-  }, "")?.toString() || "";
-  return {
-    labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-    labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
-    labelOperands
-  };
-};
-const getSelectSchema = (getLabel) => Yup.object({
-  formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
-  formValueOperandsArray: Yup.lazy((value) => {
-    return Array.isArray(value) ? Yup.array().min(1, getLabel(`dynamic_filter.error_operand_required`)).of(Yup.object().nullable()).required(getLabel(`dynamic_filter.error_operand_required`)) : Yup.object().nullable().required(getLabel(`dynamic_filter.error_operand_required`));
-  })
-});
-const getSelectFormValue = (field, getLabel, filterValueSelect) => {
-  const filterValue = filterValueSelect ? filterValueSelect : void 0;
-  const isMultiple = field?.selectOptions?.multiple ?? false;
-  const formValueOperandsArray = isMultiple ? filterValueSelect?.operandsArray : filterValueSelect?.operandsArray?.[0] || filterValueSelect?.operandsArray;
-  const operator = filterValue ? filterValue.operator : field.defaultOperator ?? "in";
-  return {
-    fieldType: "select",
-    formValueOperator: {
-      id: operator,
-      label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
-    },
-    formValueOperandsArray
-  };
-};
-const getFilterFromSelectFormValue = (formFilterValue) => {
-  const operator = formFilterValue.formValueOperator.id;
-  const operandsArray = Array.isArray(formFilterValue.formValueOperandsArray) ? formFilterValue.formValueOperandsArray : [formFilterValue.formValueOperandsArray];
-  return {
-    fieldType: "select",
-    operator,
-    operandsArray
-  };
-};
-function SelectFilter() {
-  const classesContainerSelectFilter = useDynamicFilter((state) => state.classes.containerSelectFilter, shallow);
-  const dataTestId = useDynamicFilter((state) => state.classes.containerSelectFilter, shallow);
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const field = useDynamicFilter((state) => state.popoverFilterData?.field, shallow);
-  if (!field?.selectOptions?.endPoint) {
-    throw new Error("El filtro tipo Select requiere la configuraci\xF3n del Endpoint");
-  }
-  const autocompleteProps = field?.selectOptions;
-  const operators = useMemo(() => SELECT_OPERATORS.map((o) => ({
-    id: o,
-    label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
-  })), [getLabel]);
-  return /* @__PURE__ */ jsxs("div", {
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerSelectFilter", dataTestId)
-    } : {},
-    className: classesContainerSelectFilter,
-    children: [/* @__PURE__ */ jsx(RHFAutocomplete, {
-      name: "formValueOperator",
-      autoComplete: "off",
-      options: operators,
-      getOptionLabel: (option) => option.label,
-      isOptionEqualToValue: (option, value) => option.id === value.id,
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_select_operator))
-    }), /* @__PURE__ */ jsx(RHFAutocompleteAsync, {
-      ...autocompleteProps,
-      name: "formValueOperandsArray",
-      autoComplete: "off",
-      label: getLabel(getDynamicFilterDictionary(DICCTIONARY.label_select_operands_array))
-    })]
-  });
-}
-const strategiesEditFilterComponent = {
-  boolean: BooleanFilter,
-  datetime: DateTimeFilter,
-  number: NumberFilter,
-  string: StringFilter,
-  select: SelectFilter,
-  __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,
-  select: getSelectLabels,
-  __default__: () => {
-    throw new Error("Type no defined");
-  }
-};
-const getLabelsFilter = (filter, getLabel, formatters, field) => {
-  const transformer = strategiesLabelsFilters[filter.field.type] ?? strategiesLabelsFilters.__default__;
-  return transformer(filter, getLabel, formatters, field);
-};
-const strategiesDefaultFilterValues = {
-  boolean: getDefaultBooleanFilter,
-  datetime: getDefaultDateTimeFilter,
-  number: getDefaultNumberFilter,
-  string: getDefaultStringFilter,
-  select: getDefaultSelectFilter,
-  __default__: () => {
-    throw new Error("Type no defined");
-  }
-};
-const getDefaultValues = (field, fixed) => {
-  const transformer = strategiesDefaultFilterValues[field.type] ?? strategiesDefaultFilterValues.__default__;
-  return transformer(field, fixed);
-};
-const strategiesSchemaValidationsFilters = {
-  boolean: getBooleanSchema,
-  datetime: getDateTimeSchema,
-  number: getNumberSchema,
-  string: getStringSchema,
-  select: getSelectSchema,
-  __default__: () => {
-    throw new Error("Type no defined");
-  }
-};
-const getSchemaValidations = (field, getLabel) => {
-  const transformer = strategiesSchemaValidationsFilters[field.type] ?? strategiesSchemaValidationsFilters.__default__;
-  return transformer(getLabel);
-};
-const strategiesFormValue = {
-  boolean: getBooleanFormValue,
-  datetime: getDateTimeFormValue,
-  number: getNumberFormValue,
-  string: getStringFormValue,
-  select: getSelectFormValue,
-  __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,
-  select: getFilterFromSelectFormValue,
-  __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;
-  }
-  return typeof filter.operand1 === "boolean";
-};
-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 verifySelectFilter = (filter, field) => {
-  if (typeof filter.operator !== "string") {
-    return false;
-  }
-  if (SELECT_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
-    return false;
-  }
-  if (!filter.operandsArray || typeof filter.operandsArray !== "object") {
-    return false;
-  }
-  const validOperandsArray = filterValidOperandsArraySelect(
-    filter.operandsArray,
-    field
-  );
-  if (!validOperandsArray || validOperandsArray?.length === 0) {
-    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;
-    }
-    if (af.fieldType === "select") {
-      const validOperandsArray = filterValidOperandsArraySelect(af.operandsArray, af.field);
-      if (validOperandsArray && validOperandsArray?.length > 0) {
-        ret.operandsArray = validOperandsArray;
-      }
-    }
-    if (ret.operand2 === void 0) {
-      delete ret.operand2;
-    }
-    return ret;
-  });
-};
-const formatToRawFilter = (appliedFilters) => {
-  return appliedFilters.map((af) => {
-    let oa = void 0;
-    if (af.field.type === "select" && af.operandsArray) {
-      oa = Array.isArray(af.operandsArray) ? af.operandsArray.map(af.field.selectOptions.getOptionId) : [af.field.selectOptions.getOptionId(af.operandsArray)];
-    }
-    return {
-      n: af.field.name,
-      o: af.operator,
-      o1: af.operand1,
-      o2: af.operator === "b" ? af.operand2 : void 0,
-      oa
-    };
-  });
-};
-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,
-        operandsArray: initialFilters[index].operandsArray
-      };
-      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;
-        case "select":
-          add = verifySelectFilter(initialFilter, field);
-          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 updateAvailableFields = (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 updateOwnerStateIsValid = (state) => {
-  state.ownerState.isValid = true;
-  for (let index = 0; index < state.applyedFilters.length; index++) {
-    const element = state.applyedFilters[index];
-    if (!element.isSetted) {
-      state.ownerState.isValid = false;
-    }
-  }
-};
-const updateOwnerStateClasses = (state) => {
-  state.classes = useUtilityClasses(state.ownerState);
-};
-const updateAutomatic = (state) => {
-  updateOwnerStateIsValid(state);
-  updateAvailableFields(state);
-  if (state.ownerState.isValid) {
-    if (state.automatic) {
-      state.ownerState.isDirty = false;
-      state.countOnChangeFiltersApplyed++;
-    }
-  }
-  updateOwnerStateClasses(state);
-};
-const createAreaStore = (initProps) => {
-  const startProps = {
-    countOnChangeFiltersApplyed: 0,
-    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
-              );
-              state.ownerState.isEmpty = state.applyedFilters.length > 0 ? false : true;
-              updateOwnerStateClasses(state);
-              updateAutomatic(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);
-                if (state.applyedFilters.length === 0) {
-                  state.ownerState.isEmpty = true;
-                  updateOwnerStateClasses(state);
-                }
-                updateAutomatic(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,
-                field: filterToEdit.field
-              };
-            });
-            get().actions.setInEdition(true);
-          },
-          hidePopoverFilter: (stayInEdition) => {
-            set((state) => {
-              state.popoverFilterData = void 0;
-            });
-            get().actions.setInEdition(stayInEdition);
-          },
-          clearFilters: () => {
-            set((state) => {
-              state.applyedFilters = state.applyedFilters.filter((f) => f.fixed);
-              if (state.applyedFilters.length === 0) {
-                state.ownerState.isEmpty = true;
-                updateOwnerStateClasses(state);
-              }
-              updateAvailableFields(state);
-            });
-          },
-          fireOnChangeFilters: () => {
-            set((state) => {
-              if (state.ownerState.isValid) {
-                state.ownerState.isDirty = false;
-                state.countOnChangeFiltersApplyed++;
-                updateOwnerStateClasses(state);
-              }
-            });
-          },
-          getNewId: () => {
-            return get().applyedFilters.reduce((prev, n) => {
-              return n.id > prev ? n.id : prev;
-            }, 0) + 1;
-          },
-          addFilter: (newFilter) => {
-            set((state) => {
-              state.applyedFilters.push(newFilter);
-              if (state.applyedFilters.length > 0) {
-                state.ownerState.isEmpty = false;
-                updateOwnerStateClasses(state);
-              }
-              updateAutomatic(state);
-            });
-          },
-          updateFilter: (editFilter) => {
-            set((state) => {
-              const index = state.applyedFilters.findIndex(
-                (ap) => ap.id === editFilter.id
-              );
-              if (index > -1) {
-                state.applyedFilters[index] = editFilter;
-              }
-              updateAutomatic(state);
-            });
-          },
-          setInputData: (inputData) => {
-            set((state) => {
-              state.inputData = inputData;
-            });
-          },
-          setInEdition: (newInEdition) => {
-            set((state) => {
-              state.ownerState.inEdition = newInEdition;
-              updateOwnerStateClasses(state);
-            });
-          },
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-              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,
-    dataTestId = ""
-  } = props;
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const dynamicFilterStoreRef = useRef();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const isDesktop = useResponsiveDesktop();
-  const isSkeleton = useModuleSkeleton();
-  const isFirstRender = useFirstRender([isDesktop, isSkeleton]);
-  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,
-      getLabel,
-      dataTestId,
-      ownerState: {
-        isSkeleton,
-        isDirty: !automatic,
-        inEdition: false,
-        isValid: true,
-        isMobile: !isDesktop,
-        isEmpty: true
-      }
-    });
-    dynamicFilterStoreRef.current.getState().actions.init(initialApplyedFilters);
-  }
-  const countOnChangeFiltersApplyed = useStore(dynamicFilterStoreRef.current, (state) => state.countOnChangeFiltersApplyed, shallow);
-  useEffect(() => {
-    if (countOnChangeFiltersApplyed === 0) {
-      return;
-    }
-    const state = dynamicFilterStoreRef.current?.getState();
-    if (state) {
-      onChangeFilters(formatToInitialFilters(state.applyedFilters), formatToRawFilter(state.applyedFilters));
-    }
-  }, [countOnChangeFiltersApplyed]);
-  useEffect(() => {
-    if (isFirstRender) {
-      return;
-    }
-    dynamicFilterStoreRef.current?.getState().actions.setExternalState({
-      isMobile: !isDesktop,
-      isSkeleton
-    });
-  }, [isDesktop, isSkeleton]);
-  useEffect(() => {
-    if (automatic) {
-      dynamicFilterStoreRef.current?.getState().actions.fireOnChangeFilters();
-      return;
-    }
-  }, []);
-  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)
-  },
-  [`&.${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.isInvalid} .${dynamicFilterClasses.filterButton}`]: {
-    border: `1px dashed ${theme.palette.error.main}`
-  },
-  [`& .${dynamicFilterClasses.applyedFilter}.${dynamicFilterClasses.noSetted}`]: {
-    border: `1px dashed ${theme.palette.error.main}`
-  },
-  ...theme.components?.M4LDynamicFilter?.styleOverrides
-}));
-const ContainerFistRow = styled("div")(() => ({
-  width: "100%",
-  display: "flex"
-}));
-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 dataTestId = useDynamicFilter((state) => state.dataTestId);
-  const labels = useMemo(() => {
-    return getLabelsFilter(props, getLabel, formatters, field);
-  }, [props, getLabel]);
-  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 ? `${COMPONENT_CLASS_NAME}-noSetted` : null),
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "applyedFilter", `${dataTestId}-${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,
-      dictionaryTooltipId: "dynamic_filter.tooltip_clear_filter"
-    })]
-  });
-}
-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)
-}));
-function ApplyedFilters() {
-  const classesWrapperApplyedFilters = useDynamicFilter((state) => state.classes.wrapperApplyedFilters, shallow);
-  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
-  const classesContainerApplyedFilters = useDynamicFilter((state) => state.classes.containerApplyedFilters, shallow);
-  const applyedFilters = useDynamicFilter((state) => state.applyedFilters, shallow);
-  const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton, shallow);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
-      className: classesWrapperApplyedFilters
-    });
-  }
-  const appliedFiltersSorted = [...applyedFilters].sort((filterA, filterB) => filterA.isSetted !== filterB.isSetted ? Number(filterA.isSetted) - Number(filterB.isSetted) : filterB.id - filterA.id);
-  return /* @__PURE__ */ jsx(WrapperApplyedFilters, {
-    className: classesWrapperApplyedFilters,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "wrapperApplyedFilters", dataTestId)
-    } : {},
-    children: /* @__PURE__ */ jsx(ScrollBar, {
-      children: /* @__PURE__ */ jsx(ContainerApplyedFilters, {
-        className: classesContainerApplyedFilters,
-        ...process.env.NODE_ENV !== "production" ? {
-          [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerApplyedFilters", dataTestId)
-        } : {},
-        children: appliedFiltersSorted.map((filter) => /* @__PURE__ */ jsx(ApplyedFilter, {
-          ...filter
-        }, filter.id))
-      })
-    })
-  });
-}
-const SKTClearFilters = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: "24px",
-  height: "24px"
-}));
-styled("div")(({
-  theme
-}) => ({
-  paddingLeft: theme.spacing(0.5),
-  borderLeft: `1px solid ${theme.palette.divider}`
-}));
-const ClearFiltersButton = () => {
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const {
-    clearFilters,
-    fireOnChangeFilters,
-    hidePopoverFilter: hidePopupEdit
-  } = useDynamicFilter((state) => state.actions);
-  const applyedFilters = useDynamicFilter((state) => state.applyedFilters, shallow);
-  const clearFiltersButtonClasses = useDynamicFilter((state) => state.classes.clearFiltersButton, shallow);
-  const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton);
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTClearFilters, {
-      className: clearFiltersButtonClasses,
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: "16px",
-        height: "16px"
-      })
-    });
-  }
-  const onClickClearFilters = () => {
-    hidePopupEdit(false);
-    clearFilters();
-    fireOnChangeFilters();
-  };
-  if (applyedFilters.findIndex((f) => f.fixed == false) > -1) {
-    return /* @__PURE__ */ jsx(IconButton, {
-      className: clearFiltersButtonClasses,
-      src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close.svg`,
-      onClick: onClickClearFilters,
-      dictionaryTooltipId: "dynamic_filter.tooltip_clear_filters"
-    });
-  }
-  return null;
-};
-const SKTWrapperFilterButton = styled("div")(() => ({
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  width: "24px",
-  height: "24px"
-}));
-styled("div")(() => ({
-  display: "block"
-}));
-function FilterButton() {
-  const dataTestId = useDynamicFilter((state) => state.dataTestId);
-  const automatic = useDynamicFilter((state) => state.automatic);
-  const isValid = useDynamicFilter((state) => state.ownerState.isValid);
-  const isDirty = useDynamicFilter((state) => state.ownerState.isDirty);
-  const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton);
-  const {
-    fireOnChangeFilters
-  } = useDynamicFilter((state) => state.actions);
-  const classesFilterButton = useDynamicFilter((state) => state.classes.filterButton);
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(SKTWrapperFilterButton, {
-      className: classesFilterButton,
-      children: /* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: 16,
-        height: 16
-      })
-    });
-  }
-  return /* @__PURE__ */ jsx(IconButton, {
-    className: classesFilterButton,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "classesFilterButton", dataTestId)
-    } : {},
-    dictionaryTooltipId: 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.popoverMenuFields, shallow);
-  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
-  const classesPopUpMenuFieldsPaper = useDynamicFilter((state) => state.classes.popoverMenuFieldsPaper, shallow);
-  const classespopoverMenuFieldsItem = useDynamicFilter((state) => state.classes.popoverMenuFieldsItem, shallow);
-  const classespopoverLabelMemuItem = useDynamicFilter((state) => state.classes.classespopoverLabelMemuItem, shallow);
-  const {
-    showPopoverFilterForAdd,
-    closePopoverMenuFields
-  } = useDynamicFilter((state) => state.actions, shallow);
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const handleClosePopover = () => {
-    closePopoverMenuFields(false);
-  };
-  const theme = useTheme();
-  const handleOpenPopUpClickItem = (_event, field) => {
-    if (fnAnchorEl) {
-      showPopoverFilterForAdd(fnAnchorEl(), field);
-    }
-  };
-  return /* @__PURE__ */ jsx(Popover, {
-    className: classesPopUpMenuFields,
-    disableRestoreFocus: true,
-    open: Boolean(fnAnchorEl),
-    anchorEl: fnAnchorEl && fnAnchorEl(),
-    onClose: handleClosePopover,
-    anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "left"
-    },
-    transformOrigin: {
-      vertical: "top",
-      horizontal: "left"
-    },
-    disableAutoFocus: true,
-    arrowType: "top-left",
-    sx: {
-      ...theme.components?.M4LDynamicFilterPopoverMenuFields?.styleOverrides
-    },
-    PaperProps: {
-      className: classesPopUpMenuFieldsPaper,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "popoverMenuFieldsPaper", dataTestId)
-      } : {}
-    },
-    children: Boolean(fnAnchorEl) && fields.map((field, index) => /* @__PURE__ */ createElement(MenuItem, {
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "popoverMenuFieldsItem", `${dataTestId}-${field.name}`)
-      } : {},
-      className: classespopoverMenuFieldsItem,
-      key: `menu_action_${field.label ?? getLabel(field.dictionaryId)}`,
-      dense: true,
-      onClick: (event) => handleOpenPopUpClickItem(event, field),
-      selected: index === selectFieldIndex
-    }, /* @__PURE__ */ jsx(Icon, {
-      src: field.urlIcon
-    }), /* @__PURE__ */ jsx(LabelMemuItem, {
-      className: classespopoverLabelMemuItem,
-      children: field.label ?? getLabel(field.dictionaryId)
-    })))
-  });
-}
-function InputFilter() {
-  const anchorEl = useDynamicFilter((state) => state.fnAnchorEl, shallow);
-  const withAllField = useDynamicFilter((state) => state.withAllField);
-  const inputData = useDynamicFilter((state) => state.inputData);
-  const availableFields = useDynamicFilter((state) => state.availableFields, shallow);
-  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
-  const classesContainerInputFilter = useDynamicFilter((state) => state.classes.containerInputFilter, shallow);
-  const classesInputFilter = useDynamicFilter((state) => state.classes.inputFilter, shallow);
-  const isSkeleton = useDynamicFilter((state) => state.ownerState.isSkeleton, shallow);
-  const {
-    showPopoverFilterForAdd,
-    addFilter,
-    openPopoverMenuFields,
-    closePopoverMenuFields,
-    hidePopoverFilter,
-    getFieldByName,
-    getNewId,
-    setInEdition,
-    setInputData
-  } = useDynamicFilter((state) => state.actions, shallow);
-  const {
-    getLabel
-  } = useModuleDictionary();
-  const {
-    host_static_assets,
-    environment_assets
-  } = useEnvironment();
-  const [selectFieldIndex, setSelectFieldIndex] = useState(-1);
-  const [finalFields, setFinalFields] = useState([]);
-  useEffect(() => {
-    if (!anchorEl) {
-      setFinalFields([]);
-      return;
-    }
-    setFinalFields(availableFields.filter((field) => (field.label ?? getLabel(field.dictionaryId)).includes(inputData)));
-    setSelectFieldIndex(-1);
-  }, [anchorEl, inputData, availableFields, getLabel]);
-  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 (!withAllField && availableFields.length == 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("div", {
-    className: classesContainerInputFilter,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "containerInputFilter", dataTestId)
-    } : {},
-    children: [!isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(Icon, {
-        src: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/filter.svg`,
-        size: "small"
-      }), /* @__PURE__ */ jsx("input", {
-        type: "text",
-        value: inputData,
-        placeholder: getLabel(getDynamicFilterDictionary(DICCTIONARY.input_placeholder)),
-        onFocus: onFocusInputFilter,
-        className: classesInputFilter,
-        onChange: onChangeInputFilter,
-        onKeyDown: handleKeyDown
-      })]
-    }) : /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(Skeleton, {
-        variant: "circular",
-        width: "16px",
-        height: "16px",
-        sx: {
-          minWidth: "16px",
-          minHeight: "16px"
-        }
-      }), /* @__PURE__ */ jsx(Skeleton, {
-        variant: "text",
-        width: "100%",
-        height: "16px"
-      })]
-    }), /* @__PURE__ */ jsx(PopoverMenuFields, {
-      selectFieldIndex,
-      fields: finalFields
-    })]
-  });
-}
-const StyledHeaderFilter = styled("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 theme = useTheme();
-  const popoverFilterData = useDynamicFilter((state) => state.popoverFilterData, shallow);
-  const refPreviousPopoverFilterData = useRef(popoverFilterData);
-  const classesPopoverFilter = useDynamicFilter((state) => state.classes.popoverFilter, shallow);
-  const classesPopoverFilterPapper = useDynamicFilter((state) => state.classes.popoverFilterPaper, shallow);
-  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
-  const classesPopoverFilterHeader = useDynamicFilter((state) => state.classes.popoverFilterHeader, shallow);
-  const classesPopoverHeaderTitle = useDynamicFilter((state) => state.classes.popoverHeaderTitle, shallow);
-  const classesPopoverContainerFields = useDynamicFilter((state) => state.classes.popoverContainerFields, 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
-      }),
-      isSetted: true
-    };
-    if (popoverFilterData?.openFor === "add") {
-      addFilter(newFilter);
-    } else {
-      updateFilter(newFilter);
-    }
-    hidePopoverFilter(false);
-  };
-  const handleClosePopover = () => {
-    hidePopoverFilter(false);
-  };
-  return /* @__PURE__ */ jsx(Popover, {
-    className: classesPopoverFilter,
-    transitionDuration: 0,
-    open: true,
-    anchorEl,
-    disableRestoreFocus: true,
-    onKeyDown: handleKeyDownPopper,
-    onClose: handleClosePopover,
-    anchorOrigin: {
-      vertical: "bottom",
-      horizontal: "left"
-    },
-    transformOrigin: {
-      vertical: "top",
-      horizontal: "left"
-    },
-    arrowType: "top-left",
-    sx: {
-      ...theme.components?.M4LDynamicFilterPopoverFilter?.styleOverrides
-    },
-    PaperProps: {
-      className: classesPopoverFilterPapper,
-      ...process.env.NODE_ENV !== "production" ? {
-        [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "popoverFilterPaper", dataTestId)
-      } : {}
-    },
-    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(Typography, {
-          variant: "paragraphDens",
-          className: classesPopoverHeaderTitle,
-          children: field.label ?? getLabel(field.dictionaryId)
-        })]
-      }), /* @__PURE__ */ jsx("div", {
-        className: classesPopoverContainerFields,
-        children: /* @__PURE__ */ jsx(DataTypeComponent, {
-          formFilter,
-          statusLoad
-        })
-      }), /* @__PURE__ */ jsxs(Actions, {
-        children: [/* @__PURE__ */ jsx(ActionCancel, {
-          onClick: onClose,
-          skeletonWidth: "68px"
-        }), /* @__PURE__ */ jsx(ActionIntro, {
-          skeletonWidth: "64px"
-        })]
-      })]
-    })
-  });
-};
-const TEST_PROPS_DATA = `data-testing`;
-const InnerForHooks = () => {
-  const isMobile = useDynamicFilter((state) => state.ownerState.isMobile, shallow);
-  const dataTestId = useDynamicFilter((state) => state.dataTestId, shallow);
-  const classesRoot = useDynamicFilter((state) => state.classes.root, shallow);
-  const containerClearFilter = useDynamicFilter((state) => state.classes.containerClearFilter, shallow);
-  const classesContainerFistRow = useDynamicFilter((state) => state.classes.containerFistRow, shallow);
-  const fields = useDynamicFilter((state) => state.fields, shallow);
-  return /* @__PURE__ */ jsx(DynamicFilterRoot, {
-    className: classesRoot,
-    ...process.env.NODE_ENV !== "production" ? {
-      [TEST_PROPS_DATA]: JSON.stringify(fields),
-      [TEST_PROP_ID]: getNameDataTestId(COMPONENT_PREFIX, "root", dataTestId)
-    } : {},
-    children: !isMobile ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {}), /* @__PURE__ */ jsxs("div", {
-        className: containerClearFilter,
-        children: [/* @__PURE__ */ jsx(ClearFiltersButton, {}), /* @__PURE__ */ jsx(FilterButton, {})]
-      })]
-    }) : /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsxs(ContainerFistRow, {
-        className: classesContainerFistRow,
-        children: [/* @__PURE__ */ jsx(InputFilter, {}), /* @__PURE__ */ jsxs("div", {
-          className: containerClearFilter,
-          children: [/* @__PURE__ */ jsx(ClearFiltersButton, {}), /* @__PURE__ */ jsx(FilterButton, {})]
-        })]
-      }), /* @__PURE__ */ jsx(ApplyedFilters, {}), /* @__PURE__ */ jsx(PopoverFilter, {})]
-    })
-  });
-};
-const DynamicFilter = (props) => {
-  const render = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
-  if (!render) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(DynamicFilterProvider, {
-    ...props,
-    children: /* @__PURE__ */ jsx(InnerForHooks, {})
-  });
-};
-export {
-  DynamicFilter as D,
-  getDynamicFilterComponentsDictionary as g
-};