@apia/api 4.0.50 → 4.0.60

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.js

@@ -2,7 +2,7 @@ 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, RequiredMark, DateInput, AutocompleteController, Autocomplete, IconButton } from '@apia/components';
@@ -3340,12 +3340,54 @@ const RangeFilterRenderer = observer(({ state }) => {
   );
 });
 
+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,
+    {
+      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(Box, { sx: { position: "relative" }, children: [
-    state.required && /* @__PURE__ */ jsx(RequiredMark, { isRequired: true, sx: { position: "absolute", left: 2 } }),
+  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) => {
@@ -3359,11 +3401,18 @@ const SelectFilterRenderer = observer(({ state }) => {
 
 const InputFilterRenderer = observer(({ state }) => {
   const { onFilterBlur, onFilterPressEnter } = useResponsiveTableContext();
-  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-    state.required && /* @__PURE__ */ jsx(RequiredMark, { isRequired: true, sx: { position: "absolute", left: 2 } }),
+  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) => {
@@ -3393,47 +3442,70 @@ 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__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-      state.required && /* @__PURE__ */ jsx(
-        RequiredMark,
-        {
-          isRequired: true,
-          sx: { position: "absolute", left: 2, top: 6, zIndex: 1 }
-        }
-      ),
-      /* @__PURE__ */ jsx(Box, { as: "span", children: state?.filterToId ? formatMessage(window.LBL_DATE_FILTER_FROM_TXT, {
-        TOK1: state.title ?? ""
-      }) : state.title }),
-      /* @__PURE__ */ jsx(
-        DateInput,
-        {
-          disabled: state.readonly,
-          value: state.value,
-          onChange: (date) => {
-            state.value = date;
+    /* @__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) => {
+          const result = controlDatesOrder(
+            date ?? "",
+            state.filterToValue ?? ""
+          );
+          if (result) {
+            state.value = date ?? "";
             onFilterChange?.(state);
-          },
-          onBlur: () => {
-            onFilterBlur?.(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,
+            currentValue: state.value
+          });
         }
-      )
-    ] }),
-    (state?.isAdditional || state.group) && state?.filterToId && /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-      state.required && /* @__PURE__ */ jsx(
-        RequiredMark,
-        {
-          isRequired: true,
-          sx: { position: "absolute", left: 2, top: 6, zIndex: 1 }
-        }
-      ),
-      /* @__PURE__ */ jsx(Box, { as: "span", children: formatMessage(window.LBL_DATE_FILTER_TO_TXT, {
-        TOK1: state.title ?? ""
-      }) }),
+      }
+    ),
+    (state?.isAdditional || state.group) && state?.filterToId && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__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) => {
@@ -3443,6 +3515,18 @@ const DateFilterRenderer = observer(({ state }) => {
               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"
@@ -3450,7 +3534,10 @@ const DateFilterRenderer = observer(({ state }) => {
             }
           },
           onBlur: () => {
-            onFilterBlur?.(state);
+            onFilterBlur?.({
+              ...state,
+              currentValue: state.filterToValue
+            });
           }
         }
       )
@@ -3694,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,
@@ -4114,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,
@@ -4301,90 +4389,101 @@ const AdditionalFiltersComponent = observer(
       );
       return [...byGroup.values()];
     })();
-    return /* @__PURE__ */ jsx(Box, { sx: { ".requiredMark": { display: "none" } }, children: /* @__PURE__ */ jsx(
-      TableContextReproducer,
+    return /* @__PURE__ */ jsx(
+      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 })
-            }
-          )
-        ] })
+            ] })
+          }
+        )
       }
-    ) });
+    );
   }
 );