@m4l/components 1.0.10 → 1.0.12

package/components/DynamicFilter/index.d698a952.js

@@ -1,1721 +0,0 @@
-import { Skeleton, alpha } from "@mui/material";
-import { i as isValidDate, c as containerQuery } from "../../utils/index.c64c2dd1.js";
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useMemo, useContext, createContext, useRef, useEffect, useState } from "react";
-import { useFormContext, useWatch } from "react-hook-form";
-import { useModuleDictionary, useEnvironment, useModuleSkeleton, useFlagsPresent, CommonFlags } from "@m4l/core";
-import { useStore, createStore } from "zustand";
-import { shallow } from "zustand/shallow";
-import { useResponsiveDesktop, useFirstRender, useFormatter } from "@m4l/graphics";
-import { devtools } from "zustand/middleware";
-import { immer } from "zustand/middleware/immer";
-import * as Yup from "yup";
-import { g as getDynamicFilterDictionary, D as DICCTIONARY } from "../areas/dictionary.ffe082b0.js";
-import { B as BOOLEAN_OPERATORS, S as STRING_OPERATORS, b as DATE_TIME_OPERATORS, N as NUMBER_OPERATORS, c as SELECT_OPERATORS, A as ALL_FIELD } from "../areas/constants.0d3ba950.js";
-import { R as RHFAutocomplete } from "../../vendor.e16cc0cc.js";
-import { R as RHFTextField } from "../hook-form/RHFTextField/index.8d9e389c.js";
-import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.0bb4279e.js";
-import { R as RHFAutocompleteAsync } from "../hook-form/RHFAutocompleteAsync/index.58439d31.js";
-import { I as InputFilterStyled, a as InputFilterIconStyled, b as InputFilterInputStyled, A as AppliedFilterChipStyled, c as AppliedFilterChipIconStyled, d as AppliedFilterChipInfoStyled, e as AppliedFilterChipInfoFieldNameStyled, f as AppliedFilterChipInfoOperatorStyled, g as AppliedFilterChipInfoOperandsStyled, h as AppliedFilterChipRemoveButtonStyled, i as AppliedFiltersStyled, j as AppliedFilterInnerContainerStyled, k as ActionsSkeletonButtonStyled, l as ActionsStyled, m as ActionsClearButtonStyled, n as ActionsSubmitButtonStyled, R as RootStyled, o as InnerContainerStyled } from "./slots/index.268c8973.js";
-import { g as getPropDataTestId } from "../../test/getNameDataTestId.aee44365.js";
-import { a as PopoverMenuFields, b as PopoverFilter } from "../mui_extended/Popover/index.fda32ba1.js";
-import { S as ScrollBar } from "../ScrollBar/index.1e89bb44.js";
-function BooleanFilter() {
-  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", { 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))
-      }
-    )
-  ] });
-}
-class BooleanFilterHelpers {
-  getComponent() {
-    return BooleanFilter;
-  }
-  getDefaultFilter(field, fixed) {
-    const defaultOperand1 = field.defaultOperand1;
-    const defaultFilter = {
-      id: 0,
-      fieldType: "boolean",
-      field,
-      fixed,
-      isSet: true,
-      operator: "e",
-      operand1: true
-    };
-    if (defaultOperand1 !== void 0 && typeof defaultOperand1 === "boolean") {
-      defaultFilter.operand1 = defaultOperand1;
-    }
-    return defaultFilter;
-  }
-  getFilterFromFormValue(formFilterValue) {
-    const operator = formFilterValue.formValueOperator.id;
-    const operand1 = formFilterValue.formValueOperand1?.value || false;
-    return {
-      fieldType: "boolean",
-      operator,
-      operand1
-    };
-  }
-  getFormValue(field, getLabel, filterValue) {
-    const filterValueBoolean = filterValue ? filterValue : void 0;
-    const operator = filterValueBoolean ? filterValueBoolean.operator : field.defaultOperator ?? "e";
-    const formValueOperand1 = filterValueBoolean ? {
-      value: filterValueBoolean.operand1,
-      label: getLabel(getDynamicFilterDictionary(`operand_${filterValueBoolean.operand1}`))
-    } : null;
-    return {
-      fieldType: "boolean",
-      formValueOperator: {
-        id: operator,
-        label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
-      },
-      formValueOperand1
-    };
-  }
-  getLabels(filter, getLabel, _formatters, _field) {
-    const labelOperands = filter.operand1 ? getLabel(getDynamicFilterDictionary("operand_true")) : getLabel(getDynamicFilterDictionary("operand_false"));
-    return {
-      labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
-      labelOperands
-    };
-  }
-  getSchema(getLabel) {
-    return Yup.object({
-      formValueOperator: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operator_required`)),
-      formValueOperand1: Yup.object().nullable().required(getLabel(`dynamic_filter.error_operand_required`))
-    });
-  }
-  verifyFilter(filter, _field) {
-    if (typeof filter.operator !== "string") {
-      return false;
-    }
-    if (BOOLEAN_OPERATORS.findIndex((f) => f === filter.operator) === -1) {
-      return false;
-    }
-    return typeof filter.operand1 === "boolean";
-  }
-}
-function StringFilter() {
-  const { getLabel } = useModuleDictionary();
-  const operators = useMemo(
-    () => STRING_OPERATORS.map((o) => ({
-      id: o,
-      label: getLabel(getDynamicFilterDictionary(`operator_${o}`))
-    })),
-    [getLabel]
-  );
-  return /* @__PURE__ */ jsxs("div", { 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))
-      }
-    )
-  ] });
-}
-class StringFilterHelpers {
-  getComponent() {
-    return StringFilter;
-  }
-  getDefaultFilter(field, fixed) {
-    const defaultOperand1 = field.defaultOperand1;
-    const defaultFilter = {
-      id: 0,
-      fieldType: "string",
-      field,
-      fixed,
-      isSet: false,
-      operator: "c",
-      operand1: ""
-    };
-    if (defaultOperand1 !== void 0 && typeof defaultOperand1 === "string") {
-      defaultFilter.operand1 = defaultOperand1;
-    }
-    return defaultFilter;
-  }
-  getFilterFromFormValue(formFilterValue) {
-    const operator = formFilterValue.formValueOperator.id;
-    const operand1 = formFilterValue.formValueOperand1;
-    return {
-      fieldType: "string",
-      operator,
-      operand1
-    };
-  }
-  getFormValue(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
-    };
-  }
-  getLabels(filter, getLabel, _formatters, _field) {
-    const labelOperands = filter.operand1 !== void 0 ? filter.operand1 + "" : "";
-    return {
-      labelField: filter.field.label ?? getLabel(filter.field.dictionaryId),
-      labelOperator: getLabel(getDynamicFilterDictionary(`operator_${filter.operator}`)),
-      labelOperands
-    };
-  }
-  getSchema(getLabel) {
-    return Yup.object({
-      formValueOperator: Yup.object().nullable().required(getLabel(getDynamicFilterDictionary(DICCTIONARY.operator_required))),
-      formValueOperand1: Yup.string().required(
-        getLabel(getDynamicFilterDictionary(DICCTIONARY.error_operand_required))
-      )
-    });
-  }
-  verifyFilter(filter, _field) {
-    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;
-  }
-}
-function DateTimeFilter() {
-  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", { 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))
-      }
-    )
-  ] });
-}
-class DateTimeFilterHelpers {
-  getComponent() {
-    return DateTimeFilter;
-  }
-  getDefaultFilter(field, fixed) {
-    const defaultStartDate = new Date();
-    const defaultEndDate = new Date();
-    defaultStartDate.setHours(0, 0, 0, 0);
-    defaultEndDate.setHours(23, 59, 59, 999);
-    const defaultOperand1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
-    const defaultOperand2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
-    return {
-      id: 0,
-      fieldType: "datetime",
-      field,
-      fixed,
-      isSet: true,
-      operator: "b",
-      operand1: defaultOperand1,
-      operand2: defaultOperand2
-    };
-  }
-  getFormValue(field, getLabel, filterValueDateTime) {
-    const filterValue = filterValueDateTime;
-    const operator = filterValue ? filterValue.operator : field.defaultOperator ?? "b";
-    const defaultStartDate = new Date();
-    const defaultEndDate = new Date();
-    const defaultOperand1 = field.defaultOperand1 && field.defaultOperand1 instanceof Date ? field.defaultOperand1 : defaultStartDate;
-    const defaultOperand2 = field.defaultOperand2 && field.defaultOperand2 instanceof Date ? field.defaultOperand2 : defaultEndDate;
-    const formValueOperand1 = filterValue ? filterValue.operand1 : defaultOperand1;
-    const formValueOperand2 = filterValue && filterValue.operator === "b" ? filterValue.operand2 : defaultOperand2;
-    return {
-      fieldType: "datetime",
-      formValueOperator: {
-        id: operator,
-        label: getLabel(getDynamicFilterDictionary(`operator_${operator}`))
-      },
-      formValueOperand1,
-      formValueOperand2
-    };
-  }
-  getFilterFromFormValue(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
-      };
-    }
-  }
-  getLabels(filter, getLabel, formatters, _field) {
-    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
-    };
-  }
-  getSchema(getLabel) {
-    return 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))
-        )
-      })
-    });
-  }
-  verifyFilter(filter, _field) {
-    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;
-  }
-}
-function NumberFilter() {
-  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", { 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))
-      }
-    )
-  ] });
-}
-class NumberFilterHelpers {
-  getComponent() {
-    return NumberFilter;
-  }
-  getDefaultFilter(fieldNumber, fixed) {
-    const field = fieldNumber;
-    const dOperator = field.defaultOperator ?? "e";
-    const defaultOperand1 = field.defaultOperand1 ?? null;
-    const defaultOperand2 = field.defaultOperand2 ?? null;
-    return {
-      id: 0,
-      fieldType: "number",
-      field,
-      fixed,
-      isSet: false,
-      operator: dOperator,
-      operand1: defaultOperand1,
-      operand2: defaultOperand2
-    };
-  }
-  getFormValue(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
-    };
-  }
-  getFilterFromFormValue(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
-      };
-    }
-  }
-  getLabels(filter, getLabel, _formatters, _field) {
-    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
-    };
-  }
-  getSchema(getLabel) {
-    return 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`))
-      })
-    });
-  }
-  verifyFilter(filter, _field) {
-    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;
-  }
-}
-function useDynamicFilterStore(selector, equalityFn) {
-  const store = useContext(DynamicFilterContext);
-  if (!store)
-    throw new Error("useDynamicFilterStore context must be use inside DynamicFilterContext");
-  return useStore(store, selector, equalityFn ?? shallow);
-}
-function SelectFilter() {
-  const { getLabel } = useModuleDictionary();
-  const field = useDynamicFilterStore((state) => state.popoverFilterData?.field);
-  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", { 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))
-      }
-    )
-  ] });
-}
-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);
-  });
-}
-class SelectFilterHelpers {
-  getComponent() {
-    return SelectFilter;
-  }
-  getDefaultFilter(field, fixed) {
-    const defaultOperand = field.defaultOperandsArray;
-    const defaultFilter = {
-      id: 0,
-      fieldType: "select",
-      field,
-      fixed,
-      isSet: true,
-      operator: "in",
-      operandsArray: []
-    };
-    if (defaultOperand !== void 0 && Array.isArray(defaultOperand)) {
-      const validOperandsArray = filterValidOperandsArraySelect(defaultOperand, field);
-      defaultFilter.operandsArray = validOperandsArray || [];
-    }
-    return defaultFilter;
-  }
-  getFormValue(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
-    };
-  }
-  getFilterFromFormValue(formFilterValue) {
-    const operator = formFilterValue.formValueOperator.id;
-    const operandsArray = Array.isArray(formFilterValue.formValueOperandsArray) ? formFilterValue.formValueOperandsArray : [formFilterValue.formValueOperandsArray];
-    return {
-      fieldType: "select",
-      operator,
-      operandsArray
-    };
-  }
-  getLabels(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
-    };
-  }
-  getSchema(getLabel) {
-    return 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`));
-      })
-    });
-  }
-  verifyFilter(filter, field) {
-    if (typeof filter.operator !== "string") {
-      return false;
-    }
-    if (!field) {
-      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 helpersStrategies = {
-  boolean: new BooleanFilterHelpers(),
-  string: new StringFilterHelpers(),
-  number: new NumberFilterHelpers(),
-  datetime: new DateTimeFilterHelpers(),
-  select: new SelectFilterHelpers(),
-  __default__: () => {
-    throw new Error("Type no defined");
-  }
-};
-function fieldFactory(type) {
-  const selectedHelper = helpersStrategies?.[type];
-  if (!selectedHelper) {
-    return helpersStrategies.__default__();
-  }
-  return selectedHelper;
-}
-function getPurgedInitialFiltersApplied(fields, initialFilters, getFieldByName) {
-  const newFilters = [];
-  const fixedFields = [];
-  for (let index = 0; index < initialFilters.length; index++) {
-    try {
-      const initialFilter = initialFilters[index];
-      const field = getFieldByName(initialFilter.name);
-      const filter = {
-        id: 0,
-        isSet: 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;
-      const canAddField = fieldFactory(field.type).verifyFilter(initialFilter, field);
-      if (canAddField) {
-        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.isSet = 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 = fieldFactory(field.type).getDefaultFilter(
-          field,
-          field.presence === "fixed"
-        );
-        newFilter.id = newFilters.length + 1;
-        newFilters.push(newFilter);
-      }
-    }
-  }
-  return newFilters;
-}
-function updateAvailableFields(state) {
-  state.availableFields = state.fields.filter((field) => {
-    if (field.multiple === void 0 || field.multiple) {
-      return true;
-    }
-    const appliedFilterNames = new Set(state.appliedFilters.map((f) => f.field.name));
-    return !appliedFilterNames.has(field.name);
-  });
-}
-function updateOwnerStateIsValid(state) {
-  state.ownerState.isValid = state.appliedFilters.every((filter) => filter.isSet);
-}
-const updateAutomatic = (state) => {
-  updateOwnerStateIsValid(state);
-  updateAvailableFields(state);
-  if (state.ownerState.isValid && state.automatic) {
-    state.ownerState.isDirty = false;
-    state.countOnChangeFiltersApplied++;
-  }
-};
-const createAreaStore = (initProps) => {
-  const startProps = {
-    countOnChangeFiltersApplied: 0,
-    appliedFilters: [],
-    availableFields: [],
-    fnAnchorEl: void 0,
-    popoverFilterData: void 0,
-    inputData: "",
-    ...initProps
-  };
-  return createStore(
-    devtools(
-      immer((set, get) => ({
-        ...startProps,
-        actions: {
-          init: (initialFiltersApplied) => {
-            set((state) => {
-              state.appliedFilters = getPurgedInitialFiltersApplied(
-                state.fields,
-                initialFiltersApplied,
-                state.actions.getFieldByName
-              );
-              state.ownerState.isEmpty = state.appliedFilters.length <= 0;
-              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 indexToRemoved = state.appliedFilters.findIndex((f) => id === f.id && !f.fixed);
-              if (indexToRemoved > -1) {
-                state.appliedFilters.splice(indexToRemoved, 1);
-                state.ownerState.isEmpty = state.appliedFilters.length === 0;
-                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.appliedFilters = state.appliedFilters.filter((f) => f.fixed);
-              state.ownerState.isEmpty = state.appliedFilters.length === 0;
-              updateAvailableFields(state);
-            });
-          },
-          fireOnChangeFilters: () => {
-            set((state) => {
-              if (state.ownerState.isValid) {
-                state.ownerState.isDirty = false;
-                state.countOnChangeFiltersApplied++;
-              }
-            });
-          },
-          getNewId: () => {
-            return get().appliedFilters.reduce((prev, filterField) => {
-              return filterField.id > prev ? filterField.id : prev;
-            }, 0) + 1;
-          },
-          addFilter: (newFilter) => {
-            set((state) => {
-              state.appliedFilters.push(newFilter);
-              state.ownerState.isEmpty = state.appliedFilters.length === 0;
-              updateAutomatic(state);
-            });
-          },
-          updateFilter: (editFilter) => {
-            set((state) => {
-              const index = state.appliedFilters.findIndex(
-                (filterField) => filterField.id === editFilter.id
-              );
-              if (index > -1) {
-                state.appliedFilters[index] = editFilter;
-              }
-              updateAutomatic(state);
-            });
-          },
-          setInputData: (inputData) => {
-            set((state) => {
-              state.inputData = inputData;
-            });
-          },
-          setInEdition: (newInEdition) => {
-            set((state) => {
-              state.ownerState.inEdition = newInEdition;
-            });
-          },
-          setExternalState: (newExternalState) => {
-            set((state) => {
-              state.ownerState = { ...state.ownerState, ...newExternalState };
-            });
-          },
-          openPopoverMenuFields: (anchorEl) => {
-            set((state) => {
-              state.fnAnchorEl = () => anchorEl;
-            });
-          },
-          closePopoverMenuFields: (newInEdition) => {
-            set((state) => {
-              state.fnAnchorEl = void 0;
-              state.ownerState.inEdition = newInEdition || false;
-            });
-          }
-        }
-      })),
-      { name: `Dynamic filter` }
-    )
-  );
-};
-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
-    };
-  });
-};
-function formatToInitialFilters(appliedFilters) {
-  return appliedFilters.map((appliedFilter) => {
-    const ret = {
-      name: appliedFilter.field.name,
-      operator: appliedFilter.operator,
-      operand1: appliedFilter.operand1,
-      operand2: appliedFilter.operator === "b" ? appliedFilter.operand2 : void 0
-    };
-    if (appliedFilter.fieldType === "datetime") {
-      ret.operand1 = appliedFilter.operand1.toISOString();
-      ret.operand2 = appliedFilter.operator === "b" ? appliedFilter.operand2.toISOString() : void 0;
-    }
-    if (appliedFilter.fieldType === "select") {
-      const validOperandsArray = filterValidOperandsArraySelect(
-        appliedFilter.operandsArray,
-        appliedFilter.field
-      );
-      if (validOperandsArray && validOperandsArray?.length > 0) {
-        ret.operandsArray = validOperandsArray;
-      }
-    }
-    if (ret.operand2 === void 0) {
-      delete ret.operand2;
-    }
-    return ret;
-  });
-}
-const DynamicFilterContext = createContext(null);
-function DynamicFilterProvider(props) {
-  const {
-    automatic = true,
-    withAllField = true,
-    fields,
-    initialAppliedFilters = [],
-    onChangeFilters,
-    dataTestId = "",
-    children
-  } = 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_FIELD,
-        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(initialAppliedFilters);
-  }
-  const countOnChangeFiltersApplied = useStore(
-    dynamicFilterStoreRef.current,
-    (state) => state.countOnChangeFiltersApplied,
-    shallow
-  );
-  useEffect(() => {
-    if (countOnChangeFiltersApplied === 0) {
-      return;
-    }
-    const state = dynamicFilterStoreRef.current?.getState();
-    if (state) {
-      onChangeFilters?.(
-        formatToInitialFilters(state.appliedFilters),
-        formatToRawFilter(state.appliedFilters)
-      );
-    }
-  }, [countOnChangeFiltersApplied]);
-  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 });
-}
-function useDynamicFilterBase() {
-  const ownerState = useDynamicFilterStore((state) => state.ownerState);
-  const dataTestId = useDynamicFilterStore((state) => state.dataTestId);
-  return { ownerState, dataTestId };
-}
-function useInputFilter() {
-  const [selectedFieldIndex, setSelectedFieldIndex] = useState(-1);
-  const [filteredFields, setFilteredFields] = useState([]);
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const isSkeleton = useModuleSkeleton();
-  const anchorEl = useDynamicFilterStore((state) => state.fnAnchorEl);
-  const withAllField = useDynamicFilterStore((state) => state.withAllField);
-  const availableFields = useDynamicFilterStore((state) => state.availableFields);
-  const inputData = useDynamicFilterStore((state) => state.inputData);
-  const {
-    addFilter,
-    closePopoverMenuFields,
-    getFieldByName,
-    getNewId,
-    hidePopoverFilter,
-    openPopoverMenuFields,
-    setInEdition,
-    setInputData,
-    showPopoverFilterForAdd
-  } = useDynamicFilterStore((state) => state.actions);
-  useEffect(() => {
-    if (!anchorEl) {
-      setFilteredFields([]);
-    } else {
-      setFilteredFields(
-        availableFields.filter(
-          (field) => (field.label ?? getLabel(field.dictionaryId)).includes(inputData)
-        )
-      );
-      setSelectedFieldIndex(-1);
-    }
-  }, [anchorEl, inputData, availableFields, getLabel]);
-  function handleOpenPopUpClickItem(field) {
-    closePopoverMenuFields();
-    if (anchorEl)
-      showPopoverFilterForAdd(anchorEl(), field);
-  }
-  const inputHandlersProps = {
-    onFocus: (event) => {
-      openPopoverMenuFields(event.currentTarget);
-      setInEdition(true);
-    },
-    onChange: (event) => {
-      setInputData(event.target.value);
-      if (!anchorEl) {
-        openPopoverMenuFields(event.currentTarget);
-      }
-      hidePopoverFilter(true);
-    },
-    onKeyDown: (event) => {
-      if (event.key === "ArrowDown") {
-        let newIndex = -1;
-        if (filteredFields.length > 0) {
-          if (selectedFieldIndex < filteredFields.length - 1) {
-            newIndex = selectedFieldIndex + 1;
-          } else {
-            newIndex = filteredFields.length - 1;
-          }
-        }
-        setSelectedFieldIndex(newIndex);
-      }
-      if (event.key === "ArrowUp") {
-        let newIndex = -1;
-        if (filteredFields.length > 0) {
-          if (selectedFieldIndex > -1) {
-            newIndex = selectedFieldIndex - 1;
-          }
-        }
-        setSelectedFieldIndex(newIndex);
-      }
-      if (event.key === "Escape") {
-        closePopoverMenuFields();
-      }
-      if (event.key !== "Enter")
-        return;
-      if (selectedFieldIndex === -1) {
-        if (inputData.trim() === "") {
-          closePopoverMenuFields();
-          return;
-        }
-        if (withAllField) {
-          addFilter({
-            id: getNewId(),
-            fieldType: "string",
-            field: getFieldByName(ALL_FIELD.name),
-            isSet: true,
-            fixed: false,
-            operator: "c",
-            operand1: inputData
-          });
-          setInputData("");
-          closePopoverMenuFields();
-        }
-      } else {
-        handleOpenPopUpClickItem(filteredFields[selectedFieldIndex]);
-      }
-    }
-  };
-  return {
-    iconUrl: `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/filter.svg`,
-    isSkeleton,
-    inputPlaceHolder: getLabel(getDynamicFilterDictionary(DICCTIONARY.input_placeholder)),
-    inputData,
-    inputHandlersProps,
-    canRender: !(!withAllField && availableFields.length === 0),
-    filteredFields,
-    selectedFieldIndex
-  };
-}
-function InputFilterSkeleton() {
-  return /* @__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", sx: { minWidth: "80px" } })
-  ] });
-}
-var DynamicFilterSlots = /* @__PURE__ */ ((DynamicFilterSlots2) => {
-  DynamicFilterSlots2["root"] = "root";
-  DynamicFilterSlots2["innerContainer"] = "innerContainer";
-  DynamicFilterSlots2["inputFilter"] = "inputFilter";
-  DynamicFilterSlots2["inputFilterInput"] = "inputFilterInput";
-  DynamicFilterSlots2["inputFilterIcon"] = "inputFilterIcon";
-  DynamicFilterSlots2["appliedFilters"] = "appliedFilters";
-  DynamicFilterSlots2["appliedFilterInnerContainer"] = "appliedFilterInnerContainer";
-  DynamicFilterSlots2["appliedFilterChip"] = "appliedFilterChip";
-  DynamicFilterSlots2["appliedFilterChipIcon"] = "appliedFilterChipIcon";
-  DynamicFilterSlots2["appliedFilterChipInfo"] = "appliedFilterChipInfo";
-  DynamicFilterSlots2["appliedFilterChipInfoFieldName"] = "appliedFilterChipInfoFieldName";
-  DynamicFilterSlots2["appliedFilterChipInfoOperator"] = "appliedFilterChipInfoOperator";
-  DynamicFilterSlots2["appliedFilterChipInfoOperands"] = "appliedFilterChipInfoOperands";
-  DynamicFilterSlots2["appliedFilterChipRemoveButton"] = "appliedFilterChipRemoveButton";
-  DynamicFilterSlots2["actions"] = "actions";
-  DynamicFilterSlots2["actionsSkeletonButton"] = "actionsSkeletonButton";
-  DynamicFilterSlots2["actionsClearButton"] = "actionsClearButton";
-  DynamicFilterSlots2["actionsSubmitButton"] = "actionsSubmitButton";
-  DynamicFilterSlots2["popoverMenu"] = "popoverMenu";
-  DynamicFilterSlots2["popoverMenuItem"] = "popoverMenuItem";
-  DynamicFilterSlots2["popoverMenuItemIcon"] = "popoverMenuItemIcon";
-  DynamicFilterSlots2["popoverMenuItemLabel"] = "popoverMenuItemLabel";
-  DynamicFilterSlots2["popoverFilter"] = "popoverFilter";
-  DynamicFilterSlots2["popoverFilterContainerFields"] = "popoverFilterContainerFields";
-  DynamicFilterSlots2["popoverFilterHeader"] = "popoverFilterHeader";
-  DynamicFilterSlots2["popoverFilterHeaderIcon"] = "popoverFilterHeaderIcon";
-  DynamicFilterSlots2["popoverFilterHeaderTitle"] = "popoverFilterHeaderTitle";
-  DynamicFilterSlots2["popoverFilterActions"] = "popoverFilterActions";
-  return DynamicFilterSlots2;
-})(DynamicFilterSlots || {});
-const CONTAINER_QUERY_NAME = "dynamic";
-const dynamicFilterStyles = {
-  root: {
-    containerName: CONTAINER_QUERY_NAME,
-    containerType: "inline-size",
-    width: "100%",
-    height: "auto",
-    padding: 0
-  },
-  innerContainer: ({ theme, ownerState }) => ({
-    display: "grid",
-    gridTemplateColumns: "auto 1fr auto",
-    gridTemplateAreas: '"input-filter applied-filters actions-filter"',
-    alignItems: "center",
-    justifyContent: "flex-start",
-    width: "100%",
-    height: "fit-content",
-    border: "1px solid",
-    borderRadius: "4px",
-    borderColor: theme.vars.palette.state?.borderPrimary,
-    background: theme.vars.palette.background.default,
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      minHeight: "auto",
-      height: "auto",
-      gridTemplateColumns: "1fr auto",
-      gridTemplateAreas: `"input-filter  actions-filter"
-                          "applied-filters applied-filters"`
-    },
-    "&:focus-within": {
-      borderColor: !ownerState.isValid ? theme.vars.palette.state.error.normal : theme.vars.palette.state?.focus
-    },
-    ...ownerState.isValid === false ? {
-      borderColor: theme.palette.state.error.normal
-    } : {}
-  }),
-  inputFilter: ({ theme }) => ({
-    gridArea: "input-filter",
-    display: "flex",
-    flexDirection: "row",
-    gap: "8px",
-    padding: "4px 6px 4px 4px",
-    height: "100%",
-    maxWidth: "135px",
-    width: "100%",
-    alignItems: "center",
-    borderTopLeftRadius: "4px",
-    borderBottomLeftRadius: "4px",
-    borderRight: "1px solid",
-    borderColor: theme.vars.palette.state?.borderPrimary,
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      height: "32px",
-      width: "100%",
-      maxWidth: "100%",
-      borderRight: "none"
-    },
-    [theme.breakpoints.down("sm")]: {
-      height: "44px",
-      justifyContent: "center"
-    }
-  }),
-  inputFilterInput: ({ theme }) => ({
-    ...theme.typography.body,
-    background: theme.vars.palette.background.default,
-    color: theme.vars.palette.text.secondary,
-    border: "1px solid",
-    borderColor: "transparent",
-    padding: "4px 8px",
-    width: "100%",
-    height: "100%",
-    "&::placeholder": {
-      color: theme.vars.palette.text.secondary
-    },
-    "&:focus-visible": {
-      color: theme.vars.palette.text.secondary,
-      border: "1px solid",
-      borderColor: theme.vars.palette.state?.active12,
-      background: theme.vars.palette.state?.active12,
-      BorderRadius: "2px",
-      outline: "none!important"
-    },
-    "&:hover": {
-      borderColor: theme.vars.palette.state?.toneOp,
-      background: theme.vars.palette.state?.hoverDefault
-    }
-  }),
-  inputFilterIcon: {
-    visibility: "visible"
-  },
-  appliedFilters: ({ theme }) => ({
-    gridArea: "applied-filters",
-    width: "100%",
-    height: "fit-content",
-    paddingLeft: theme.spacing(1),
-    borderLeft: "none",
-    margin: "0px",
-    padding: "0px 4px",
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      height: "auto",
-      padding: "4px",
-      display: "flex",
-      borderTop: "1px solid ",
-      borderColor: theme.vars.palette.state?.borderSecondary,
-      "&:has(div[class*=appliedFilterInnerContainer]:empty), &:empty": {
-        display: "none"
-      }
-    }
-  }),
-  appliedFilterInnerContainer: ({ theme }) => ({
-    padding: "2px",
-    gap: "4px",
-    height: "fit-content",
-    display: "flex",
-    flexWrap: "nowrap",
-    width: "100%",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    [containerQuery(theme.breakpoints, CONTAINER_QUERY_NAME)]: {
-      height: "32px",
-      padding: 0,
-      margin: 0,
-      border: 0
-    },
-    [theme.breakpoints.down("sm")]: {
-      padding: 0,
-      height: "44px"
-    }
-  }),
-  appliedFilterChip: ({ theme }) => ({
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    overflow: "visible",
-    width: "auto",
-    height: "24px",
-    minHeight: theme.spacing(3),
-    paddingLeft: theme.spacing(1),
-    borderColor: alpha(`${theme.palette.divider}`, 0.1),
-    border: "none",
-    borderRadius: "4px",
-    backgroundColor: theme.palette.state?.default,
-    color: theme.palette.text.secondary,
-    ...theme.typography.body,
-    [theme.breakpoints.down("sm")]: {
-      height: "fit-content"
-    }
-  }),
-  appliedFilterChipIcon: {
-    visibility: "visible"
-  },
-  appliedFilterChipInfo: ({ theme }) => ({
-    ...theme.typography.body2,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    width: "auto",
-    height: "100%",
-    marginRight: theme.spacing(1),
-    marginLeft: theme.spacing(1),
-    whiteSpace: "nowrap",
-    border: "none",
-    backgroundColor: "transparent"
-  }),
-  appliedFilterChipInfoFieldName: ({ theme }) => ({
-    ...theme.typography.subtitle2,
-    color: theme.palette.text.secondary
-  }),
-  appliedFilterChipInfoOperator: ({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
-    fontStyle: "italic",
-    color: theme.palette.text.secondary
-  }),
-  appliedFilterChipInfoOperands: ({ theme }) => ({
-    ...theme.typography.body2,
-    marginLeft: theme.spacing(1.5),
-    color: theme.palette.text.secondary
-  }),
-  appliedFilterChipRemoveButton: {
-    visibility: "visible"
-  },
-  actions: ({ theme }) => ({
-    gridArea: "actions-filter",
-    display: "flex",
-    flexDirection: "row",
-    gap: "8px",
-    padding: "4px",
-    height: "100%",
-    alignItems: "center",
-    borderTopRightRadius: "4px",
-    borderBottomRightRadius: "4px",
-    borderLeft: "1px solid",
-    borderColor: theme.palette.state?.borderPrimary
-  }),
-  actionsSkeletonButton: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    width: "24px",
-    height: "24px"
-  },
-  actionsClearButton: {
-    visibility: "visible"
-  },
-  actionsSubmitButton: ({ theme, ownerState }) => ({
-    ...ownerState.isValid === false ? { border: `1px dashed ${theme.palette.error.main}` } : {
-      visibility: "visible"
-    }
-  }),
-  popoverMenu: ({ theme }) => ({
-    "& .MuiPaper-root": {
-      display: "flex",
-      flexDirection: "column",
-      padding: "8px !important",
-      gap: "4px",
-      borderRadius: "6px",
-      [theme.breakpoints.down("md")]: {
-        gap: "4px"
-      },
-      "& .M4LPopover-arrowStyle": {
-        display: "none"
-      }
-    }
-  }),
-  popoverMenuItem: ({ theme }) => ({
-    paddingLeft: "4px",
-    paddingRight: "4px",
-    borderRadius: "4px",
-    "&:hover": {
-      ...theme.typography.body,
-      color: theme.palette.state?.hover,
-      background: theme.palette.state?.default,
-      borderRadius: "4px",
-      padding: "4px 12px 4px 8px"
-    }
-  }),
-  popoverMenuItemLabel: ({ theme }) => ({
-    ...theme.typography.body,
-    color: theme.palette.text.primary
-  }),
-  popoverMenuItemIcon: {
-    visibility: "visible"
-  },
-  popoverFilter: ({ theme }) => ({
-    width: "auto",
-    "& .MuiPaper-root": {
-      padding: "0 !important",
-      minWidth: "220px",
-      maxWidth: "100%",
-      minHeight: "auto",
-      boxShadow: theme.customShadows?.z3,
-      "& .M4LPopover-arrowStyle": {
-        display: "none"
-      },
-      "& .M4LRHFormProvider-root": {
-        gap: "0px",
-        width: "max-content",
-        minWidth: "220px",
-        maxWidth: "420px",
-        height: "fit-content"
-      }
-    }
-  }),
-  popoverFilterHeader: ({ theme }) => ({
-    backgroundColor: theme.palette.state?.default,
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    padding: "4px 4px 4px 8px",
-    borderTopLeftRadius: "4px",
-    borderTopRightRadius: "4px",
-    borderBottom: "0px",
-    height: "28px",
-    [theme.breakpoints.down("sm")]: {
-      height: "36px"
-    }
-  }),
-  popoverFilterHeaderIcon: {
-    visibility: "visible"
-  },
-  popoverFilterHeaderTitle: ({ theme }) => ({
-    ...theme.typography.paragraphDens,
-    color: theme.palette.text.primary
-  }),
-  popoverFilterContainerFields: ({ theme }) => ({
-    height: "fit-content",
-    "& > div": {
-      display: "flex",
-      height: "auto",
-      flexDirection: "column",
-      padding: "12px 12px 0 12px",
-      gap: "8px",
-      [theme.breakpoints.down("sm")]: {
-        padding: "16px 16px 0 16px",
-        gap: "12px"
-      }
-    }
-  }),
-  popoverFilterActions: ({ theme }) => ({
-    display: "flex",
-    flexDirection: "row",
-    gap: "16px",
-    padding: "16px 12px 12px 12px !important",
-    [theme.breakpoints.down("sm")]: {
-      padding: "24px 16px 16px 16px !important"
-    },
-    "& > .M4LButton-root": {
-      height: "24px",
-      minHeight: "24px",
-      [theme.breakpoints.down("sm")]: {
-        height: "36px"
-      }
-    }
-  })
-};
-const InputFilter = () => {
-  const {
-    iconUrl,
-    isSkeleton,
-    inputPlaceHolder,
-    inputData,
-    inputHandlersProps,
-    canRender,
-    filteredFields,
-    selectedFieldIndex
-  } = useInputFilter();
-  if (!canRender)
-    return null;
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(InputFilterStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(InputFilterSkeleton, {}) });
-  }
-  return /* @__PURE__ */ jsxs(InputFilterStyled, { ownerState: {}, children: [
-    /* @__PURE__ */ jsx(InputFilterIconStyled, { src: iconUrl, ownerState: {} }),
-    /* @__PURE__ */ jsx(
-      InputFilterInputStyled,
-      {
-        type: "text",
-        value: inputData,
-        placeholder: inputPlaceHolder,
-        ownerState: {},
-        ...inputHandlersProps
-      }
-    ),
-    /* @__PURE__ */ jsx(PopoverMenuFields, { fields: filteredFields, selectFieldIndex: selectedFieldIndex })
-  ] });
-};
-const InputFilter$1 = InputFilter;
-function useAppliedFilters() {
-  const appliedFilter = useDynamicFilterStore((state) => state.appliedFilters);
-  const isSkeleton = useDynamicFilterStore((state) => state.ownerState.isSkeleton);
-  const appliedFiltersSorted = [...appliedFilter].sort(
-    (filterA, filterB) => filterA.isSet !== filterB.isSet ? Number(filterA.isSet) - Number(filterB.isSet) : filterB.id - filterA.id
-  );
-  return {
-    appliedFiltersSorted,
-    isSkeleton
-  };
-}
-function useAppliedFilterChip(filter) {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const { getLabel } = useModuleDictionary();
-  const formatters = useFormatter();
-  const { hidePopoverFilter, removeFilter, showPopoverFilterForEdit } = useDynamicFilterStore(
-    (state) => state.actions
-  );
-  const removeIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/clear.svg`;
-  const labels = useMemo(() => {
-    return fieldFactory(filter.field.type).getLabels(filter, getLabel, formatters, filter.field);
-  }, [filter, getLabel]);
-  function onDelete() {
-    hidePopoverFilter(false);
-    removeFilter(filter.id);
-  }
-  function onEditFilter(event) {
-    hidePopoverFilter(false);
-    const currentTarget = event.currentTarget;
-    setTimeout(() => showPopoverFilterForEdit(currentTarget, filter), 10);
-  }
-  return {
-    onDelete,
-    onEditFilter,
-    removeIconUrl,
-    iconFieldUrl: filter.field?.urlIcon,
-    labels
-  };
-}
-function AppliedFilterChip(props) {
-  const { fixed } = props;
-  const { onEditFilter, onDelete, iconFieldUrl, removeIconUrl, labels } = useAppliedFilterChip(props);
-  return /* @__PURE__ */ jsxs(AppliedFilterChipStyled, { ownerState: {}, children: [
-    iconFieldUrl && /* @__PURE__ */ jsx(AppliedFilterChipIconStyled, { onClick: onEditFilter, src: iconFieldUrl, ownerState: {} }),
-    /* @__PURE__ */ jsxs(AppliedFilterChipInfoStyled, { onClick: onEditFilter, ownerState: {}, children: [
-      /* @__PURE__ */ jsx(AppliedFilterChipInfoFieldNameStyled, { ownerState: {}, children: labels.labelField }),
-      /* @__PURE__ */ jsx(AppliedFilterChipInfoOperatorStyled, { ownerState: {}, children: labels.labelOperator }),
-      /* @__PURE__ */ jsx(AppliedFilterChipInfoOperandsStyled, { ownerState: {}, children: labels.labelOperands })
-    ] }),
-    !fixed && /* @__PURE__ */ jsx(
-      AppliedFilterChipRemoveButtonStyled,
-      {
-        src: removeIconUrl,
-        size: "small",
-        dictionaryTooltipId: "dynamic_filter.tooltip_clear_filter",
-        onClick: onDelete,
-        ownerState: {}
-      }
-    )
-  ] });
-}
-function AppliedFilters() {
-  const { appliedFiltersSorted, isSkeleton } = useAppliedFilters();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(AppliedFiltersStyled, { ownerState: {} });
-  }
-  return /* @__PURE__ */ jsx(AppliedFiltersStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(ScrollBar, { children: /* @__PURE__ */ jsx(AppliedFilterInnerContainerStyled, { ownerState: {}, children: appliedFiltersSorted?.map((filter) => /* @__PURE__ */ jsx(AppliedFilterChip, { ...filter }, filter.id)) }) }) });
-}
-const ASSETS_URL = "frontend/components/dynamic_filter/assets/icons";
-const ASSETS = {
-  refresh: "restart.svg",
-  search: "search.svg"
-};
-function useFilterActions() {
-  const { host_static_assets, environment_assets } = useEnvironment();
-  const automatic = useDynamicFilterStore((state) => state.automatic);
-  const isSkeleton = useDynamicFilterStore((state) => state.ownerState.isSkeleton);
-  const isValid = useDynamicFilterStore((state) => state.ownerState.isValid);
-  const isDirty = useDynamicFilterStore((state) => state.ownerState.isDirty);
-  const appliedFilters = useDynamicFilterStore((state) => state.appliedFilters);
-  const { hidePopoverFilter, clearFilters, fireOnChangeFilters } = useDynamicFilterStore(
-    (state) => state.actions
-  );
-  function onClickClearFilters() {
-    hidePopoverFilter(false);
-    clearFilters();
-    fireOnChangeFilters();
-  }
-  const filterIconUrl = `${host_static_assets}/${environment_assets}/${ASSETS_URL}/${automatic ? ASSETS.refresh : ASSETS.search}`;
-  const clearIconUrl = `${host_static_assets}/${environment_assets}/frontend/components/dynamic_filter/assets/icons/close.svg`;
-  const canShowRemoveAction = appliedFilters.findIndex((f) => !f.fixed) > -1;
-  const filterButtonDictionaryTooltip = getDynamicFilterDictionary(
-    isValid ? isDirty ? DICCTIONARY.filter_tooltip_dirty : DICCTIONARY.filter_tooltip_refresh : DICCTIONARY.filter_tooltip_invalid
-  );
-  return {
-    isSkeleton,
-    filterIconUrl,
-    clearIconUrl,
-    canShowRemoveAction,
-    onClickClearFilters,
-    onClickFilter: fireOnChangeFilters,
-    filterButtonDictionaryTooltip,
-    ownerState: { isValid }
-  };
-}
-function FilterActionsSkeleton() {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) }),
-    /* @__PURE__ */ jsx(ActionsSkeletonButtonStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: "16px", height: "16px" }) })
-  ] });
-}
-function FilterActions() {
-  const {
-    isSkeleton,
-    filterIconUrl,
-    clearIconUrl,
-    canShowRemoveAction,
-    onClickClearFilters,
-    onClickFilter,
-    filterButtonDictionaryTooltip,
-    ownerState
-  } = useFilterActions();
-  if (isSkeleton) {
-    return /* @__PURE__ */ jsx(ActionsStyled, { ownerState: {}, children: /* @__PURE__ */ jsx(FilterActionsSkeleton, {}) });
-  }
-  return /* @__PURE__ */ jsxs(ActionsStyled, { ownerState: {}, children: [
-    canShowRemoveAction && /* @__PURE__ */ jsx(
-      ActionsClearButtonStyled,
-      {
-        src: clearIconUrl,
-        onClick: onClickClearFilters,
-        dictionaryTooltipId: "dynamic_filter.tooltip_clear_filters",
-        ownerState: {}
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ActionsSubmitButtonStyled,
-      {
-        src: filterIconUrl,
-        "aria-label": "settings",
-        dictionaryTooltipId: filterButtonDictionaryTooltip,
-        onClick: onClickFilter,
-        ownerState: { ...ownerState }
-      }
-    )
-  ] });
-}
-function DataTypeComponent(props) {
-  const { formFilter, statusLoad } = props;
-  const { setFocus } = useFormContext();
-  const Component = fieldFactory(formFilter.field.type).getComponent();
-  useEffect(() => {
-    setTimeout(() => setFocus("formValueOperand1"), 100);
-  }, [statusLoad]);
-  return /* @__PURE__ */ jsx(Component, {});
-}
-function DynamicFilterBase() {
-  const { ownerState, dataTestId } = useDynamicFilterBase();
-  return /* @__PURE__ */ jsx(
-    RootStyled,
-    {
-      ownerState: { ...ownerState },
-      ...getPropDataTestId(dataTestId, DynamicFilterSlots.root),
-      children: /* @__PURE__ */ jsxs(
-        InnerContainerStyled,
-        {
-          ownerState: { ...ownerState },
-          ...getPropDataTestId(dataTestId, DynamicFilterSlots.innerContainer),
-          children: [
-            /* @__PURE__ */ jsx(InputFilter$1, {}),
-            /* @__PURE__ */ jsx(AppliedFilters, {}),
-            /* @__PURE__ */ jsx(FilterActions, {}),
-            /* @__PURE__ */ jsx(PopoverFilter, {})
-          ]
-        }
-      )
-    }
-  );
-}
-function DynamicFilter(props) {
-  const hasPresentFlags = useFlagsPresent([CommonFlags.FLAG_DICTIONARY_LOADED]);
-  if (!hasPresentFlags) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(DynamicFilterProvider, { ...props, children: /* @__PURE__ */ jsx(DynamicFilterBase, {}) });
-}
-export {
-  DynamicFilterSlots as D,
-  DynamicFilter as a,
-  DataTypeComponent as b,
-  dynamicFilterStyles as d,
-  fieldFactory as f,
-  useDynamicFilterStore as u
-};