@m4l/components 9.2.49 → 9.2.50-beta.2

package/@types/types.d.ts

@@ -145,7 +145,7 @@ import { RHFUploadSingleFileOwnerState, RHFUploadSingleFileSlotsType } from '../
 import { ChipStatusFormatterSlotsType } from '../components/formatters/ChipStatusFormatter/types';
 import { RHFUploadImageOwnerState, RHFUploadImageSlotsType } from '../components/hook-form/RHFUpload/RHFUploadImage/types';
 import { PrintingSystemOwnerState, PrintingSystemSlotsType } from '../components/PrintingSystem/types';
-
+import { SplitLayoutOwnerState } from '../components/extended/React-resizable-panels/types';
 declare module '@mui/material/styles' {
   // Define the slots in the theme
   interface ComponentNameToClassKey {
@@ -222,6 +222,7 @@ declare module '@mui/material/styles' {
     M4LChipStatusFormatter: ChipStatusFormatterSlotsType;
     M4LRHFUploadImage: RHFUploadImageSlotsType;
     M4LPrintingSystem: PrintingSystemSlotsType;
+    M4LSplitLayout: SplitLayoutOwnerState;
   }
   interface ComponentsPropsList {
     // Extend ComponentsProps or ComponentsOwnerState(this extend ComponentProps)
@@ -298,6 +299,7 @@ declare module '@mui/material/styles' {
     M4LChipStatusFormatter: Partial<ChipStatusFormatterOwnerState>;
     M4LRHFUploadImage: Partial<RHFUploadImageOwnerState>;
     M4LPrintingSystem: Partial<PrintingSystemOwnerState>;
+    M4LSplitLayout: Partial<SplitLayoutOwnerState>;
   }
   interface Components {
     M4LDynamicFilter?: {
@@ -675,5 +677,10 @@ declare module '@mui/material/styles' {
       styleOverrides?: ComponentsOverrides<Theme>['M4LPrintingSystem'];
       variants?: ComponentsVariants['M4LPrintingSystem'];
     };
+    M4LSplitLayout?: {
+      defaultProps?: ComponentsPropsList['M4LSplitLayout'];
+      styleOverrides?: ComponentsOverrides<Theme>['M4LSplitLayout'];
+      variants?: ComponentsVariants['M4LSplitLayout'];
+    };
   }
 }

package/components/Chip/ChipStyles.js

@@ -1,5 +1,5 @@
 import { g as getSizeStyles } from "../../utils/getSizeStyles/getSizeStyles.js";
-import { lighten, darken } from "@mui/material/styles";
+import { darken, lighten } from "@mui/material/styles";
 const getExternalColor = (externalColor) => {
   try {
     return {

package/components/DataGrid/contexts/DataGridContext/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useState, useMemo, useEffect, useCallback } from "react";
+import { useState, useMemo, useEffect, useCallback, createContext } from "react";
 import { c as castMapColumnsWidthToRecord } from "../../helpers/castMapColumnsWidthToRecord.js";
 import { useFirstRender } from "@m4l/graphics";
 const DataGridContext = createContext(null);

package/components/DataGrid/contexts/FilterContext/index.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
+import { useState, createContext } from "react";
 import { voidFunction } from "@m4l/core";
 const initialState = {
   activeFilters: false,

package/components/DataGrid/dictionary.js

@@ -5,9 +5,6 @@ function getDataGridComponentsDictionary() {
   return ["data_grid"].concat(getPagerComponentsDictionary()).concat(getMenuActionsComponentsDictionary()).concat(getModalDictionary());
 }
 const dictionary = {
-  LABEL_ACTIONS: "actions",
-  LABEL_ROWS_PER_PAGE: "pager.rows_per_page",
-  LABEL_OF: "pager.of",
   DENSITY_COMPACT: `${getDataGridComponentsDictionary()[0]}.density_compact`,
   DENSITY_STANDARD: `${getDataGridComponentsDictionary()[0]}.density_standard`,
   DENSITY_CONFORTABLE: `${getDataGridComponentsDictionary()[0]}.density_confortable`,

package/components/DataGrid/formatters/ColumnChipStatusFormatter/formatter.js

@@ -2,12 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
 import { C as ChipStatusFormatterColumnWrapperStyled } from "../../../formatters/ChipStatusFormatter/slots/ChipStatusFormatterSlots.js";
+import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 import { C as ChipStatusFormatter } from "../../../formatters/ChipStatusFormatter/ChipStatusFormatter.js";
 const ColumnChipStatusFormatter = (props) => {
-  const { fieldStatus: uriStatus, fieldLabel: uriLabel, statusesColors, fallbackColor } = props;
+  const { fieldStatus, fieldLabel, statusesColors, fallbackColor } = props;
   return (obProps) => {
-    const label = typeof uriLabel === "string" ? getPropertyByString(obProps, getFieldValueWithRow(uriStatus.toString())) : uriLabel(obProps, uriStatus);
-    const status = getPropertyByString(obProps, getFieldValueWithRow(uriStatus.toString()));
+    const status = getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldStatus.toString())));
+    const label = typeof fieldLabel === "string" ? getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldLabel))) : fieldLabel(obProps.row, status);
     return /* @__PURE__ */ jsx(
       ChipStatusFormatter,
       {

package/components/DataGrid/formatters/ColumnNestedValueFormatter/formatter.js

@@ -2,10 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import { getPropertyByString } from "@m4l/core";
 import React from "react";
 import { g as getFieldValueWithRow } from "../../../../helpers/getFieldValueWithRow.js";
+import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 function ColumnNestedValueFormatter(props) {
   const { fieldValue, Component = React.Fragment } = props;
   return (obProps) => {
-    const property = getPropertyByString(obProps, getFieldValueWithRow(fieldValue));
+    const property = getNullGuard(getPropertyByString(obProps, getFieldValueWithRow(fieldValue)));
     const value = typeof property === "object" ? JSON.stringify(property) : property;
     return /* @__PURE__ */ jsx(Component, { children: value });
   };

package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.d.ts

@@ -5,6 +5,6 @@ import { ColumnNestedValueFormatterProps } from './types';
  */
 export declare const useColumnNestedValue: <TRow>(props: ColumnNestedValueFormatterProps<TRow>) => {
     formatter: (obProps: any) => import("react/jsx-runtime").JSX.Element;
-    customFilter: (row: TRow, value: string) => boolean;
+    customFilter: (row: TRow, value: string) => any;
     customSort: (a: TRow, b: TRow) => 0 | 1 | -1;
 };

package/components/DataGrid/formatters/ColumnNestedValueFormatter/useColumnNestedValue.js

@@ -2,10 +2,11 @@ import { getPropertyByString } from "@m4l/core";
 import { useState, useRef, useEffect, useMemo } from "react";
 import { deepEqual } from "fast-equals";
 import { g as getColumnKey } from "../../helpers/getColumnKey.js";
+import { g as getNullGuard } from "../../../../utils/getNullGuard.js";
 import { C as ColumnNestedValueFormatter } from "./formatter.js";
 const getCustomNestedValueFilter = (props) => {
   return (row, value) => {
-    const property = getPropertyByString(row, props.fieldValue) ?? "";
+    const property = getNullGuard(getPropertyByString(row, props.fieldValue));
     if (typeof property === "object") {
       return Object.values(property).includes(value);
     }
@@ -15,8 +16,8 @@ const getCustomNestedValueFilter = (props) => {
 const getCustomNestedValueSort = (props) => {
   return (a, b) => {
     const keyWiouthRow = getColumnKey(props.fieldValue);
-    const valueA = getPropertyByString(a, keyWiouthRow);
-    const valueB = getPropertyByString(b, keyWiouthRow);
+    const valueA = getNullGuard(getPropertyByString(a, keyWiouthRow));
+    const valueB = getNullGuard(getPropertyByString(b, keyWiouthRow));
     if (typeof valueA === "object" || typeof valueB === "object" || valueA === void 0 || valueB === void 0) {
       return 0;
     }

package/components/DataGrid/slots/DataGridEnum.js

@@ -40,6 +40,6 @@ export {
   ColumnsConfigSlots as C,
   DataGridSlots as D,
   RowsCountSlots as R,
-  TableSlots as T,
-  TextEditorSlots as a
+  TextEditorSlots as T,
+  TableSlots as a
 };

package/components/DataGrid/slots/DataGridSlot.js

@@ -1,7 +1,7 @@
 import { styled } from "@mui/material/styles";
 import { InputBase } from "@mui/material";
 import { D as DATAGRID_PREFIX_NAME } from "../constants.js";
-import { D as DataGridSlots, A as ActionsSlots, R as RowsCountSlots, C as ColumnsConfigSlots, T as TableSlots, a as TextEditorSlots } from "./DataGridEnum.js";
+import { D as DataGridSlots, T as TextEditorSlots, A as ActionsSlots, a as TableSlots, R as RowsCountSlots, C as ColumnsConfigSlots } from "./DataGridEnum.js";
 import { d as dataGridStyles } from "../styles.js";
 const DataGridRootStyled = styled("div", {
   name: DATAGRID_PREFIX_NAME,

package/components/DataGrid/subcomponents/Table/hooks/useSortColumnsRows.js

@@ -17,6 +17,7 @@ function getComparator(columns, sortColumn) {
     return column.customSort;
   }
   switch (typeOrder) {
+    //Si el tipo de dato de la columna es un numerico, retorna una función de ordenamiento numérica
     case "number":
       return (a, b) => {
         try {
@@ -25,6 +26,7 @@ function getComparator(columns, sortColumn) {
           return -1;
         }
       };
+    //Por defecto retorna una función de ordenamiento de string
     default:
       return (a, b) => {
         try {

package/components/DataGrid/subcomponents/Table/subcomponents/CheckboxFormatter.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { C as CheckboxIcon, a as CheckboxCheckedIcon, b as CheckboxIndeterminateIcon } from "./CustomIcons.js";
+import { C as CheckboxIndeterminateIcon, a as CheckboxCheckedIcon, b as CheckboxIcon } from "./CustomIcons.js";
 import { Checkbox } from "@mui/material";
 const CheckboxFormatter = forwardRef(
   function CheckboxFormatter2({ onChange, checked, ...props }, _ref) {

package/components/DataGrid/subcomponents/Table/subcomponents/CustomIcons.js

@@ -10,7 +10,7 @@ function CheckboxIndeterminateIcon(props) {
   return /* @__PURE__ */ jsx(SvgIcon, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17 3a4 4 0 014 4v10a4 4 0 01-4 4H7a4 4 0 01-4-4V7a4 4 0 014-4h10zm-1.75 8h-6.5a.75.75 0 00-.75.75v.5c0 .414.336.75.75.75h6.5a.75.75 0 00.75-.75v-.5a.75.75 0 00-.75-.75z" }) });
 }
 export {
-  CheckboxIcon as C,
+  CheckboxIndeterminateIcon as C,
   CheckboxCheckedIcon as a,
-  CheckboxIndeterminateIcon as b
+  CheckboxIcon as b
 };

package/components/DragResizeWindowRND/DragResizeWindowRND.js

@@ -138,7 +138,6 @@ const DragResizeWindowRND = forwardRef((props, ref) => {
     minWindowWidth: minWidth,
     minWindowHeight: minHeight,
     wrapperRef,
-    currentState,
     allowHeightResizeContainer,
     allowWidthResizeContainer
   });

package/components/DynamicFilter/DynamicFilter.styles.js

@@ -80,7 +80,6 @@ const dynamicFilterStyles = {
     borderColor: "transparent",
     paddingLeft: theme.vars.size.baseSpacings.sp2,
     paddingRight: theme.vars.size.baseSpacings.sp2,
-    width: "100%",
     height: "100%",
     "&::placeholder": {
       color: theme.vars.palette.text.secondary

package/components/DynamicFilter/constants.d.ts

@@ -1,9 +1,12 @@
-import { BooleanOperator, DateTimeOperator, FilterField, NumberOperator, SelectOperator, StringOperator } from './types';
+import { BooleanOperator, DateTimeOperator, FilterField, NumberOperator, SelectOperator, SelectOperatorAsync, StringOperator } from './types';
 export declare const DYNAMIC_FILTER_KEY_COMPONENT = "M4LDynamicFilter";
 export declare const DYNAMIC_FILTER_SOTORE_ID = "M4LDynamicFilterStore";
 export declare const ALL_FIELD: FilterField;
 export declare const STRING_OPERATORS: Array<StringOperator>;
 export declare const NUMBER_OPERATORS: Array<NumberOperator>;
 export declare const BOOLEAN_OPERATORS: Array<BooleanOperator>;
-export declare const SELECT_OPERATORS: Array<SelectOperator>;
+export declare const SELECT_OPERATORS_MULTIPLE: Array<SelectOperator>;
+export declare const SELECT_OPERATORS_SINGLE: Array<SelectOperator>;
+export declare const SELECT_ASYNC_OPERATORS_MULTIPLE: Array<SelectOperatorAsync>;
+export declare const SELECT_ASYNC_OPERATORS_SINGLE: Array<SelectOperatorAsync>;
 export declare const DATE_TIME_OPERATORS: Array<DateTimeOperator>;

package/components/DynamicFilter/constants.js

@@ -11,7 +11,10 @@ const ALL_FIELD = {
 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 SELECT_OPERATORS_MULTIPLE = ["in", "nin"];
+const SELECT_OPERATORS_SINGLE = ["e", "ne"];
+const SELECT_ASYNC_OPERATORS_MULTIPLE = ["in", "nin"];
+const SELECT_ASYNC_OPERATORS_SINGLE = ["e", "ne"];
 const DATE_TIME_OPERATORS = [
   "b",
   "e",
@@ -26,8 +29,11 @@ export {
   BOOLEAN_OPERATORS as B,
   DYNAMIC_FILTER_KEY_COMPONENT as D,
   NUMBER_OPERATORS as N,
-  SELECT_OPERATORS as S,
+  SELECT_ASYNC_OPERATORS_MULTIPLE as S,
   DYNAMIC_FILTER_SOTORE_ID as a,
   DATE_TIME_OPERATORS as b,
-  STRING_OPERATORS as c
+  SELECT_ASYNC_OPERATORS_SINGLE as c,
+  SELECT_OPERATORS_MULTIPLE as d,
+  SELECT_OPERATORS_SINGLE as e,
+  STRING_OPERATORS as f
 };

package/components/DynamicFilter/dictionary.d.ts

@@ -5,43 +5,45 @@ export declare const DYNAMIC_FILTER_DICTIONARY_ID = "dynamic_filter";
  */
 export declare function getDynamicFilterComponentsDictionary(): string[];
 export declare const DICCTIONARY: {
-    readonly input_placeholder: "input_placeholder";
-    readonly operand_true: "operand_true";
-    readonly operand_false: "operand_false";
-    readonly filter_tooltip_refresh: "filter_tooltip_refresh";
-    readonly filter_tooltip_dirty: "filter_tooltip_dirty";
-    readonly filter_tooltip_invalid: "filter_tooltip_invalid";
-    readonly operator_b: "operator_b";
-    readonly operator_e: "operator_e";
-    readonly operator_ne: "operator_ne";
-    readonly operator_gt: "operator_gt";
-    readonly operator_gte: "operator_gte";
-    readonly operator_lt: "operator_lt";
-    readonly operator_lte: "operator_lte";
-    readonly operator_c: "operator_c";
-    readonly operator_nc: "operator_nc";
-    readonly operator_in: "operator_in";
-    readonly operator_nin: "operator_nin";
-    readonly label_boolean_operator: "label_boolean_operator";
-    readonly label_boolean_operand1: "label_boolean_operand1";
-    readonly label_operator_date_time: "label_operator_date_time";
-    readonly label_operand1_date_time: "label_operand1_date_time";
-    readonly label_operand2_date_time: "label_operand2_date_time";
-    readonly label_operator_number: "label_operator_number";
-    readonly label_operand1_number: "label_operand1_number";
-    readonly label_operand2_number: "label_operand2_number";
-    readonly label_operator_string: "label_operator_string";
-    readonly label_operand1_string: "label_operand1_string";
-    readonly operator_required: "operator_required";
-    readonly error_invalid_date: "error_invalid_date";
-    readonly error_less_than_start: "error_less_than_start";
-    readonly label_select_operator: "label_select_operator";
-    readonly label_select_operands_array: "label_select_operands_array";
-    readonly error_operand_required: "error_operand_required";
+    readonly input_placeholder: "dynamic_filter.input_placeholder";
+    readonly operand_true: "dynamic_filter.operand_true";
+    readonly operand_false: "dynamic_filter.operand_false";
+    readonly filter_tooltip_refresh: "dynamic_filter.filter_tooltip_refresh";
+    readonly filter_tooltip_dirty: "dynamic_filter.filter_tooltip_dirty";
+    readonly filter_tooltip_invalid: "dynamic_filter.filter_tooltip_invalid";
+    readonly tooltip_clear_filters: "dynamic_filter.tooltip_clear_filters";
+    readonly operator_b: "dynamic_filter.operator_b";
+    readonly operator_e: "dynamic_filter.operator_e";
+    readonly operator_ne: "dynamic_filter.operator_ne";
+    readonly operator_gt: "dynamic_filter.operator_gt";
+    readonly operator_gte: "dynamic_filter.operator_gte";
+    readonly operator_lt: "dynamic_filter.operator_lt";
+    readonly operator_lte: "dynamic_filter.operator_lte";
+    readonly operator_c: "dynamic_filter.operator_c";
+    readonly operator_nc: "dynamic_filter.operator_nc";
+    readonly operator_in: "dynamic_filter.operator_in";
+    readonly operator_nin: "dynamic_filter.operator_nin";
+    readonly label_boolean_operator: "dynamic_filter.label_boolean_operator";
+    readonly label_boolean_operand1: "dynamic_filter.label_boolean_operand1";
+    readonly label_operator_date_time: "dynamic_filter.label_operator_date_time";
+    readonly label_operand1_date_time: "dynamic_filter.label_operand1_date_time";
+    readonly label_operand2_date_time: "dynamic_filter.label_operand2_date_time";
+    readonly label_operator_number: "dynamic_filter.label_operator_number";
+    readonly label_operand1_number: "dynamic_filter.label_operand1_number";
+    readonly label_operand2_number: "dynamic_filter.label_operand2_number";
+    readonly label_operator_string: "dynamic_filter.label_operator_string";
+    readonly label_operand1_string: "dynamic_filter.label_operand1_string";
+    readonly label_select_operator: "dynamic_filter.label_select_operator";
+    readonly label_select_operands_array: "dynamic_filter.label_select_operands_array";
+    readonly label_select_operand1: "dynamic_filter.label_select_operand1";
+    readonly label_select_operand2: "dynamic_filter.label_select_operand2";
+    readonly label_select_async_operand1: "dynamic_filter.label_select_async_operand1";
+    readonly label_select_async_operands_array: "dynamic_filter.label_select_async_operands_array";
+    readonly label_no_fields_available: "dynamic_filter.label_no_fields_available";
+    readonly error_operand_required: "dynamic_filter.error_operand_required";
+    readonly error_operator_required: "dynamic_filter.error_operator_required";
+    readonly error_invalid_date: "dynamic_filter.error_invalid_date";
+    readonly error_less_than_start: "dynamic_filter.error_less_than_start";
+    readonly error_operand_mustbe_number: "dynamic_filter.error_operand_mustbe_number";
 };
 export type TypeDictionary = typeof DICCTIONARY;
-/**
- * getDynamicFilterDictionary: Devuelve el id del diccionario de un componente DynamicFilter.
- * @param key - Clave del diccionario.
- */
-export declare const getDynamicFilterDictionary: (key: keyof TypeDictionary) => string;

package/components/DynamicFilter/dictionary.js

@@ -7,45 +7,39 @@ function getDynamicFilterComponentsDictionary() {
   );
 }
 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 `${DYNAMIC_FILTER_DICTIONARY_ID}.${key}`;
+  input_placeholder: `${DYNAMIC_FILTER_DICTIONARY_ID}.input_placeholder`,
+  operand_true: `${DYNAMIC_FILTER_DICTIONARY_ID}.operand_true`,
+  operand_false: `${DYNAMIC_FILTER_DICTIONARY_ID}.operand_false`,
+  filter_tooltip_refresh: `${DYNAMIC_FILTER_DICTIONARY_ID}.filter_tooltip_refresh`,
+  filter_tooltip_dirty: `${DYNAMIC_FILTER_DICTIONARY_ID}.filter_tooltip_dirty`,
+  filter_tooltip_invalid: `${DYNAMIC_FILTER_DICTIONARY_ID}.filter_tooltip_invalid`,
+  tooltip_clear_filters: `${DYNAMIC_FILTER_DICTIONARY_ID}.tooltip_clear_filters`,
+  //Labels de los formularios de los filtros
+  label_boolean_operator: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_boolean_operator`,
+  label_boolean_operand1: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_boolean_operand1`,
+  label_operator_date_time: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_operator_date_time`,
+  label_operand1_date_time: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_operand1_date_time`,
+  label_operand2_date_time: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_operand2_date_time`,
+  label_operator_number: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_operator_number`,
+  label_operand1_number: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_operand1_number`,
+  label_operand2_number: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_operand2_number`,
+  label_operator_string: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_operator_string`,
+  label_operand1_string: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_operand1_string`,
+  label_select_operator: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_select_operator`,
+  label_select_operands_array: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_select_operands_array`,
+  label_select_operand1: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_select_operand1`,
+  label_select_async_operand1: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_select_async_operand1`,
+  label_select_async_operands_array: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_select_async_operands_array`,
+  label_no_fields_available: `${DYNAMIC_FILTER_DICTIONARY_ID}.label_no_fields_available`,
+  //Validations
+  error_operand_required: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_operand_required`,
+  error_operator_required: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_operator_required`,
+  error_invalid_date: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_invalid_date`,
+  error_less_than_start: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_less_than_start`,
+  error_operand_mustbe_number: `${DYNAMIC_FILTER_DICTIONARY_ID}.error_operand_mustbe_number`
 };
 export {
-  DICCTIONARY as D,
-  getDynamicFilterComponentsDictionary as a,
-  getDynamicFilterDictionary as g
+  DYNAMIC_FILTER_DICTIONARY_ID as D,
+  DICCTIONARY as a,
+  getDynamicFilterComponentsDictionary as g
 };

package/components/DynamicFilter/helpers/formatToInitialFilters.d.ts

@@ -1,6 +1,8 @@
 import { FilterFieldApplied, InitialFilterApplied } from '../types';
 /**
- * Función formateadora filtros como el DynamicFilter los usa a nivel interno a como se guardan en las cookies
+ * Función formateadora filtros como el DynamicFilter los usa a nivel interno diferente como se guardan en las cookies
+ * Por ejemplo: El filtro internamente trabaja con Date, pero se guarda en las cookies como string
+ * Adicionalmente se formatean los filtros para que no se guarden los undefined
  * @param appliedFilters Filtros actualmente aplicados
  * @returns
  */

package/components/DynamicFilter/helpers/formatToInitialFilters.js

@@ -1,29 +1,39 @@
 import { f as filterValidOperandsArraySelectAsync } from "../subcomponents/FieldTypes/SelectAsyncFilter/helpers.js";
+import { f as filterValidOperandsArraySelect } from "../subcomponents/FieldTypes/SelectFilter/helpers.js";
 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 === "selectAsync") {
-      const validOperandsArray = filterValidOperandsArraySelectAsync(
-        appliedFilter.operandsArray,
-        appliedFilter.field
+  return appliedFilters.map((af) => {
+    let operandArray = void 0;
+    let operand1 = af.operand1;
+    let operand2 = af.operand2;
+    if (af.fieldType === "datetime") {
+      operand1 = af.operand1.toISOString();
+      operand2 = af.operator === "b" ? af.operand2.toISOString() : void 0;
+    } else if (af.fieldType === "selectAsync" && af.field.type === "selectAsync") {
+      if (af.field.selectAsyncOptions.multiple) {
+        const validOperandsArray = filterValidOperandsArraySelectAsync(
+          af.operandsArray,
+          af.field
+        );
+        if (validOperandsArray && validOperandsArray?.length > 0) {
+          operandArray = validOperandsArray;
+        }
+      }
+    } else if (af.fieldType === "select") {
+      const validOperandsArray = filterValidOperandsArraySelect(
+        af.operandsArray,
+        af.field
       );
       if (validOperandsArray && validOperandsArray?.length > 0) {
-        ret.operandsArray = validOperandsArray;
+        operandArray = validOperandsArray;
       }
     }
-    if (ret.operand2 === void 0) {
-      delete ret.operand2;
-    }
-    return ret;
+    return {
+      name: af.field.name,
+      operator: af.operator,
+      ...operand1 ? { operand1 } : {},
+      ...operand2 ? { operand2 } : {},
+      ...operandArray ? { operandArray } : {}
+    };
   });
 }
 export {

package/components/DynamicFilter/helpers/formatToRowFilter.js

@@ -1,17 +1,26 @@
 const formatToRawFilter = (appliedFilters) => {
   return appliedFilters.map((af) => {
     let oa = void 0;
-    if (af.fieldType === "selectAsync" && af.field.type === "selectAsync" && af.operandsArray) {
-      oa = Array.isArray(af.operandsArray) ? af.operandsArray.map(af.field.selectAsyncOptions.getOptionId) : [af.field.selectAsyncOptions.getOptionId(af.operandsArray)];
-    }
-    if (af.fieldType === "select" && af.field.type === "select" && af.operandsArray) {
-      oa = Array.isArray(af.operandsArray) ? af.operandsArray : [af.operandsArray];
+    let o1 = void 0;
+    if (af.fieldType === "selectAsync" && af.field.type === "selectAsync") {
+      if (af.field.selectAsyncOptions.multiple) {
+        o1 = void 0;
+        oa = af.operandsArray.map(af.field.selectAsyncOptions.getOptionId);
+      } else {
+        o1 = af.field.selectAsyncOptions.getOptionId(af.operand1);
+      }
+    } else if (af.fieldType === "select" && af.field.type === "select" && af.operandsArray) {
+      if (af.field.selectOptions.multiple) {
+        oa = af.operandsArray;
+      }
+    } else {
+      o1 = af.operand1;
     }
     return {
       n: af.field.name,
       ft: af.field.type,
       o: af.operator,
-      o1: af.operand1,
+      o1,
       o2: af.operator === "b" ? af.operand2 : void 0,
       oa
     };

package/components/DynamicFilter/helpers/getPurgedInitialFiltersApplied.js

@@ -49,7 +49,7 @@ function getPurgedInitialFiltersApplied(fields, initialFilters, getFieldByName)
           field,
           field.presence === "fixed"
         );
-        newFilter.id = newFilters.length + 1;
+        newFilter.id = -(newFilters.length + 1);
         newFilters.push(newFilter);
       }
     }

package/components/DynamicFilter/store/DynamicFilterContext.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useRef, useImperativeHandle, useEffect } from "react";
+import { forwardRef, useRef, useImperativeHandle, useEffect, createContext } from "react";
 import { useStore } from "zustand";
 import { shallow } from "zustand/shallow";
 import { useModuleDictionary, useEnvironment, useModuleSkeleton } from "@m4l/core";

package/components/DynamicFilter/subcomponents/AppliedFilterChip/AppliedFilterChip.d.ts

@@ -2,5 +2,5 @@ import { FilterFieldApplied } from '../../types';
 /**
  * AppliedFilterChip: Componente encargado de mostrar el chip de filtro aplicado
  */
-declare function AppliedFilterChip(props: FilterFieldApplied): import("react/jsx-runtime").JSX.Element;
+declare function AppliedFilterChip(filter: FilterFieldApplied): import("react/jsx-runtime").JSX.Element;
 export default AppliedFilterChip;

package/components/DynamicFilter/subcomponents/AppliedFilterChip/AppliedFilterChip.js

@@ -2,15 +2,16 @@ import { jsx } from "react/jsx-runtime";
 import { C as Chip } from "../../../Chip/Chip.js";
 import { u as useDynamicFilterBase } from "../DynamicFilterBase/useDynamicFilterBase.js";
 import { u as useAppliedFilterChip } from "./useAppliedFilterChip.js";
-function AppliedFilterChip(props) {
-  const { fixed } = props;
+function AppliedFilterChip(filter) {
+  const { fixed, isSet } = filter;
   const { size } = useDynamicFilterBase();
-  const { onEditFilter, onDelete, iconFieldUrl, labels } = useAppliedFilterChip(props);
+  const { onEditFilter, onDelete, iconFieldUrl, labels } = useAppliedFilterChip(filter);
   return /* @__PURE__ */ jsx(
     Chip,
     {
       size,
       opacity: true,
+      color: isSet ? "default" : "error",
       variant: "contained",
       onClick: onEditFilter,
       startIcon: iconFieldUrl,

package/components/DynamicFilter/subcomponents/AppliedFilters/useAppliedFilters.js

@@ -1,10 +1,17 @@
 import { u as useDynamicFilterStore } from "../../store/useDynamicFilterStore.js";
+import { useMemo } from "react";
 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
-  );
+  const appliedFiltersSorted = useMemo(() => {
+    const appliedFiltersFixed = [...appliedFilter.filter((f) => f.fixed)].sort(
+      (filterA, filterB) => filterA.isSet !== filterB.isSet ? Number(filterA.isSet) - Number(filterB.isSet) : filterB.id - filterA.id
+    );
+    const appliedFiltersSortedNoFixed = [...appliedFilter.filter((f) => !f.fixed)].sort(
+      (filterA, filterB) => filterA.isSet !== filterB.isSet ? Number(filterA.isSet) - Number(filterB.isSet) : filterB.id - filterA.id
+    );
+    return [...appliedFiltersFixed, ...appliedFiltersSortedNoFixed];
+  }, [appliedFilter]);
   return {
     appliedFiltersSorted,
     isSkeleton

package/components/DynamicFilter/subcomponents/DynamicFilterBase/DynamicFilterBase.js

@@ -4,11 +4,11 @@ import { a as getComponentSlotRoot } from "../../../../utils/getComponentSlotRoo
 import { D as DYNAMIC_FILTER_KEY_COMPONENT } from "../../constants.js";
 import { u as useDynamicFilterBase } from "./useDynamicFilterBase.js";
 import { R as RootStyled, I as InnerContainerStyled } from "../../slots/dynamicFilterSlots.js";
-import { D as DynamicFilterSlots } from "../../slots/SlotsEnum.js";
 import { I as InputFilter } from "../InputFilter/InputFilter.js";
 import { A as AppliedFilters } from "../AppliedFilters/AppliedFilters.js";
 import { F as FilterActions } from "../FilterActions/FilterActions.js";
 import { P as PopoverFilter } from "../PopoverFilter/PopoverFilter.js";
+import { D as DynamicFilterSlots } from "../../slots/SlotsEnum.js";
 function DynamicFilterBase() {
   const { ownerState, dataTestId } = useDynamicFilterBase();
   const classRoot = getComponentSlotRoot(DYNAMIC_FILTER_KEY_COMPONENT);