@apia/api 4.0.47 → 4.0.58

package/LICENSE.md

@@ -0,0 +1,6 @@
+All Rights Reserved.
+
+Copyright (c) 2026 Statum
+
+This software and associated documentation files are proprietary and confidential.
+Unauthorized copying, distribution, modification, or use is strictly prohibited.

package/dist/index.d.ts

@@ -303,6 +303,21 @@ type TFilter = {
     icon?: string;
 };
 
+declare class Filter {
+    protected tableName?: string;
+    filterState: TFilter;
+    focus(): void;
+    constructor(properties: TFilter);
+    getInputRenderer(): react.JSX.Element;
+    getSelectRenderer(): react.JSX.Element;
+    getRangeRenderer(): react.JSX.Element;
+    getDateRenderer(): react.JSX.Element;
+    getDoubleRenderer(): react.JSX.Element;
+    Component: (() => react.JSX.Element) & {
+        displayName: string;
+    };
+}
+
 type TFilterTypesElementConditions = {
     onChange: string;
     readonly: boolean;
@@ -324,21 +339,6 @@ type TFilterTypesElementConditions = {
     };
 };
 
-declare class Filter {
-    protected tableName?: string;
-    filterState: TFilter;
-    focus(): void;
-    constructor(properties: TFilter);
-    getInputRenderer(): react.JSX.Element;
-    getSelectRenderer(): react.JSX.Element;
-    getRangeRenderer(): react.JSX.Element;
-    getDateRenderer(): react.JSX.Element;
-    getDoubleRenderer(): react.JSX.Element;
-    Component: (() => react.JSX.Element) & {
-        displayName: string;
-    };
-}
-
 type TableControllerState = {
     finishedFirstLoad: boolean;
     columns: Map<string, TResponsiveTableColumn>;
@@ -426,7 +426,7 @@ declare class QueryController {
     conditions: TFilterTypesElementConditions[];
     constructor(ajaxUrl: string);
     protected actualRefreshMethod(serverFirstRefresh?: boolean): Promise<void>;
-    protected areRequiredFilters(): boolean;
+    protected areRequiredFilters(): false | Filter[];
     protected buildTableController(): TableController;
     clearFilters(): Promise<void>;
     private timeout;

package/dist/index.js

@@ -2,10 +2,10 @@ import { jsx, jsxs, Fragment } from '@apia/theme/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useState, useCallback, useEffect, useId, useRef, useMemo } from 'react';
 import { Box, Label, spacing, getVariant, Input as Input$1, Select as Select$1, Spinner } from '@apia/theme';
-import { debugDispatcher, parseXmlAsync, arrayOrArray, EventEmitter, useMount, encrypt, noNaN, getIndex, getLabel, StatefulEmitter, focus, focusSelector, useLatest, useIntermediateValue, formatMessage, getDateFormat, Mutex, uniqueId as uniqueId$1 } from '@apia/util';
+import { debugDispatcher, parseXmlAsync, arrayOrArray, EventEmitter, useMount, encrypt, noNaN, getIndex, getLabel, StatefulEmitter, focus, focusSelector, useLatest, useIntermediateValue, formatMessage, uniqueId as uniqueId$1, getDateFormat, Mutex } from '@apia/util';
 import { notify, getNotificationMessageObj, dispatchNotifications } from '@apia/notifications';
 import { classToValidate, Checkbox, FileInput, classToValidationFunction, Input, Radio, Select, Textarea, useFormContext, validationsStore, hasSucceedFormValidation, Form } from '@apia/validations';
-import { Accordion, AccordionItem, useModal, LabelBox, SimpleButton, ApiaUtil, Modal, ProgressBar, DateInput, AutocompleteController, Autocomplete, IconButton } from '@apia/components';
+import { Accordion, AccordionItem, useModal, LabelBox, SimpleButton, ApiaUtil, Modal, ProgressBar, RequiredMark, DateInput, AutocompleteController, Autocomplete, IconButton } from '@apia/components';
 import axios, { AxiosError } from 'axios';
 import merge from 'lodash-es/merge';
 import QueryString from 'qs';
@@ -3244,7 +3244,7 @@ const RangeFilterRenderer = observer(({ state }) => {
   const lastEmittedMultiplier = useRef(1);
   if (lastEmittedLow.current !== state.value) {
     lastEmittedLow.current = state.value;
-    lastEmittedHigh.current = state.valueTo || "";
+    lastEmittedHigh.current = state.filterToValue || "";
   }
   const emitLow = (currentValue) => {
     const numberValue = currentValue ?? "";
@@ -3265,11 +3265,11 @@ const RangeFilterRenderer = observer(({ state }) => {
     lastEmittedHigh.current = numberValue;
     lastEmittedMultiplier.current = multiplier.current;
     const emitValue = numberValue;
-    state.valueTo = emitValue;
+    state.filterToValue = String(emitValue);
     state.multiplier = multiplier.current;
   };
   const [lowValue, setLowValue] = useIntermediateValue(state.value);
-  const [highValue, setHighValue] = useIntermediateValue(state.valueTo);
+  const [highValue, setHighValue] = useIntermediateValue(state.filterToValue);
   const [unit, setUnit] = useIntermediateValue(state.multiplier);
   return /* @__PURE__ */ jsxs(
     Box,
@@ -3301,6 +3301,7 @@ const RangeFilterRenderer = observer(({ state }) => {
           Input$1,
           {
             disabled: state.readonly,
+            required: state.required,
             onChange: ({ target: { value: currentValue } }) => {
               setHighValue(currentValue);
               emitHigh(currentValue);
@@ -3339,40 +3340,95 @@ const RangeFilterRenderer = observer(({ state }) => {
   );
 });
 
-const SelectFilterRenderer = observer(({ state }) => {
-  return /* @__PURE__ */ jsx(
-    Select$1,
+const FilterLabel = ({
+  state,
+  labelOverride,
+  isDate,
+  className,
+  title
+}) => {
+  const text = React__default.useMemo(() => {
+    const base = labelOverride ?? state?.title ?? "";
+    if (isDate && state?.filterToId && !state.hideToFilter) {
+      try {
+        return formatMessage(window.LBL_DATE_FILTER_FROM_TXT, { TOK1: base });
+      } catch {
+        return base;
+      }
+    }
+    return base;
+  }, [labelOverride, state, isDate]);
+  const showRequiredBefore = !!(state?.required && window.SHOW_REQUIRED_POSITION !== "0");
+  const showRequiredAfter = !!(state?.required && window.SHOW_REQUIRED_POSITION === "0");
+  return /* @__PURE__ */ jsxs(
+    Box,
     {
-      disabled: state.readonly,
-      value: state.value,
-      onChange: (ev) => {
-        state.value = ev.target.value;
-      },
-      children: arrayOrArray(state.options).map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value))
+      className: `filterLabel ${className ?? ""}`,
+      title,
+      sx: { display: "flex", flexDirection: "row" },
+      children: [
+        showRequiredBefore && /* @__PURE__ */ jsx(RequiredMark, { isRequired: true, sx: { zIndex: 1 } }),
+        /* @__PURE__ */ jsx(Box, { as: "span", children: text }),
+        showRequiredAfter && /* @__PURE__ */ jsx(RequiredMark, { isRequired: true, sx: { zIndex: 1 } })
+      ]
     }
   );
+};
+
+const SelectFilterRenderer = observer(({ state }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FilterLabel, { state, isDate: true }),
+    /* @__PURE__ */ jsx(
+      Select$1,
+      {
+        className: "filter__query",
+        sx: {
+          "&.filter__query.filter__query:not([disabled])": {
+            borderLeft: state.required ? "4px solid" : void 0,
+            borderLeftColor: state.required ? "palette.error.main" : void 0
+          }
+        },
+        disabled: state.readonly,
+        value: state.value,
+        onChange: (ev) => {
+          state.value = ev.target.value;
+        },
+        children: arrayOrArray(state.options).map((c) => /* @__PURE__ */ jsx("option", { value: c.value, children: c.label }, c.value))
+      }
+    )
+  ] });
 });
 
 const InputFilterRenderer = observer(({ state }) => {
   const { onFilterBlur, onFilterPressEnter } = useResponsiveTableContext();
-  return /* @__PURE__ */ jsx(
-    Input$1,
-    {
-      disabled: state.readonly,
-      value: state.value,
-      onChange: (ev) => {
-        state.value = ev.target.value;
-      },
-      onKeyDown: (ev) => {
-        if (ev.code === "Enter") {
-          onFilterPressEnter?.(state);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FilterLabel, { state, isDate: true }),
+    /* @__PURE__ */ jsx(
+      Input$1,
+      {
+        className: "filter__query",
+        sx: {
+          "&.filter__query.filter__query:not([disabled])": {
+            borderLeft: state.required ? "4px solid" : void 0,
+            borderLeftColor: state.required ? "palette.error.main" : void 0
+          }
+        },
+        disabled: state.readonly,
+        value: state.value,
+        onChange: (ev) => {
+          state.value = ev.target.value;
+        },
+        onKeyDown: (ev) => {
+          if (ev.code === "Enter") {
+            onFilterPressEnter?.(state);
+          }
+        },
+        onBlur: () => {
+          onFilterBlur?.(state);
         }
-      },
-      onBlur: () => {
-        onFilterBlur?.(state);
       }
-    }
-  );
+    )
+  ] });
 });
 
 const dateFormat = getDateFormat();
@@ -3386,40 +3442,91 @@ function controlDatesOrder(first, last) {
 }
 const DateFilterRenderer = observer(({ state }) => {
   const { onFilterBlur, onFilterChange } = useResponsiveTableContext();
+  const idFrom = uniqueId$1("date_from_");
+  const idTo = uniqueId$1("date_to_");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { as: "span", children: state?.filterToId ? formatMessage(window.LBL_DATE_FILTER_FROM_TXT, {
-      TOK1: state.title ?? ""
-    }) : state.title }),
+    /* @__PURE__ */ jsx(FilterLabel, { state, isDate: true }),
     /* @__PURE__ */ jsx(
       DateInput,
       {
+        id: idFrom,
+        className: "filter__query date_from",
+        sx: {
+          "&.filter__query.filter__query:not([disabled])": {
+            borderLeft: state.required ? "4px solid" : void 0,
+            borderLeftColor: state.required ? "palette.error.main" : void 0
+          }
+        },
         disabled: state.readonly,
         value: state.value,
         onChange: (date) => {
-          state.value = date;
-          onFilterChange?.(state);
+          const result = controlDatesOrder(
+            date ?? "",
+            state.filterToValue ?? ""
+          );
+          if (result) {
+            state.value = date ?? "";
+            onFilterChange?.(state);
+          } else {
+            state.value = void 0;
+            onFilterChange?.({
+              ...state,
+              currentValue: "",
+              deleteFiltersTimestamp: void 0,
+              changeFiltersTimestamp: void 0
+            });
+            const a = document.querySelector(`#${idFrom}`);
+            if (a) {
+              a.click();
+            }
+            ApiaUtil.instance.notifications.notify({
+              message: window.MSG_FEC_FIN_MAY_FEC_INI,
+              type: "warning"
+            });
+          }
         },
         onBlur: () => {
-          onFilterBlur?.(state);
+          onFilterBlur?.({
+            ...state,
+            currentValue: state.value
+          });
         }
       }
     ),
     (state?.isAdditional || state.group) && state?.filterToId && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Box, { as: "span", children: formatMessage(window.LBL_DATE_FILTER_TO_TXT, {
-        TOK1: state.title ?? ""
-      }) }),
+      /* @__PURE__ */ jsx(FilterLabel, { state, isDate: true }),
       /* @__PURE__ */ jsx(
         DateInput,
         {
+          id: idTo,
+          className: "filter__query date_to",
+          sx: {
+            "&.filter__query.filter__query:not([disabled])": {
+              borderLeft: state.required ? "4px solid" : void 0,
+              borderLeftColor: state.required ? "palette.error.main" : void 0
+            }
+          },
           disabled: state.readonly,
           value: state.filterToValue,
           onChange: (date) => {
-            const result = controlDatesOrder(state.value, date);
+            const result = controlDatesOrder(state.value, date ?? "");
             if (result) {
-              state.filterToValue = date;
+              state.filterToValue = date ?? "";
               onFilterChange?.(state);
             } else {
               state.filterToValue = void 0;
+              onFilterChange?.({
+                ...state,
+                currentValue: "",
+                deleteFiltersTimestamp: void 0,
+                changeFiltersTimestamp: void 0
+              });
+              const a = document.querySelector(
+                `#${idTo}`
+              );
+              if (a) {
+                a.click();
+              }
               ApiaUtil.instance.notifications.notify({
                 message: window.MSG_FEC_FIN_MAY_FEC_INI,
                 type: "warning"
@@ -3427,7 +3534,10 @@ const DateFilterRenderer = observer(({ state }) => {
             }
           },
           onBlur: () => {
-            onFilterBlur?.(state);
+            onFilterBlur?.({
+              ...state,
+              currentValue: state.filterToValue
+            });
           }
         }
       )
@@ -3671,6 +3781,7 @@ class TableController {
             ...props,
             columns,
             rows: rows ?? [],
+            sx: { ".filterLabel": { display: "none" } },
             filters: useMemo(() => this.parseFilters(), [this.state.filters]),
             FiltersRenderer: useCallback(
               (filterId) => this.state.filters.get(filterId).Component,
@@ -3854,7 +3965,8 @@ class QueryController {
   }
   async actualRefreshMethod(serverFirstRefresh) {
     const newValues = this.getFiltersValuesMap();
-    if (!this.areRequiredFilters()) {
+    const required = this.areRequiredFilters();
+    if (!required) {
       await this.mutex.acquire();
       try {
         this.tableController.state.finishedFirstLoad = false;
@@ -3876,11 +3988,28 @@ class QueryController {
         this.mutex.release();
       }
     }
+    if (required) {
+      const names = required.map(
+        (f) => f.filterState.title ?? f.filterState.column ?? f.filterState.id ?? ""
+      ).filter(Boolean).join(", ");
+      ApiaUtil.instance.notifications.notify({
+        message: getLabel("msgQryFilterRequiredList", {
+          text: { TOK1: names }
+        }).text,
+        type: "warning"
+      });
+    }
   }
   areRequiredFilters() {
-    return !![...this.tableController.state.filters.values()].find(
+    const requiredFilters = [
+      ...this.tableController.state.filters.values()
+    ].filter(
       (c) => c.filterState.required && !c.filterState.value && !c.filterState.isHidden
     );
+    if (requiredFilters.length > 0) {
+      return requiredFilters;
+    }
+    return false;
   }
   buildTableController() {
     return new TableController();
@@ -4073,7 +4202,7 @@ class QueryController {
           filterToId: f?.filterToId ?? f.type == "D" ? `filter${String(i + 1)}i` : void 0,
           // Id generado en APIA
           value: f.currentValue,
-          avoidLabel: f.type === "D" || f.type === "date" ? true : false,
+          avoidLabel: f.type === "D" || f.type === "date" || f.type === "S" || arrayOrArray(f?.filterOption).length > 0 || f.type === "N" ? true : false,
           filterToValue: f?.filterToValue,
           column: f.column,
           isAdditional: f.asAdditional,
@@ -4093,7 +4222,7 @@ class QueryController {
           ] : void 0,
           placeholder: f.title,
           readonly: f.readonly,
-          required: f.required === "true",
+          required: f.required === "true" || f.required === "1" || f.dateRequired === "1",
           runAutomatically: typedResponse?.filters.runFiltersAutomatically || f.detectOnChange
         };
         return filter;
@@ -4261,87 +4390,98 @@ const AdditionalFiltersComponent = observer(
       return [...byGroup.values()];
     })();
     return /* @__PURE__ */ jsx(
-      TableContextReproducer,
+      Box,
       {
-        tableName: queryController.tableController.getTableName(),
-        children: /* @__PURE__ */ jsxs(Accordion, { className: "additionalFiltersContent", singleExpand: true, children: [
-          hasFilters && /* @__PURE__ */ jsx(
-            AccordionItem,
-            {
-              id: "Responsive",
-              defaultExpanded: true,
-              buttonProps: { ariaLabel: filterTitle, label: filterTitle },
-              children: /* @__PURE__ */ jsx(Responsive, {})
-            }
-          ),
-          hasAdditional && /* @__PURE__ */ jsx(
-            AccordionItem,
-            {
-              id: "Additional",
-              buttonProps: {
-                ariaLabel: window.ADDITIONAL_FILTERS_LABEL,
-                label: window.ADDITIONAL_FILTERS_LABEL
-              },
-              children: /* @__PURE__ */ jsx(Additional, {})
-            }
-          ),
-          groupFilters.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: groupFilters.map((g) => /* @__PURE__ */ jsx(
-            AccordionItem,
-            {
-              id: `Group_${g.filterState.group}`,
-              buttonProps: {
-                ariaLabel: getLabel(`${g.filterState.group}`).text,
-                label: getLabel(`${g.filterState.group}`).text
-              },
-              children: /* @__PURE__ */ jsxs(
-                Box,
+        sx: {
+          ".requiredMark": { display: "none" },
+          ".filter__query": {
+            border: "1px solid #c6c6c6!important"
+          }
+        },
+        children: /* @__PURE__ */ jsx(
+          TableContextReproducer,
+          {
+            tableName: queryController.tableController.getTableName(),
+            children: /* @__PURE__ */ jsxs(Accordion, { className: "additionalFiltersContent", singleExpand: true, children: [
+              hasFilters && /* @__PURE__ */ jsx(
+                AccordionItem,
                 {
-                  sx: {
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "end",
-                    gap: 3,
-                    width: "100%"
+                  id: "Responsive",
+                  defaultExpanded: true,
+                  buttonProps: { ariaLabel: filterTitle, label: filterTitle },
+                  children: /* @__PURE__ */ jsx(Responsive, {})
+                }
+              ),
+              hasAdditional && /* @__PURE__ */ jsx(
+                AccordionItem,
+                {
+                  id: "Additional",
+                  buttonProps: {
+                    ariaLabel: window.ADDITIONAL_FILTERS_LABEL,
+                    label: window.ADDITIONAL_FILTERS_LABEL
                   },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      Grouped,
-                      {
-                        tableName: queryController.tableController.getTableName(),
-                        group: g.filterState?.group ?? ""
+                  children: /* @__PURE__ */ jsx(Additional, {})
+                }
+              ),
+              groupFilters.length > 0 && /* @__PURE__ */ jsx(Fragment, { children: groupFilters.map((g) => /* @__PURE__ */ jsx(
+                AccordionItem,
+                {
+                  id: `Group_${g.filterState.group}`,
+                  buttonProps: {
+                    ariaLabel: getLabel(`${g.filterState.group}`).text,
+                    label: getLabel(`${g.filterState.group}`).text
+                  },
+                  children: /* @__PURE__ */ jsxs(
+                    Box,
+                    {
+                      sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "end",
+                        gap: 3,
+                        width: "100%"
                       },
-                      g.filterState.group
-                    ),
-                    g.filterState.addFilter && /* @__PURE__ */ jsx(
-                      SimpleButton,
-                      {
-                        variant: "outline-sm",
-                        onClick: g.filterState.addFilter,
-                        children: getLabel("lblAddFil").text
-                      }
-                    )
-                  ]
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Grouped,
+                          {
+                            tableName: queryController.tableController.getTableName(),
+                            group: g.filterState?.group ?? ""
+                          },
+                          g.filterState.group
+                        ),
+                        g.filterState.addFilter && /* @__PURE__ */ jsx(
+                          SimpleButton,
+                          {
+                            variant: "outline-sm",
+                            onClick: g.filterState.addFilter,
+                            children: getLabel("lblAddFil").text
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              )) }),
+              hasSortable && /* @__PURE__ */ jsx(
+                AccordionItem,
+                {
+                  id: "Sort",
+                  buttonProps: { ariaLabel: sortTitle, label: sortTitle },
+                  children: /* @__PURE__ */ jsx(Sort, {})
+                }
+              ),
+              hasFilters && !queryController.structure?.hideFilterTypes && /* @__PURE__ */ jsx(
+                AccordionItem,
+                {
+                  id: "FilterTypes",
+                  buttonProps: { ariaLabel: filterTypes, label: filterTypes },
+                  children: /* @__PURE__ */ jsx(FilterTypesComponent, { queryController })
                 }
               )
-            }
-          )) }),
-          hasSortable && /* @__PURE__ */ jsx(
-            AccordionItem,
-            {
-              id: "Sort",
-              buttonProps: { ariaLabel: sortTitle, label: sortTitle },
-              children: /* @__PURE__ */ jsx(Sort, {})
-            }
-          ),
-          hasFilters && !queryController.structure?.hideFilterTypes && /* @__PURE__ */ jsx(
-            AccordionItem,
-            {
-              id: "FilterTypes",
-              buttonProps: { ariaLabel: filterTypes, label: filterTypes },
-              children: /* @__PURE__ */ jsx(FilterTypesComponent, { queryController })
-            }
-          )
-        ] })
+            ] })
+          }
+        )
       }
     );
   }
@@ -4398,7 +4538,7 @@ class AdditionalFiltersModal {
       },
       draggable: true,
       variant: "layout.common.modals.apiaFinder.additionalFiltersModal",
-      size: "xl"
+      size: "lg"
     };
   }
   async openModal(properties) {
@@ -4430,6 +4570,7 @@ const NavBarRenderer = observer(
         onClick: () => {
           queryController.refresh();
         },
+        "data-test-id": "btn_search",
         children: queryController.tableController.state.isLoading ? /* @__PURE__ */ jsx(Spinner, { sx: { color: "white", height: "17px" } }) : getLabel("btnSearch").text
       }
     ),
@@ -4441,6 +4582,7 @@ const NavBarRenderer = observer(
         onClick: async () => {
           additionalFiltersController.openModal();
         },
+        "data-test-id": "btn-additional-filters",
         children: getLabel("titAdmAdtFilter").text
       }
     ),
@@ -4450,6 +4592,7 @@ const NavBarRenderer = observer(
         size: "sm",
         variant: "outline",
         onClick: () => queryController.clearFilters(),
+        "data-test-id": "btn-clear-filters",
         children: getLabel("btnClearFilter").text
       }
     )