@stackcraftmx/calcita 0.32.2 → 0.51.0

package/dist/ui/countdown/Countdown.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import Typography from "@mui/material/Typography";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+import { countdownClockOf } from "./countdownParts.js";
+import { useCountdown } from "./useCountdown.js";
+const THEME_NAME = "CalcitaCountdown";
+const CountdownRoot = piecePart(THEME_NAME, "Root", Typography);
+function CountdownContent(props) {
+  const {
+    until,
+    label,
+    onComplete,
+    completedText,
+    showSeconds = true,
+    children,
+    variant = "body1",
+    sx,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const { parts, isOver } = useCountdown(until, { onComplete });
+  if (typeof children === "function") {
+    return children(parts);
+  }
+  if (isOver) {
+    return /* @__PURE__ */ jsx(CountdownRoot, { variant, role: "status", ownSx: { fontVariantNumeric: "tabular-nums" }, sx, children: completedText ?? t("countdown.done") });
+  }
+  return /* @__PURE__ */ jsx(CountdownRoot, { variant, role: "timer", "aria-label": label, ownSx: { fontVariantNumeric: "tabular-nums" }, sx, children: countdownClockOf(parts, { daysLabel: t("countdown.daysShort"), showSeconds }) });
+}
+const Countdown = withPieceSlots(CountdownContent, THEME_NAME);
+export {
+  Countdown as default
+};
+//# sourceMappingURL=Countdown.js.map

package/dist/ui/countdown/Countdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Countdown.js","sources":["../../../src/ui/countdown/Countdown.jsx"],"sourcesContent":["// La cuenta regresiva ya pintada: «02:14:30» hasta un momento (el cierre de unas inscripciones, el inicio de una cita, el fin de\n// una oferta), con días cuando faltan («3 d 02:14:30»), y lo que dice al llegar a cero («Ya terminó»). Avisa con onComplete\n// una sola vez.\n//\n// Para un lector de pantalla es un temporizador (role=\"timer\"): no anuncia cada segundo, sí el final (role=\"status\").\n// Con children como función se pinta a su manera: children(parts) recibe {days, hours, minutes, seconds, isOver}.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaCountdown con defaultProps y\n// styleOverrides de su parte root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport Typography from '@mui/material/Typography';\n\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {countdownClockOf} from '@/ui/countdown/countdownParts.js';\nimport {useCountdown} from '@/ui/countdown/useCountdown.js';\n\n// el nombre de la pieza en el tema y su parte (theme.components.CalcitaCountdown)\nconst THEME_NAME = 'CalcitaCountdown';\nconst CountdownRoot = piecePart(THEME_NAME, 'Root', Typography);\n\n/**\n * @param {object} props\n * @param {string|number|Date} props.until el momento: un instante en texto, un Date o milisegundos\n * @param {string} [props.label] ya traducido: qué se cuenta («Tiempo para que cierren las inscripciones»), para un lector de pantalla\n * @param {() => void} [props.onComplete] al llegar a cero (una vez)\n * @param {import('react').ReactNode} [props.completedText] lo que dice al terminar; por omisión «Ya terminó»\n * @param {boolean} [props.showSeconds] por omisión, sí\n * @param {(parts: {days: number, hours: number, minutes: number, seconds: number, totalSeconds: number, isOver: boolean}) => import('react').ReactNode} [props.children]\n *     para pintarla a su manera\n * @param {import('@mui/material/Typography').TypographyProps['variant']} [props.variant] por omisión body1\n * @param {object} [props.sx]\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction CountdownContent(props) {\n    const {\n        until, label, onComplete, completedText, showSeconds = true, children, variant = 'body1', sx, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const {parts, isOver} = useCountdown(until, {onComplete});\n\n    if (typeof children === 'function') {\n        return children(parts);\n    }\n    if (isOver) {\n        return (\n            <CountdownRoot variant={variant} role=\"status\" ownSx={{fontVariantNumeric: 'tabular-nums'}} sx={sx}>\n                {completedText ?? t('countdown.done')}\n            </CountdownRoot>\n        );\n    }\n    return (\n        <CountdownRoot variant={variant} role=\"timer\" aria-label={label} ownSx={{fontVariantNumeric: 'tabular-nums'}} sx={sx}>\n            {countdownClockOf(parts, {daysLabel: t('countdown.daysShort'), showSeconds})}\n        </CountdownRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst Countdown = withPieceSlots(CountdownContent, THEME_NAME);\nexport default Countdown;\n"],"names":[],"mappings":";;;;;;;;AAoBA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,QAAQ,UAAU;AAe9D,SAAS,iBAAiB,OAAO;AAC7B,QAAM;AAAA,IACF;AAAA,IAAO;AAAA,IAAO;AAAA,IAAY;AAAA,IAAe,cAAc;AAAA,IAAM;AAAA,IAAU,UAAU;AAAA,IAAS;AAAA,IAAI;AAAA,IAC9F,GAAG;AAAA,EAAA,IACH,cAAc,OAAO,UAAU;AACnC,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,EAAC,OAAO,OAAA,IAAU,aAAa,OAAO,EAAC,YAAW;AAExD,MAAI,OAAO,aAAa,YAAY;AAChC,WAAO,SAAS,KAAK;AAAA,EACzB;AACA,MAAI,QAAQ;AACR,WACI,oBAAC,eAAA,EAAc,SAAkB,MAAK,UAAS,OAAO,EAAC,oBAAoB,eAAA,GAAiB,IACvF,UAAA,iBAAiB,EAAE,gBAAgB,GACxC;AAAA,EAER;AACA,SACI,oBAAC,iBAAc,SAAkB,MAAK,SAAQ,cAAY,OAAO,OAAO,EAAC,oBAAoB,kBAAiB,IACzG,UAAA,iBAAiB,OAAO,EAAC,WAAW,EAAE,qBAAqB,GAAG,YAAA,CAAY,GAC/E;AAER;AAGA,MAAM,YAAY,eAAe,kBAAkB,UAAU;"}

package/dist/ui/countdown/countdownParts.js

@@ -0,0 +1,34 @@
+const MILLISECONDS_PER_SECOND = 1e3;
+const SECONDS_PER_MINUTE = 60;
+const SECONDS_PER_HOUR = 3600;
+const SECONDS_PER_DAY = 86400;
+const TWO_DIGITS = 2;
+function instantMillisecondsOf(until) {
+  if (until instanceof Date) {
+    return until.getTime();
+  }
+  return typeof until === "number" ? until : Date.parse(until);
+}
+function countdownPartsOf(until, now) {
+  const remainingMilliseconds = instantMillisecondsOf(until) - now;
+  const totalSeconds = Number.isFinite(remainingMilliseconds) && remainingMilliseconds > 0 ? Math.ceil(remainingMilliseconds / MILLISECONDS_PER_SECOND) : 0;
+  return {
+    days: Math.floor(totalSeconds / SECONDS_PER_DAY),
+    hours: Math.floor(totalSeconds % SECONDS_PER_DAY / SECONDS_PER_HOUR),
+    minutes: Math.floor(totalSeconds % SECONDS_PER_HOUR / SECONDS_PER_MINUTE),
+    seconds: totalSeconds % SECONDS_PER_MINUTE,
+    totalSeconds,
+    isOver: totalSeconds === 0
+  };
+}
+function countdownClockOf({ days, hours, minutes, seconds }, { daysLabel = "d", showSeconds = true } = {}) {
+  const twoDigits = (value) => String(value).padStart(TWO_DIGITS, "0");
+  const clock = [hours, minutes, ...showSeconds ? [seconds] : []].map(twoDigits).join(":");
+  return days > 0 ? `${days} ${daysLabel} ${clock}` : clock;
+}
+export {
+  countdownClockOf,
+  countdownPartsOf,
+  instantMillisecondsOf
+};
+//# sourceMappingURL=countdownParts.js.map

package/dist/ui/countdown/countdownParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdownParts.js","sources":["../../../src/ui/countdown/countdownParts.js"],"sourcesContent":["// Cuánto falta para un momento (el cierre de unas inscripciones, el inicio de una cita, el fin de una oferta), en días, horas,\n// minutos y segundos, y cómo se escribe como reloj. Lo usan useCountdown y Countdown.\n//\n// Puro (sin React): se prueba con node (countdownParts.test.js).\n//\n// Genérico del paquete: function (regla de la casa).\n\nconst MILLISECONDS_PER_SECOND = 1000;\nconst SECONDS_PER_MINUTE = 60;\nconst SECONDS_PER_HOUR = 3600;\nconst SECONDS_PER_DAY = 86_400;\nconst TWO_DIGITS = 2;\n\n/**\n * El momento en milisegundos: un instante en texto ('2026-11-01T18:30:00Z'), un Date o milisegundos.\n *\n * @param {string|number|Date} until\n * @returns {number} NaN si no se entiende\n */\nexport function instantMillisecondsOf(until) {\n    if (until instanceof Date) {\n        return until.getTime();\n    }\n    return typeof until === 'number' ? until : Date.parse(until);\n}\n\n/**\n * Lo que falta, partido. Ya pasado (o un momento que no se entiende) es todo en cero con isOver.\n *\n * @param {string|number|Date} until\n * @param {number} now milisegundos de ahora (Date.now())\n * @returns {{days: number, hours: number, minutes: number, seconds: number, totalSeconds: number, isOver: boolean}}\n */\nexport function countdownPartsOf(until, now) {\n    const remainingMilliseconds = instantMillisecondsOf(until) - now;\n    // se redondea hacia arriba: con 0.4 s por delante todavía dice 00:00:01 y no «ya terminó» antes de tiempo\n    const totalSeconds = Number.isFinite(remainingMilliseconds) && remainingMilliseconds > 0\n        ? Math.ceil(remainingMilliseconds / MILLISECONDS_PER_SECOND)\n        : 0;\n    return {\n        days: Math.floor(totalSeconds / SECONDS_PER_DAY),\n        hours: Math.floor((totalSeconds % SECONDS_PER_DAY) / SECONDS_PER_HOUR),\n        minutes: Math.floor((totalSeconds % SECONDS_PER_HOUR) / SECONDS_PER_MINUTE),\n        seconds: totalSeconds % SECONDS_PER_MINUTE,\n        totalSeconds,\n        isOver: totalSeconds === 0,\n    };\n}\n\n/**\n * Lo que falta como reloj: «02:14:30»; con días, «3 d 02:14:30» (la letra del día la da el idioma); sin segundos,\n * «02:14».\n *\n * @param {{days: number, hours: number, minutes: number, seconds: number}} parts\n * @param {{daysLabel?: string, showSeconds?: boolean}} [options] daysLabel: la abreviatura de días ya traducida ('d')\n * @returns {string}\n */\nexport function countdownClockOf({days, hours, minutes, seconds}, {daysLabel = 'd', showSeconds = true} = {}) {\n    const twoDigits = (value) => String(value).padStart(TWO_DIGITS, '0');\n    const clock = [hours, minutes, ...(showSeconds ? [seconds] : [])].map(twoDigits).join(':');\n    return days > 0 ? `${days} ${daysLabel} ${clock}` : clock;\n}\n"],"names":[],"mappings":"AAOA,MAAM,0BAA0B;AAChC,MAAM,qBAAqB;AAC3B,MAAM,mBAAmB;AACzB,MAAM,kBAAkB;AACxB,MAAM,aAAa;AAQZ,SAAS,sBAAsB,OAAO;AACzC,MAAI,iBAAiB,MAAM;AACvB,WAAO,MAAM,QAAO;AAAA,EACxB;AACA,SAAO,OAAO,UAAU,WAAW,QAAQ,KAAK,MAAM,KAAK;AAC/D;AASO,SAAS,iBAAiB,OAAO,KAAK;AACzC,QAAM,wBAAwB,sBAAsB,KAAK,IAAI;AAE7D,QAAM,eAAe,OAAO,SAAS,qBAAqB,KAAK,wBAAwB,IACjF,KAAK,KAAK,wBAAwB,uBAAuB,IACzD;AACN,SAAO;AAAA,IACH,MAAM,KAAK,MAAM,eAAe,eAAe;AAAA,IAC/C,OAAO,KAAK,MAAO,eAAe,kBAAmB,gBAAgB;AAAA,IACrE,SAAS,KAAK,MAAO,eAAe,mBAAoB,kBAAkB;AAAA,IAC1E,SAAS,eAAe;AAAA,IACxB;AAAA,IACA,QAAQ,iBAAiB;AAAA,EACjC;AACA;AAUO,SAAS,iBAAiB,EAAC,MAAM,OAAO,SAAS,QAAO,GAAG,EAAC,YAAY,KAAK,cAAc,KAAI,IAAI,CAAA,GAAI;AAC1G,QAAM,YAAY,CAAC,UAAU,OAAO,KAAK,EAAE,SAAS,YAAY,GAAG;AACnE,QAAM,QAAQ,CAAC,OAAO,SAAS,GAAI,cAAc,CAAC,OAAO,IAAI,CAAA,CAAG,EAAE,IAAI,SAAS,EAAE,KAAK,GAAG;AACzF,SAAO,OAAO,IAAI,GAAG,IAAI,IAAI,SAAS,IAAI,KAAK,KAAK;AACxD;"}

package/dist/ui/countdown/useCountdown.js

@@ -0,0 +1,35 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { countdownPartsOf } from "./countdownParts.js";
+const TICK_MILLISECONDS = 1e3;
+function useCountdown(until, { onComplete, now = Date.now } = {}) {
+  const [parts, setParts] = useState(() => countdownPartsOf(until, now()));
+  const latest = useRef({ onComplete, now });
+  latest.current = { onComplete, now };
+  useEffect(() => {
+    let hasCompleted = false;
+    const tick = () => {
+      const current = countdownPartsOf(until, latest.current.now());
+      setParts(current);
+      if (current.isOver && !hasCompleted) {
+        hasCompleted = true;
+        latest.current.onComplete?.();
+      }
+      return current.isOver;
+    };
+    if (tick()) {
+      return void 0;
+    }
+    const timer = setInterval(() => {
+      if (tick()) {
+        clearInterval(timer);
+      }
+    }, TICK_MILLISECONDS);
+    return () => clearInterval(timer);
+  }, [until]);
+  return { parts, isOver: parts.isOver };
+}
+export {
+  useCountdown
+};
+//# sourceMappingURL=useCountdown.js.map

package/dist/ui/countdown/useCountdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCountdown.js","sources":["../../../src/ui/countdown/useCountdown.js"],"sourcesContent":["// Cuánto falta para un momento, al día cada segundo, y avisar una sola vez al llegar a cero (onComplete). Para pintar la\n// cuenta a su manera; Countdown es la que ya viene pintada.\n//\n//   const {parts, isOver} = useCountdown(registration.closes_at, {onComplete: reloadRegistration});\n//\n// Mientras ya terminó no corre ningún reloj de fondo, y al desmontar se apaga.\n//\n// Hook genérico: function (regla de la casa).\nimport {useEffect, useRef, useState} from 'react';\n\nimport {countdownPartsOf} from '@/ui/countdown/countdownParts.js';\n\nconst TICK_MILLISECONDS = 1000;\n\n/**\n * @param {string|number|Date} until el momento: un instante en texto, un Date o milisegundos\n * @param {{onComplete?: () => void, now?: () => number}} [options] onComplete: al llegar a cero (una vez); now: el reloj\n *     (para probar con una hora fija)\n * @returns {{parts: ReturnType<typeof countdownPartsOf>, isOver: boolean}}\n */\nexport function useCountdown(until, {onComplete, now = Date.now} = {}) {\n    const [parts, setParts] = useState(() => countdownPartsOf(until, now()));\n    // lo último de afuera, sin rearmar el reloj cada vez que la pantalla pinta otra función\n    const latest = useRef({onComplete, now});\n    latest.current = {onComplete, now};\n\n    useEffect(() => {\n        let hasCompleted = false;\n        const tick = () => {\n            const current = countdownPartsOf(until, latest.current.now());\n            setParts(current);\n            if (current.isOver && !hasCompleted) {\n                hasCompleted = true;\n                latest.current.onComplete?.();\n            }\n            return current.isOver;\n        };\n        // ya terminó al llegar: se avisa y no se arma el reloj\n        if (tick()) {\n            return undefined;\n        }\n        const timer = setInterval(() => {\n            if (tick()) {\n                clearInterval(timer);\n            }\n        }, TICK_MILLISECONDS);\n        return () => clearInterval(timer);\n    }, [until]);\n\n    return {parts, isOver: parts.isOver};\n}\n"],"names":[],"mappings":";;;AAYA,MAAM,oBAAoB;AAQnB,SAAS,aAAa,OAAO,EAAC,YAAY,MAAM,KAAK,IAAG,IAAI,IAAI;AACnE,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,MAAM,iBAAiB,OAAO,IAAG,CAAE,CAAC;AAEvE,QAAM,SAAS,OAAO,EAAC,YAAY,IAAG,CAAC;AACvC,SAAO,UAAU,EAAC,YAAY,IAAG;AAEjC,YAAU,MAAM;AACZ,QAAI,eAAe;AACnB,UAAM,OAAO,MAAM;AACf,YAAM,UAAU,iBAAiB,OAAO,OAAO,QAAQ,KAAK;AAC5D,eAAS,OAAO;AAChB,UAAI,QAAQ,UAAU,CAAC,cAAc;AACjC,uBAAe;AACf,eAAO,QAAQ,aAAU;AAAA,MAC7B;AACA,aAAO,QAAQ;AAAA,IACnB;AAEA,QAAI,KAAI,GAAI;AACR,aAAO;AAAA,IACX;AACA,UAAM,QAAQ,YAAY,MAAM;AAC5B,UAAI,KAAI,GAAI;AACR,sBAAc,KAAK;AAAA,MACvB;AAAA,IACJ,GAAG,iBAAiB;AACpB,WAAO,MAAM,cAAc,KAAK;AAAA,EACpC,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO,EAAC,OAAO,QAAQ,MAAM,OAAM;AACvC;"}

package/dist/ui/documents/PdfViewerDialog.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
+import OpenInNewRoundedIcon from "@mui/icons-material/OpenInNewRounded";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+import ContentDialog from "../layout/ContentDialog.js";
+const THEME_NAME = "CalcitaPdfViewerDialog";
+const ViewerActions = piecePart(THEME_NAME, "Actions", Stack);
+const ViewerFrame = piecePart(THEME_NAME, "Frame", "iframe");
+function usePdfUrl(src) {
+  const [blobUrl, setBlobUrl] = useState(null);
+  const isBlob = typeof Blob !== "undefined" && src instanceof Blob;
+  useEffect(() => {
+    if (!isBlob) {
+      setBlobUrl(null);
+      return void 0;
+    }
+    const url = URL.createObjectURL(src);
+    setBlobUrl(url);
+    return () => URL.revokeObjectURL(url);
+  }, [isBlob, src]);
+  if (isBlob) {
+    return blobUrl;
+  }
+  return typeof src === "string" && src ? src : null;
+}
+function PdfViewerDialogContent(props) {
+  const { open, onClose, title, src, fileName, actions, onDownload, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const pdfUrl = usePdfUrl(open ? src : null);
+  return /* @__PURE__ */ jsxs(ContentDialog, { open, onClose, title, texts, children: [
+    /* @__PURE__ */ jsxs(ViewerActions, { direction: "row", ownSx: { gap: 1, flexWrap: "wrap", mb: 2 }, children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "outlined",
+          startIcon: /* @__PURE__ */ jsx(OpenInNewRoundedIcon, {}),
+          href: pdfUrl ?? void 0,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          disabled: !pdfUrl,
+          children: t("pdfViewer.openInTab")
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "small",
+          variant: "outlined",
+          startIcon: /* @__PURE__ */ jsx(FileDownloadOutlinedIcon, {}),
+          href: pdfUrl ?? void 0,
+          download: fileName ?? `${title}.pdf`,
+          disabled: !pdfUrl,
+          onClick: onDownload,
+          children: t("pdfViewer.download")
+        }
+      ),
+      actions
+    ] }),
+    pdfUrl ? /* @__PURE__ */ jsx(
+      ViewerFrame,
+      {
+        src: pdfUrl,
+        title,
+        ownSx: { display: "block", width: "100%", height: { xs: "62vh", md: "72vh" }, border: 0, borderRadius: 1, bgcolor: "action.hover" }
+      }
+    ) : /* @__PURE__ */ jsx(Box, { sx: { height: { xs: "62vh", md: "72vh" }, borderRadius: 1, bgcolor: "action.hover" } })
+  ] });
+}
+const PdfViewerDialog = withPieceSlots(PdfViewerDialogContent, THEME_NAME);
+export {
+  PdfViewerDialog as default
+};
+//# sourceMappingURL=PdfViewerDialog.js.map

package/dist/ui/documents/PdfViewerDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PdfViewerDialog.js","sources":["../../../src/ui/documents/PdfViewerDialog.jsx"],"sourcesContent":["// Un PDF en una ventana: el aviso de privacidad, un contrato, un estado de cuenta. Lo pinta el visor del navegador (sin\n// librerías: nada que descargar ni que actualizar) en la hoja de lectura de la casa (ContentDialog), con «Abrir en otra\n// pestaña» y «Descargar» arriba.\n//\n// OJO: en el iPhone el visor dentro de la página enseña solo la primera hoja y en algunos navegadores no se pinta; por eso\n// los dos botones siempre están a la vista: abrirlo aparte o bajarlo funciona en todos.\n//\n// src es la dirección del PDF o el archivo mismo (un Blob que mandó el API, un File elegido): del archivo se arma una\n// dirección en el navegador, sin subirlo, y se libera al cerrar.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPdfViewerDialog con defaultProps y\n// styleOverrides de sus partes: actions, frame.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useState} from 'react';\nimport Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport Box from '@mui/material/Box';\nimport FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined';\nimport OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';\n\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport ContentDialog from '@/ui/layout/ContentDialog.jsx';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPdfViewerDialog)\nconst THEME_NAME = 'CalcitaPdfViewerDialog';\nconst ViewerActions = piecePart(THEME_NAME, 'Actions', Stack);\nconst ViewerFrame = piecePart(THEME_NAME, 'Frame', 'iframe');\n\n/**\n * La dirección del PDF: la que llega tal cual, o una del navegador para un archivo (se libera al cambiarlo o al cerrar).\n *\n * @param {string|Blob|null|undefined} src\n * @returns {string|null}\n */\nfunction usePdfUrl(src) {\n    const [blobUrl, setBlobUrl] = useState(null);\n    const isBlob = typeof Blob !== 'undefined' && src instanceof Blob;\n\n    useEffect(() => {\n        if (!isBlob) {\n            setBlobUrl(null);\n            return undefined;\n        }\n        const url = URL.createObjectURL(src);\n        setBlobUrl(url);\n        return () => URL.revokeObjectURL(url);\n    }, [isBlob, src]);\n\n    if (isBlob) {\n        return blobUrl;\n    }\n    return typeof src === 'string' && src ? src : null;\n}\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {string} props.title ya traducido: qué documento es\n * @param {string|Blob|null} props.src la dirección del PDF o el archivo (Blob o File)\n * @param {string} [props.fileName] con qué nombre se descarga (por omisión, el título con .pdf)\n * @param {import('react').ReactNode} [props.actions] botones suyos junto a «Abrir en otra pestaña» y «Descargar»\n * @param {() => void} [props.onDownload] al descargar (para registrarlo, por ejemplo)\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction PdfViewerDialogContent(props) {\n    const {open, onClose, title, src, fileName, actions, onDownload, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const pdfUrl = usePdfUrl(open ? src : null);\n\n    return (\n        <ContentDialog open={open} onClose={onClose} title={title} texts={texts}>\n            <ViewerActions direction=\"row\" ownSx={{gap: 1, flexWrap: 'wrap', mb: 2}}>\n                <Button size=\"small\" variant=\"outlined\" startIcon={<OpenInNewRoundedIcon />} href={pdfUrl ?? undefined} target=\"_blank\"\n                        rel=\"noopener noreferrer\" disabled={!pdfUrl}>\n                    {t('pdfViewer.openInTab')}\n                </Button>\n                <Button size=\"small\" variant=\"outlined\" startIcon={<FileDownloadOutlinedIcon />} href={pdfUrl ?? undefined}\n                        download={fileName ?? `${title}.pdf`} disabled={!pdfUrl} onClick={onDownload}>\n                    {t('pdfViewer.download')}\n                </Button>\n                {actions}\n            </ViewerActions>\n            {pdfUrl ? (\n                <ViewerFrame src={pdfUrl} title={title}\n                             ownSx={{display: 'block', width: '100%', height: {xs: '62vh', md: '72vh'}, border: 0, borderRadius: 1, bgcolor: 'action.hover'}} />\n            ) : (\n                <Box sx={{height: {xs: '62vh', md: '72vh'}, borderRadius: 1, bgcolor: 'action.hover'}} />\n            )}\n        </ContentDialog>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst PdfViewerDialog = withPieceSlots(PdfViewerDialogContent, THEME_NAME);\nexport default PdfViewerDialog;\n"],"names":[],"mappings":";;;;;;;;;;;;AA2BA,MAAM,aAAa;AACnB,MAAM,gBAAgB,UAAU,YAAY,WAAW,KAAK;AAC5D,MAAM,cAAc,UAAU,YAAY,SAAS,QAAQ;AAQ3D,SAAS,UAAU,KAAK;AACpB,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,SAAS,OAAO,SAAS,eAAe,eAAe;AAE7D,YAAU,MAAM;AACZ,QAAI,CAAC,QAAQ;AACT,iBAAW,IAAI;AACf,aAAO;AAAA,IACX;AACA,UAAM,MAAM,IAAI,gBAAgB,GAAG;AACnC,eAAW,GAAG;AACd,WAAO,MAAM,IAAI,gBAAgB,GAAG;AAAA,EACxC,GAAG,CAAC,QAAQ,GAAG,CAAC;AAEhB,MAAI,QAAQ;AACR,WAAO;AAAA,EACX;AACA,SAAO,OAAO,QAAQ,YAAY,MAAM,MAAM;AAClD;AAaA,SAAS,uBAAuB,OAAO;AACnC,QAAM,EAAC,MAAM,SAAS,OAAO,KAAK,UAAU,SAAS,YAAY,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC1H,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,UAAU,KAAK;AACjD,QAAM,SAAS,UAAU,OAAO,MAAM,IAAI;AAE1C,SACI,qBAAC,eAAA,EAAc,MAAY,SAAkB,OAAc,OACvD,UAAA;AAAA,IAAA,qBAAC,eAAA,EAAc,WAAU,OAAM,OAAO,EAAC,KAAK,GAAG,UAAU,QAAQ,IAAI,EAAA,GACjE,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAAO,MAAK;AAAA,UAAQ,SAAQ;AAAA,UAAW,+BAAY,sBAAA,EAAqB;AAAA,UAAI,MAAM,UAAU;AAAA,UAAW,QAAO;AAAA,UACvG,KAAI;AAAA,UAAsB,UAAU,CAAC;AAAA,UACxC,YAAE,qBAAqB;AAAA,QAAA;AAAA,MAAA;AAAA,MAE5B;AAAA,QAAC;AAAA,QAAA;AAAA,UAAO,MAAK;AAAA,UAAQ,SAAQ;AAAA,UAAW,+BAAY,0BAAA,EAAyB;AAAA,UAAI,MAAM,UAAU;AAAA,UACzF,UAAU,YAAY,GAAG,KAAK;AAAA,UAAQ,UAAU,CAAC;AAAA,UAAQ,SAAS;AAAA,UACrE,YAAE,oBAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,MAE1B;AAAA,IAAA,GACL;AAAA,IACC,SACG;AAAA,MAAC;AAAA,MAAA;AAAA,QAAY,KAAK;AAAA,QAAQ;AAAA,QACb,OAAO,EAAC,SAAS,SAAS,OAAO,QAAQ,QAAQ,EAAC,IAAI,QAAQ,IAAI,UAAS,QAAQ,GAAG,cAAc,GAAG,SAAS,eAAA;AAAA,MAAc;AAAA,IAAA,IAE3I,oBAAC,KAAA,EAAI,IAAI,EAAC,QAAQ,EAAC,IAAI,QAAQ,IAAI,UAAS,cAAc,GAAG,SAAS,iBAAc,CAAG;AAAA,EAAA,GAE/F;AAER;AAGA,MAAM,kBAAkB,eAAe,wBAAwB,UAAU;"}

package/dist/ui/filters/DateRangeFilter.js

@@ -10,13 +10,13 @@ import TextField from "@mui/material/TextField";
 import Typography from "@mui/material/Typography";
 import DateRangeOutlinedIcon from "@mui/icons-material/DateRangeOutlined";
 import { useFormatters } from "../../toolkit/useFormatters.js";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaDateRangeFilter";
 const RangeChip = piecePart(THEME_NAME, "Chip", Chip);
 const RangePanel = piecePart(THEME_NAME, "Panel", Stack);
 const RangeActions = piecePart(THEME_NAME, "Actions", Stack);
-function DateRangeFilter(props) {
+function DateRangeFilterContent(props) {
   const { from = "", to = "", onChange, label, texts, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const { t } = useToolkitTranslation("table", texts);
@@ -89,6 +89,7 @@ function DateRangeFilter(props) {
     ] }) })
   ] });
 }
+const DateRangeFilter = withPieceSlots(DateRangeFilterContent, THEME_NAME);
 export {
   DateRangeFilter as default
 };

package/dist/ui/filters/DateRangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/ui/filters/DateRangeFilter.jsx"],"sourcesContent":["// Un rango de fechas personalizado, como chip al lado de los accesos rápidos.\n//\n// Viaja como AAAA-MM-DD (día, no instante). Convertirlo a \"inicio del día\" y \"fin del día\" lo hace el SERVIDOR con la\n// zona del negocio: si lo hiciera el navegador con la suya, alguien en otra zona pediría otro rango sin saberlo.\n//\n// El calendario es el <input type=\"date\"> del TextField de MUI y no el DatePicker de @mui/x-date-pickers con moment,\n// para no sumar dos dependencias (x-date-pickers y moment) que ninguna\n// pantalla del 22-sep necesita. Si el calendario nativo estorba (Safari de escritorio), se cambia SOLO este archivo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateRangeFilter con defaultProps y\n// styleOverrides de sus partes: chip, panel, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport DateRangeOutlinedIcon from '@mui/icons-material/DateRangeOutlined';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateRangeFilter)\nconst THEME_NAME = 'CalcitaDateRangeFilter';\nconst RangeChip = piecePart(THEME_NAME, 'Chip', Chip);\nconst RangePanel = piecePart(THEME_NAME, 'Panel', Stack);\nconst RangeActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * @param {object} props\n * @param {string} [props.from] AAAA-MM-DD o '' si no hay\n * @param {string} [props.to] AAAA-MM-DD o '' si no hay\n * @param {(range: {from: string, to: string}) => void} props.onChange '' para quitar\n * @param {string} [props.label] ya traducido; por defecto \"Personalizado\"\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nexport default function DateRangeFilter(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDateRangeFilter.defaultProps) y encima lo que llega aquí\n    const {from = '', to = '', onChange, label, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table', texts);\n    const {formatDate} = useFormatters();\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [draft, setDraft] = useState({from, to});\n    const isActive = Boolean(from || to);\n    // AAAA-MM-DD se compara bien como texto\n    const isInvalid = Boolean(draft.from && draft.to && draft.from > draft.to);\n\n    const open = (event) => {\n        setDraft({from, to});\n        setAnchorElement(event.currentTarget);\n    };\n    const close = () => setAnchorElement(null);\n    const apply = () => {\n        onChange(draft);\n        close();\n    };\n    const clear = () => {\n        onChange({from: '', to: ''});\n        close();\n    };\n\n    const summary = isActive\n        ? t('dateRange.summary', {from: from ? formatDate(from) : '…', to: to ? formatDate(to) : t('dateRange.today')})\n        : (label ?? t('dateRange.label'));\n\n    return (\n        <>\n            <RangeChip icon={<DateRangeOutlinedIcon />} label={summary} clickable onClick={open}\n                  variant={isActive ? 'filled' : 'outlined'} color={isActive ? 'primary' : 'default'}\n                  onDelete={isActive ? clear : undefined} ownSx={{flex: '0 0 auto', height: 32}} />\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={close} anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <RangePanel spacing={2} ownSx={{p: 2, width: 280}}>\n                    <Typography variant=\"subtitle2\">{t('dateRange.title')}</Typography>\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.from')} value={draft.from}\n                               helperText={t('dateRange.fromHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, from: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {max: draft.to || undefined}}} />\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.to')} value={draft.to} error={isInvalid}\n                               helperText={isInvalid ? t('dateRange.invalid') : t('dateRange.toHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, to: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {min: draft.from || undefined}}} />\n                    <RangeActions direction=\"row\" spacing={1} ownSx={{justifyContent: 'flex-end'}}>\n                        {isActive && <Button onClick={clear}>{t('dateRange.clear')}</Button>}\n                        <Button variant=\"contained\" onClick={apply} disabled={isInvalid || !(draft.from || draft.to)}>\n                            {t('dateRange.apply')}\n                        </Button>\n                    </RangeActions>\n                </RangePanel>\n            </Popover>\n        </>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,IAAI;AACpD,MAAM,aAAa,UAAU,YAAY,SAAS,KAAK;AACvD,MAAM,eAAe,UAAU,YAAY,WAAW,KAAK;AAU3D,SAAwB,gBAAgB,OAAO;AAE3C,QAAM,EAAC,OAAO,IAAI,KAAK,IAAI,UAAU,OAAO,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACrG,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,EAAC,WAAA,IAAc,cAAA;AACrB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAC,MAAM,IAAG;AAC7C,QAAM,WAAW,QAAQ,QAAQ,EAAE;AAEnC,QAAM,YAAY,QAAQ,MAAM,QAAQ,MAAM,MAAM,MAAM,OAAO,MAAM,EAAE;AAEzE,QAAM,OAAO,CAAC,UAAU;AACpB,aAAS,EAAC,MAAM,IAAG;AACnB,qBAAiB,MAAM,aAAa;AAAA,EACxC;AACA,QAAM,QAAQ,MAAM,iBAAiB,IAAI;AACzC,QAAM,QAAQ,MAAM;AAChB,aAAS,KAAK;AACd,UAAA;AAAA,EACJ;AACA,QAAM,QAAQ,MAAM;AAChB,aAAS,EAAC,MAAM,IAAI,IAAI,IAAG;AAC3B,UAAA;AAAA,EACJ;AAEA,QAAM,UAAU,WACV,EAAE,qBAAqB,EAAC,MAAM,OAAO,WAAW,IAAI,IAAI,KAAK,IAAI,KAAK,WAAW,EAAE,IAAI,EAAE,iBAAiB,GAAE,IAC3G,SAAS,EAAE,iBAAiB;AAEnC,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAU,0BAAO,uBAAA,EAAsB;AAAA,QAAI,OAAO;AAAA,QAAS,WAAS;AAAA,QAAC,SAAS;AAAA,QACzE,SAAS,WAAW,WAAW;AAAA,QAAY,OAAO,WAAW,YAAY;AAAA,QACzE,UAAU,WAAW,QAAQ;AAAA,QAAW,OAAO,EAAC,MAAM,YAAY,QAAQ,GAAA;AAAA,MAAE;AAAA,IAAA;AAAA,IAClF,oBAAC,SAAA,EAAQ,MAAM,QAAQ,aAAa,GAAG,UAAU,eAAe,SAAS,OAAO,cAAc,EAAC,UAAU,UAAU,YAAY,OAAA,GAC3H,UAAA,qBAAC,YAAA,EAAW,SAAS,GAAG,OAAO,EAAC,GAAG,GAAG,OAAO,IAAA,GACzC,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,aAAa,UAAA,EAAE,iBAAiB,GAAE;AAAA,MACtD;AAAA,QAAC;AAAA,QAAA;AAAA,UAAU,MAAK;AAAA,UAAO,MAAK;AAAA,UAAQ,WAAS;AAAA,UAAC,OAAO,EAAE,gBAAgB;AAAA,UAAG,OAAO,MAAM;AAAA,UAC5E,YAAY,EAAE,oBAAoB;AAAA,UAClC,UAAU,CAAC,UAAU,SAAS,CAAC,kBAAkB,EAAC,GAAG,cAAc,MAAM,MAAM,OAAO,QAAO;AAAA,UAC7F,WAAW,EAAC,YAAY,EAAC,QAAQ,KAAA,GAAO,WAAW,EAAC,KAAK,MAAM,MAAM,SAAS;AAAA,QAAC;AAAA,MAAA;AAAA,MAC1F;AAAA,QAAC;AAAA,QAAA;AAAA,UAAU,MAAK;AAAA,UAAO,MAAK;AAAA,UAAQ,WAAS;AAAA,UAAC,OAAO,EAAE,cAAc;AAAA,UAAG,OAAO,MAAM;AAAA,UAAI,OAAO;AAAA,UACrF,YAAY,YAAY,EAAE,mBAAmB,IAAI,EAAE,kBAAkB;AAAA,UACrE,UAAU,CAAC,UAAU,SAAS,CAAC,kBAAkB,EAAC,GAAG,cAAc,IAAI,MAAM,OAAO,QAAO;AAAA,UAC3F,WAAW,EAAC,YAAY,EAAC,QAAQ,KAAA,GAAO,WAAW,EAAC,KAAK,MAAM,QAAQ,SAAS;AAAA,QAAC;AAAA,MAAA;AAAA,MAC5F,qBAAC,cAAA,EAAa,WAAU,OAAM,SAAS,GAAG,OAAO,EAAC,gBAAgB,WAAA,GAC7D,UAAA;AAAA,QAAA,gCAAa,QAAA,EAAO,SAAS,OAAQ,UAAA,EAAE,iBAAiB,GAAE;AAAA,QAC3D,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,OAAO,UAAU,aAAa,EAAE,MAAM,QAAQ,MAAM,KACpF,UAAA,EAAE,iBAAiB,EAAA,CACxB;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA,EAAA,CACJ,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
+{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/ui/filters/DateRangeFilter.jsx"],"sourcesContent":["// Un rango de fechas personalizado, como chip al lado de los accesos rápidos.\n//\n// Viaja como AAAA-MM-DD (día, no instante). Convertirlo a \"inicio del día\" y \"fin del día\" lo hace el SERVIDOR con la\n// zona del negocio: si lo hiciera el navegador con la suya, alguien en otra zona pediría otro rango sin saberlo.\n//\n// El calendario es el <input type=\"date\"> del TextField de MUI y no el DatePicker de @mui/x-date-pickers con moment,\n// para no sumar dos dependencias (x-date-pickers y moment) que ninguna\n// pantalla del 22-sep necesita. Si el calendario nativo estorba (Safari de escritorio), se cambia SOLO este archivo.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaDateRangeFilter con defaultProps y\n// styleOverrides de sus partes: chip, panel, actions.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useState} from 'react';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport Button from '@mui/material/Button';\nimport Chip from '@mui/material/Chip';\nimport Popover from '@mui/material/Popover';\nimport Stack from '@mui/material/Stack';\nimport TextField from '@mui/material/TextField';\nimport Typography from '@mui/material/Typography';\nimport DateRangeOutlinedIcon from '@mui/icons-material/DateRangeOutlined';\n\nimport {useFormatters} from '@/toolkit/useFormatters.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaDateRangeFilter)\nconst THEME_NAME = 'CalcitaDateRangeFilter';\nconst RangeChip = piecePart(THEME_NAME, 'Chip', Chip);\nconst RangePanel = piecePart(THEME_NAME, 'Panel', Stack);\nconst RangeActions = piecePart(THEME_NAME, 'Actions', Stack);\n\n/**\n * @param {object} props\n * @param {string} [props.from] AAAA-MM-DD o '' si no hay\n * @param {string} [props.to] AAAA-MM-DD o '' si no hay\n * @param {(range: {from: string, to: string}) => void} props.onChange '' para quitar\n * @param {string} [props.label] ya traducido; por defecto \"Personalizado\"\n * @param {object} [props.texts] los textos que cambian, con la forma de `table` en los textos del paquete\n */\nfunction DateRangeFilterContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaDateRangeFilter.defaultProps) y encima lo que llega aquí\n    const {from = '', to = '', onChange, label, texts, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('table', texts);\n    const {formatDate} = useFormatters();\n    const [anchorElement, setAnchorElement] = useState(null);\n    const [draft, setDraft] = useState({from, to});\n    const isActive = Boolean(from || to);\n    // AAAA-MM-DD se compara bien como texto\n    const isInvalid = Boolean(draft.from && draft.to && draft.from > draft.to);\n\n    const open = (event) => {\n        setDraft({from, to});\n        setAnchorElement(event.currentTarget);\n    };\n    const close = () => setAnchorElement(null);\n    const apply = () => {\n        onChange(draft);\n        close();\n    };\n    const clear = () => {\n        onChange({from: '', to: ''});\n        close();\n    };\n\n    const summary = isActive\n        ? t('dateRange.summary', {from: from ? formatDate(from) : '…', to: to ? formatDate(to) : t('dateRange.today')})\n        : (label ?? t('dateRange.label'));\n\n    return (\n        <>\n            <RangeChip icon={<DateRangeOutlinedIcon />} label={summary} clickable onClick={open}\n                  variant={isActive ? 'filled' : 'outlined'} color={isActive ? 'primary' : 'default'}\n                  onDelete={isActive ? clear : undefined} ownSx={{flex: '0 0 auto', height: 32}} />\n            <Popover open={Boolean(anchorElement)} anchorEl={anchorElement} onClose={close} anchorOrigin={{vertical: 'bottom', horizontal: 'left'}}>\n                <RangePanel spacing={2} ownSx={{p: 2, width: 280}}>\n                    <Typography variant=\"subtitle2\">{t('dateRange.title')}</Typography>\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.from')} value={draft.from}\n                               helperText={t('dateRange.fromHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, from: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {max: draft.to || undefined}}} />\n                    <TextField type=\"date\" size=\"small\" fullWidth label={t('dateRange.to')} value={draft.to} error={isInvalid}\n                               helperText={isInvalid ? t('dateRange.invalid') : t('dateRange.toHelp')}\n                               onChange={(event) => setDraft((currentDraft) => ({...currentDraft, to: event.target.value}))}\n                               slotProps={{inputLabel: {shrink: true}, htmlInput: {min: draft.from || undefined}}} />\n                    <RangeActions direction=\"row\" spacing={1} ownSx={{justifyContent: 'flex-end'}}>\n                        {isActive && <Button onClick={clear}>{t('dateRange.clear')}</Button>}\n                        <Button variant=\"contained\" onClick={apply} disabled={isInvalid || !(draft.from || draft.to)}>\n                            {t('dateRange.apply')}\n                        </Button>\n                    </RangeActions>\n                </RangePanel>\n            </Popover>\n        </>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst DateRangeFilter = withPieceSlots(DateRangeFilterContent, THEME_NAME);\nexport default DateRangeFilter;\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA,MAAM,aAAa;AACnB,MAAM,YAAY,UAAU,YAAY,QAAQ,IAAI;AACpD,MAAM,aAAa,UAAU,YAAY,SAAS,KAAK;AACvD,MAAM,eAAe,UAAU,YAAY,WAAW,KAAK;AAU3D,SAAS,uBAAuB,OAAO;AAEnC,QAAM,EAAC,OAAO,IAAI,KAAK,IAAI,UAAU,OAAO,OAAO,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AACrG,mBAAiB,YAAY,YAAY;AACzC,QAAM,EAAC,EAAA,IAAK,sBAAsB,SAAS,KAAK;AAChD,QAAM,EAAC,WAAA,IAAc,cAAA;AACrB,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,IAAI;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAC,MAAM,IAAG;AAC7C,QAAM,WAAW,QAAQ,QAAQ,EAAE;AAEnC,QAAM,YAAY,QAAQ,MAAM,QAAQ,MAAM,MAAM,MAAM,OAAO,MAAM,EAAE;AAEzE,QAAM,OAAO,CAAC,UAAU;AACpB,aAAS,EAAC,MAAM,IAAG;AACnB,qBAAiB,MAAM,aAAa;AAAA,EACxC;AACA,QAAM,QAAQ,MAAM,iBAAiB,IAAI;AACzC,QAAM,QAAQ,MAAM;AAChB,aAAS,KAAK;AACd,UAAA;AAAA,EACJ;AACA,QAAM,QAAQ,MAAM;AAChB,aAAS,EAAC,MAAM,IAAI,IAAI,IAAG;AAC3B,UAAA;AAAA,EACJ;AAEA,QAAM,UAAU,WACV,EAAE,qBAAqB,EAAC,MAAM,OAAO,WAAW,IAAI,IAAI,KAAK,IAAI,KAAK,WAAW,EAAE,IAAI,EAAE,iBAAiB,GAAE,IAC3G,SAAS,EAAE,iBAAiB;AAEnC,SACI,qBAAA,UAAA,EACI,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAU,0BAAO,uBAAA,EAAsB;AAAA,QAAI,OAAO;AAAA,QAAS,WAAS;AAAA,QAAC,SAAS;AAAA,QACzE,SAAS,WAAW,WAAW;AAAA,QAAY,OAAO,WAAW,YAAY;AAAA,QACzE,UAAU,WAAW,QAAQ;AAAA,QAAW,OAAO,EAAC,MAAM,YAAY,QAAQ,GAAA;AAAA,MAAE;AAAA,IAAA;AAAA,IAClF,oBAAC,SAAA,EAAQ,MAAM,QAAQ,aAAa,GAAG,UAAU,eAAe,SAAS,OAAO,cAAc,EAAC,UAAU,UAAU,YAAY,OAAA,GAC3H,UAAA,qBAAC,YAAA,EAAW,SAAS,GAAG,OAAO,EAAC,GAAG,GAAG,OAAO,IAAA,GACzC,UAAA;AAAA,MAAA,oBAAC,YAAA,EAAW,SAAQ,aAAa,UAAA,EAAE,iBAAiB,GAAE;AAAA,MACtD;AAAA,QAAC;AAAA,QAAA;AAAA,UAAU,MAAK;AAAA,UAAO,MAAK;AAAA,UAAQ,WAAS;AAAA,UAAC,OAAO,EAAE,gBAAgB;AAAA,UAAG,OAAO,MAAM;AAAA,UAC5E,YAAY,EAAE,oBAAoB;AAAA,UAClC,UAAU,CAAC,UAAU,SAAS,CAAC,kBAAkB,EAAC,GAAG,cAAc,MAAM,MAAM,OAAO,QAAO;AAAA,UAC7F,WAAW,EAAC,YAAY,EAAC,QAAQ,KAAA,GAAO,WAAW,EAAC,KAAK,MAAM,MAAM,SAAS;AAAA,QAAC;AAAA,MAAA;AAAA,MAC1F;AAAA,QAAC;AAAA,QAAA;AAAA,UAAU,MAAK;AAAA,UAAO,MAAK;AAAA,UAAQ,WAAS;AAAA,UAAC,OAAO,EAAE,cAAc;AAAA,UAAG,OAAO,MAAM;AAAA,UAAI,OAAO;AAAA,UACrF,YAAY,YAAY,EAAE,mBAAmB,IAAI,EAAE,kBAAkB;AAAA,UACrE,UAAU,CAAC,UAAU,SAAS,CAAC,kBAAkB,EAAC,GAAG,cAAc,IAAI,MAAM,OAAO,QAAO;AAAA,UAC3F,WAAW,EAAC,YAAY,EAAC,QAAQ,KAAA,GAAO,WAAW,EAAC,KAAK,MAAM,QAAQ,SAAS;AAAA,QAAC;AAAA,MAAA;AAAA,MAC5F,qBAAC,cAAA,EAAa,WAAU,OAAM,SAAS,GAAG,OAAO,EAAC,gBAAgB,WAAA,GAC7D,UAAA;AAAA,QAAA,gCAAa,QAAA,EAAO,SAAS,OAAQ,UAAA,EAAE,iBAAiB,GAAE;AAAA,QAC3D,oBAAC,QAAA,EAAO,SAAQ,aAAY,SAAS,OAAO,UAAU,aAAa,EAAE,MAAM,QAAQ,MAAM,KACpF,UAAA,EAAE,iBAAiB,EAAA,CACxB;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA,EAAA,CACJ,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;AAGA,MAAM,kBAAkB,eAAe,wBAAwB,UAAU;"}

package/dist/ui/filters/FilterDrawer.js

@@ -0,0 +1,212 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState, useEffect } from "react";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Drawer from "@mui/material/Drawer";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import CatalogInput from "../../inputs/CatalogInput.js";
+import CheckboxGroupInput from "../../inputs/CheckboxGroupInput.js";
+import FieldFrame from "../../inputs/FieldFrame.js";
+import NumberInput from "../../inputs/NumberInput.js";
+import SelectInput from "../../inputs/SelectInput.js";
+import TextInput from "../../inputs/TextInput.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
+import { useToolkitTranslation } from "../../toolkit/useToolkitTranslation.js";
+import { warnUnknownProps } from "../../toolkit/unknownProps.js";
+import { drawerValuesOf, invalidRangesOf, emptyDrawerValuesOf, filterKeysOf, FILTER_FIELD_KIND, comparisonOf, COMPARISON_OPERATOR, comparisonTextOf } from "./filterDrawerFields.js";
+const FILTER_DRAWER_ANCHOR = Object.freeze({ left: "left", right: "right" });
+const DEFAULT_WIDTH = 380;
+const ANY_OPTION = "__calcita_any__";
+const THEME_NAME = "CalcitaFilterDrawer";
+const FilterDrawerHeader = piecePart(THEME_NAME, "Header", Stack);
+const FilterDrawerBody = piecePart(THEME_NAME, "Body", Stack);
+const FilterDrawerFooter = piecePart(THEME_NAME, "Footer", Stack);
+function PairedField({ label, inputId, children, template = "1fr 1fr" }) {
+  return /* @__PURE__ */ jsx(FieldFrame, { inputId, label, children: /* @__PURE__ */ jsx(Box, { sx: { display: "grid", gridTemplateColumns: template, gap: 1.5, alignItems: "start" }, children }) });
+}
+function DrawerField({ field, values, setValue, invalidRanges, t }) {
+  const fieldId = useId();
+  const [key] = filterKeysOf(field);
+  switch (field.kind) {
+    case FILTER_FIELD_KIND.text:
+      return /* @__PURE__ */ jsx(TextInput, { label: field.label, value: values[key], onChange: (text) => setValue(key, text), placeholder: field.placeholder });
+    case FILTER_FIELD_KIND.select:
+      return /* @__PURE__ */ jsx(
+        SelectInput,
+        {
+          label: field.label,
+          value: values[key] || ANY_OPTION,
+          onChange: (chosen) => setValue(key, chosen === ANY_OPTION ? "" : chosen),
+          options: [{ value: ANY_OPTION, label: t("filterDrawer.any") }, ...field.options]
+        }
+      );
+    case FILTER_FIELD_KIND.multiSelect:
+      return /* @__PURE__ */ jsx(SelectInput, { label: field.label, value: values[key], onChange: (chosen) => setValue(key, chosen), options: field.options, multiple: true, selectAll: true, checkboxes: true });
+    case FILTER_FIELD_KIND.catalog:
+      return /* @__PURE__ */ jsx(
+        CatalogInput,
+        {
+          label: field.label,
+          value: values[key],
+          onChange: (chosen) => setValue(key, chosen),
+          options: field.options,
+          multiple: field.multiple,
+          selectAll: field.multiple,
+          checkboxes: field.multiple,
+          formatLabel: field.formatLabel,
+          placeholder: field.placeholder
+        }
+      );
+    case FILTER_FIELD_KIND.checkboxes:
+      return /* @__PURE__ */ jsx(CheckboxGroupInput, { label: field.label, value: values[key], onChange: (chosen) => setValue(key, chosen), options: field.options, selectAll: field.selectAll });
+    case FILTER_FIELD_KIND.numberRange: {
+      const [fromKey, toKey] = filterKeysOf(field);
+      const numberProps = { decimals: field.decimals ?? 0, prefix: field.prefix, suffix: field.suffix, helperText: "" };
+      return /* @__PURE__ */ jsxs(PairedField, { label: field.label, inputId: `${fieldId}-from`, children: [
+        /* @__PURE__ */ jsx(NumberInput, { label: t("filterDrawer.from"), value: values[fromKey], onChange: (number) => setValue(fromKey, number), ...numberProps }),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            label: t("filterDrawer.to"),
+            value: values[toKey],
+            onChange: (number) => setValue(toKey, number),
+            ...numberProps,
+            error: invalidRanges[toKey] ? t("filterDrawer.rangeBackwards") : void 0
+          }
+        )
+      ] });
+    }
+    case FILTER_FIELD_KIND.dateRange: {
+      const [fromKey, toKey] = filterKeysOf(field);
+      return /* @__PURE__ */ jsxs(PairedField, { label: field.label, inputId: `${fieldId}-from`, children: [
+        /* @__PURE__ */ jsx(TextInput, { type: "date", label: t("filterDrawer.from"), value: values[fromKey], onChange: (date) => setValue(fromKey, date), clearable: false, helperText: "" }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            type: "date",
+            label: t("filterDrawer.to"),
+            value: values[toKey],
+            onChange: (date) => setValue(toKey, date),
+            clearable: false,
+            error: invalidRanges[toKey] ? t("filterDrawer.rangeBackwards") : void 0
+          }
+        )
+      ] });
+    }
+    case FILTER_FIELD_KIND.comparison: {
+      const parts = comparisonOf(values[key]);
+      const operators = field.operators ?? Object.values(COMPARISON_OPERATOR);
+      const operator = parts?.operator ?? field.defaultOperator ?? operators[0];
+      return /* @__PURE__ */ jsxs(PairedField, { label: field.label, inputId: `${fieldId}-value`, template: "minmax(0, 1fr) minmax(0, 1.2fr)", children: [
+        /* @__PURE__ */ jsx(
+          SelectInput,
+          {
+            label: t("filterDrawer.operator"),
+            value: operator,
+            helperText: "",
+            options: operators.map((option) => ({ value: option, label: t(`filterDrawer.operators.${option}`) })),
+            onChange: (chosen) => setValue(key, comparisonTextOf(chosen, parts?.value ?? ""))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          NumberInput,
+          {
+            label: t("filterDrawer.value"),
+            value: parts?.value ?? "",
+            decimals: field.decimals ?? 2,
+            prefix: field.prefix,
+            suffix: field.suffix,
+            helperText: "",
+            onChange: (number) => setValue(key, comparisonTextOf(operator, number))
+          }
+        )
+      ] });
+    }
+    case FILTER_FIELD_KIND.custom:
+      return field.render({ value: values[key], onChange: (next) => setValue(key, next), values, setValue });
+    default:
+      return null;
+  }
+}
+function FilterDrawerContent(props) {
+  const {
+    open,
+    onClose,
+    fields,
+    values,
+    onApply,
+    anchor = FILTER_DRAWER_ANCHOR.right,
+    width = DEFAULT_WIDTH,
+    title,
+    applyLabel,
+    closeOnApply = true,
+    children,
+    texts,
+    ...unknownProps
+  } = usePieceProps(props, THEME_NAME);
+  warnUnknownProps(THEME_NAME, unknownProps);
+  const { t } = useToolkitTranslation("common", texts);
+  const titleId = useId();
+  const [draft, setDraft] = useState(() => drawerValuesOf(fields, values));
+  useEffect(() => {
+    if (open) {
+      setDraft(drawerValuesOf(fields, values));
+    }
+  }, [open]);
+  const invalidRanges = invalidRangesOf(fields, draft);
+  const hasInvalidRange = Object.keys(invalidRanges).length > 0;
+  const setValue = (key, value) => setDraft((current) => ({ ...current, [key]: value }));
+  const apply = () => {
+    onApply(draft);
+    if (closeOnApply) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    Drawer,
+    {
+      anchor,
+      open,
+      onClose,
+      slotProps: { paper: { "aria-labelledby": titleId, className: `${THEME_NAME}-paper`, sx: { width: { xs: "100%", sm: width }, maxWidth: "100%" } } },
+      children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          component: "form",
+          noValidate: true,
+          sx: { display: "flex", flexDirection: "column", height: "100%" },
+          onSubmit: (event) => {
+            event.preventDefault();
+            if (!hasInvalidRange) {
+              apply();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxs(FilterDrawerHeader, { direction: "row", ownSx: { alignItems: "center", gap: 1, px: 2, py: 1.5, borderBottom: 1, borderColor: "divider" }, children: [
+              /* @__PURE__ */ jsx(IconButton, { "aria-label": t("filterDrawer.close"), onClick: onClose, edge: "start", children: /* @__PURE__ */ jsx(CloseRoundedIcon, {}) }),
+              /* @__PURE__ */ jsx(Typography, { id: titleId, variant: "h6", component: "h2", sx: { flexGrow: 1 }, children: title ?? t("filterDrawer.title") })
+            ] }),
+            /* @__PURE__ */ jsxs(FilterDrawerBody, { spacing: 1, ownSx: { flex: 1, overflowY: "auto", px: 2.5, py: 2 }, children: [
+              fields.map((field) => /* @__PURE__ */ jsx(DrawerField, { field, values: draft, setValue, invalidRanges, t }, field.name)),
+              children
+            ] }),
+            /* @__PURE__ */ jsxs(FilterDrawerFooter, { direction: "row", ownSx: { gap: 1, justifyContent: "flex-end", px: 2.5, py: 1.5, borderTop: 1, borderColor: "divider" }, children: [
+              /* @__PURE__ */ jsx(Button, { onClick: () => setDraft(emptyDrawerValuesOf(fields)), children: t("filterDrawer.clear") }),
+              /* @__PURE__ */ jsx(Button, { type: "submit", variant: "contained", disabled: hasInvalidRange, children: applyLabel ?? t("filterDrawer.apply") })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+const FilterDrawer = withPieceSlots(FilterDrawerContent, THEME_NAME);
+export {
+  FILTER_DRAWER_ANCHOR,
+  FilterDrawer as default
+};
+//# sourceMappingURL=FilterDrawer.js.map

package/dist/ui/filters/FilterDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDrawer.js","sources":["../../../src/ui/filters/FilterDrawer.jsx"],"sourcesContent":["// El cajón de búsqueda: un panel que sale de un lado con los campos que filtran una lista (las listas, un rango\n// «desde-hasta», unas fechas, un monto con su operador), para cuando los filtros ya no caben arriba de la tabla.\n//\n// Lo que se cambia adentro es un BORRADOR: la lista no se mueve hasta «Buscar» (no se consulta al servidor con cada tecla).\n// «Limpiar» vacía los campos del cajón; «Buscar» manda todos juntos (onApply) y cierra. Un rango al revés («hasta» menor que\n// «desde») se dice en su campo y no deja buscar.\n//\n// Los campos se declaran (filterDrawerFields.js dice cómo viaja cada uno); con kind 'custom' va uno propio (render). Para\n// conectarlo a ServerTable con su botón y sus chips: ServerTableFilterDrawer de /table.\n//\n// Configurable: de qué lado sale (anchor), su ancho, su título y los textos de sus botones. En el teléfono ocupa todo el\n// ancho.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaFilterDrawer con defaultProps y\n// styleOverrides de sus partes: paper, header, body, footer.\n//\n// Genérico del paquete: function (regla de la casa).\nimport {useEffect, useId, useState} from 'react';\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Drawer from '@mui/material/Drawer';\nimport IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport CloseRoundedIcon from '@mui/icons-material/CloseRounded';\n\nimport CatalogInput from '@/inputs/CatalogInput.jsx';\nimport CheckboxGroupInput from '@/inputs/CheckboxGroupInput.jsx';\nimport FieldFrame from '@/inputs/FieldFrame.jsx';\nimport NumberInput from '@/inputs/NumberInput.jsx';\nimport SelectInput from '@/inputs/SelectInput.jsx';\nimport TextInput from '@/inputs/TextInput.jsx';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {useToolkitTranslation} from '@/toolkit/useToolkitTranslation.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\nimport {\n    COMPARISON_OPERATOR, FILTER_FIELD_KIND, comparisonOf, comparisonTextOf, drawerValuesOf, emptyDrawerValuesOf, filterKeysOf,\n    invalidRangesOf,\n} from '@/ui/filters/filterDrawerFields.js';\n\n/** De qué lado sale el cajón. */\nexport const FILTER_DRAWER_ANCHOR = Object.freeze({left: 'left', right: 'right'});\nconst DEFAULT_WIDTH = 380;\n// «Cualquiera» de una lista de una sola opción: no es una opción y viaja como '' (sin filtro)\nconst ANY_OPTION = '__calcita_any__';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaFilterDrawer)\nconst THEME_NAME = 'CalcitaFilterDrawer';\nconst FilterDrawerHeader = piecePart(THEME_NAME, 'Header', Stack);\nconst FilterDrawerBody = piecePart(THEME_NAME, 'Body', Stack);\nconst FilterDrawerFooter = piecePart(THEME_NAME, 'Footer', Stack);\n\n/**\n * Dos campos lado a lado (desde y hasta, operador y número); en un cajón angosto se ven bien juntos.\n *\n * @param {{label: import('react').ReactNode, inputId: string, children: import('react').ReactNode, template?: string}} props\n */\nfunction PairedField({label, inputId, children, template = '1fr 1fr'}) {\n    return (\n        <FieldFrame inputId={inputId} label={label}>\n            <Box sx={{display: 'grid', gridTemplateColumns: template, gap: 1.5, alignItems: 'start'}}>{children}</Box>\n        </FieldFrame>\n    );\n}\n\n/**\n * Un campo del cajón según su tipo, con las piezas de la casa.\n *\n * @param {object} props\n */\nfunction DrawerField({field, values, setValue, invalidRanges, t}) {\n    const fieldId = useId();\n    const [key] = filterKeysOf(field);\n    switch (field.kind) {\n        case FILTER_FIELD_KIND.text:\n            return <TextInput label={field.label} value={values[key]} onChange={(text) => setValue(key, text)} placeholder={field.placeholder} />;\n        case FILTER_FIELD_KIND.select:\n            return (\n                <SelectInput label={field.label} value={values[key] || ANY_OPTION} onChange={(chosen) => setValue(key, chosen === ANY_OPTION ? '' : chosen)}\n                             options={[{value: ANY_OPTION, label: t('filterDrawer.any')}, ...field.options]} />\n            );\n        case FILTER_FIELD_KIND.multiSelect:\n            return <SelectInput label={field.label} value={values[key]} onChange={(chosen) => setValue(key, chosen)} options={field.options} multiple selectAll checkboxes />;\n        case FILTER_FIELD_KIND.catalog:\n            return (\n                <CatalogInput label={field.label} value={values[key]} onChange={(chosen) => setValue(key, chosen)} options={field.options}\n                              multiple={field.multiple} selectAll={field.multiple} checkboxes={field.multiple} formatLabel={field.formatLabel}\n                              placeholder={field.placeholder} />\n            );\n        case FILTER_FIELD_KIND.checkboxes:\n            return <CheckboxGroupInput label={field.label} value={values[key]} onChange={(chosen) => setValue(key, chosen)} options={field.options} selectAll={field.selectAll} />;\n        case FILTER_FIELD_KIND.numberRange: {\n            const [fromKey, toKey] = filterKeysOf(field);\n            const numberProps = {decimals: field.decimals ?? 0, prefix: field.prefix, suffix: field.suffix, helperText: ''};\n            return (\n                <PairedField label={field.label} inputId={`${fieldId}-from`}>\n                    <NumberInput label={t('filterDrawer.from')} value={values[fromKey]} onChange={(number) => setValue(fromKey, number)} {...numberProps} />\n                    <NumberInput label={t('filterDrawer.to')} value={values[toKey]} onChange={(number) => setValue(toKey, number)} {...numberProps}\n                                 error={invalidRanges[toKey] ? t('filterDrawer.rangeBackwards') : undefined} />\n                </PairedField>\n            );\n        }\n        case FILTER_FIELD_KIND.dateRange: {\n            const [fromKey, toKey] = filterKeysOf(field);\n            // el calendario del navegador (como DateRangeFilter): viaja AAAA-MM-DD, sin pedir MUI X\n            return (\n                <PairedField label={field.label} inputId={`${fieldId}-from`}>\n                    <TextInput type=\"date\" label={t('filterDrawer.from')} value={values[fromKey]} onChange={(date) => setValue(fromKey, date)} clearable={false} helperText=\"\" />\n                    <TextInput type=\"date\" label={t('filterDrawer.to')} value={values[toKey]} onChange={(date) => setValue(toKey, date)} clearable={false}\n                               error={invalidRanges[toKey] ? t('filterDrawer.rangeBackwards') : undefined} />\n                </PairedField>\n            );\n        }\n        case FILTER_FIELD_KIND.comparison: {\n            const parts = comparisonOf(values[key]);\n            const operators = field.operators ?? Object.values(COMPARISON_OPERATOR);\n            const operator = parts?.operator ?? field.defaultOperator ?? operators[0];\n            return (\n                <PairedField label={field.label} inputId={`${fieldId}-value`} template=\"minmax(0, 1fr) minmax(0, 1.2fr)\">\n                    <SelectInput label={t('filterDrawer.operator')} value={operator} helperText=\"\"\n                                 options={operators.map((option) => ({value: option, label: t(`filterDrawer.operators.${option}`)}))}\n                                 onChange={(chosen) => setValue(key, comparisonTextOf(chosen, parts?.value ?? ''))} />\n                    <NumberInput label={t('filterDrawer.value')} value={parts?.value ?? ''} decimals={field.decimals ?? 2} prefix={field.prefix} suffix={field.suffix}\n                                 helperText=\"\" onChange={(number) => setValue(key, comparisonTextOf(operator, number))} />\n                </PairedField>\n            );\n        }\n        case FILTER_FIELD_KIND.custom:\n            return field.render({value: values[key], onChange: (next) => setValue(key, next), values, setValue});\n        default:\n            return null;\n    }\n}\n\n/**\n * @param {object} props\n * @param {boolean} props.open\n * @param {() => void} props.onClose\n * @param {object[]} props.fields los campos (filterDrawerFields.js): {name, label, kind, options?, keys?, prefix?, suffix?, decimals?, operators?, render?…}\n * @param {Record<string, unknown>} props.values los filtros puestos hoy (de ahí sale el borrador al abrir)\n * @param {(values: Record<string, unknown>) => void} props.onApply todos los campos del cajón juntos, al picar «Buscar»\n * @param {'left'|'right'} [props.anchor] de qué lado sale (FILTER_DRAWER_ANCHOR); por omisión la derecha\n * @param {number} [props.width] su ancho en escritorio, en px\n * @param {string} [props.title] ya traducido; por omisión «Filtros»\n * @param {string} [props.applyLabel] ya traducido; por omisión «Buscar»\n * @param {boolean} [props.closeOnApply] por omisión sí\n * @param {import('react').ReactNode} [props.children] algo más abajo de los campos (una nota, un enlace)\n * @param {object} [props.texts] los textos que cambian, con la forma de `common` en los textos del paquete\n */\nfunction FilterDrawerContent(props) {\n    const {\n        open, onClose, fields, values, onApply, anchor = FILTER_DRAWER_ANCHOR.right, width = DEFAULT_WIDTH, title, applyLabel,\n        closeOnApply = true, children, texts,\n        ...unknownProps\n    } = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const {t} = useToolkitTranslation('common', texts);\n    const titleId = useId();\n    const [draft, setDraft] = useState(() => drawerValuesOf(fields, values));\n    // cada vez que se abre, el borrador empieza de lo que hay puesto (lo de la vez pasada sin buscar no se queda)\n    useEffect(() => {\n        if (open) {\n            setDraft(drawerValuesOf(fields, values));\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n    const invalidRanges = invalidRangesOf(fields, draft);\n    const hasInvalidRange = Object.keys(invalidRanges).length > 0;\n    const setValue = (key, value) => setDraft((current) => ({...current, [key]: value}));\n    const apply = () => {\n        onApply(draft);\n        if (closeOnApply) {\n            onClose();\n        }\n    };\n\n    return (\n        <Drawer\n            anchor={anchor}\n            open={open}\n            onClose={onClose}\n            slotProps={{paper: {'aria-labelledby': titleId, className: `${THEME_NAME}-paper`, sx: {width: {xs: '100%', sm: width}, maxWidth: '100%'}}}}\n        >\n            <Box component=\"form\" noValidate sx={{display: 'flex', flexDirection: 'column', height: '100%'}}\n                 onSubmit={(event) => {\n                     event.preventDefault();\n                     if (!hasInvalidRange) {\n                         apply();\n                     }\n                 }}>\n                <FilterDrawerHeader direction=\"row\" ownSx={{alignItems: 'center', gap: 1, px: 2, py: 1.5, borderBottom: 1, borderColor: 'divider'}}>\n                    <IconButton aria-label={t('filterDrawer.close')} onClick={onClose} edge=\"start\"><CloseRoundedIcon /></IconButton>\n                    <Typography id={titleId} variant=\"h6\" component=\"h2\" sx={{flexGrow: 1}}>{title ?? t('filterDrawer.title')}</Typography>\n                </FilterDrawerHeader>\n                <FilterDrawerBody spacing={1} ownSx={{flex: 1, overflowY: 'auto', px: 2.5, py: 2}}>\n                    {fields.map((field) => (\n                        <DrawerField key={field.name} field={field} values={draft} setValue={setValue} invalidRanges={invalidRanges} t={t} />\n                    ))}\n                    {children}\n                </FilterDrawerBody>\n                <FilterDrawerFooter direction=\"row\" ownSx={{gap: 1, justifyContent: 'flex-end', px: 2.5, py: 1.5, borderTop: 1, borderColor: 'divider'}}>\n                    <Button onClick={() => setDraft(emptyDrawerValuesOf(fields))}>{t('filterDrawer.clear')}</Button>\n                    <Button type=\"submit\" variant=\"contained\" disabled={hasInvalidRange}>{applyLabel ?? t('filterDrawer.apply')}</Button>\n                </FilterDrawerFooter>\n            </Box>\n        </Drawer>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst FilterDrawer = withPieceSlots(FilterDrawerContent, THEME_NAME);\nexport default FilterDrawer;\n"],"names":[],"mappings":"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"}

package/dist/ui/filters/PeriodRangeSelector.js

@@ -7,7 +7,7 @@ import MenuItem from "@mui/material/MenuItem";
 import Select from "@mui/material/Select";
 import Stack from "@mui/material/Stack";
 import { rangeEndOptionsOf, rangeEndAfterStartChange } from "../../periodRanges.js";
-import { piecePart, usePieceProps } from "../../theme/themePieces.js";
+import { piecePart, withPieceSlots, usePieceProps } from "../../theme/themePieces.js";
 import { warnUnknownProps } from "../../toolkit/unknownProps.js";
 const THEME_NAME = "CalcitaPeriodRangeSelector";
 const PeriodField = piecePart(THEME_NAME, "Field", FormControl);
@@ -31,7 +31,7 @@ function PeriodSelect({ id, label, value, options, onChange }) {
     )
   ] });
 }
-function PeriodRangeSelector(props) {
+function PeriodRangeSelectorContent(props) {
   const { id, options, from, to, fromLabel, toLabel, onChange, ...unknownProps } = usePieceProps(props, THEME_NAME);
   warnUnknownProps(THEME_NAME, unknownProps);
   const endOptions = rangeEndOptionsOf(options, from);
@@ -58,6 +58,7 @@ function PeriodRangeSelector(props) {
     )
   ] });
 }
+const PeriodRangeSelector = withPieceSlots(PeriodRangeSelectorContent, THEME_NAME);
 export {
   PeriodRangeSelector as default
 };

package/dist/ui/filters/PeriodRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodRangeSelector.js","sources":["../../../src/ui/filters/PeriodRangeSelector.jsx"],"sourcesContent":["// Un rango de periodos: «desde» y «hasta», cada uno una lista para elegir (de tal quincena a tal quincena, de tal mes a\n// tal mes). Se usa en lugar de un calendario porque los periodos no son días: solo se ofrecen los que existen, y los que no\n// se pueden elegir salen apagados con su razón.\n//\n// «Hasta» solo ofrece lo que hace un rango válido con «desde»: nada de antes y nada que salte un periodo apagado\n// (periodRanges.js). Al cambiar «desde», si el «hasta» que había ya no vale, se iguala a «desde».\n//\n// No sabe de quincenas ni de productos: recibe las opciones ya ordenadas y con sus textos traducidos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPeriodRangeSelector con defaultProps y\n// styleOverrides de sus partes: field, select, root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport FormControl from '@mui/material/FormControl';\nimport InputLabel from '@mui/material/InputLabel';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select from '@mui/material/Select';\nimport Stack from '@mui/material/Stack';\n\nimport {rangeEndAfterStartChange, rangeEndOptionsOf} from '@/periodRanges.js';\nimport {piecePart, usePieceProps} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPeriodRangeSelector)\nconst THEME_NAME = 'CalcitaPeriodRangeSelector';\nconst PeriodField = piecePart(THEME_NAME, 'Field', FormControl);\nconst PeriodSelectPart = piecePart(THEME_NAME, 'Select', Select);\nconst PeriodRoot = piecePart(THEME_NAME, 'Root', Stack);\n\n// ancho de cada lista: cabe «septiembre 2026 · Q2» sin cortarse\nconst SELECT_MINIMUM_WIDTH = 210;\n\n/**\n * Una lista del rango.\n *\n * @param {object} props\n * @param {string} props.id\n * @param {string} props.label\n * @param {string} props.value\n * @param {(value: string) => void} props.onChange\n * @param {Array<{value: string, label: string, disabled: boolean, hint?: string}>} props.options\n */\nfunction PeriodSelect({id, label, value, options, onChange}) {\n    return (\n        <PeriodField size=\"small\" ownSx={{minWidth: SELECT_MINIMUM_WIDTH, flex: '0 0 auto'}}>\n            <InputLabel id={`${id}-label`}>{label}</InputLabel>\n            <PeriodSelectPart labelId={`${id}-label`} label={label} value={value ?? ''} onChange={(event) => onChange(event.target.value)}\n                    ownSx={{bgcolor: 'background.paper'}}\n                    renderValue={(selectedValue) => options.find((option) => option.value === selectedValue)?.label ?? ''}>\n                {options.map((option) => (\n                    <MenuItem key={option.value} value={option.value} disabled={option.disabled}>\n                        {/* la razón de una opción apagada va debajo de su nombre: «sin validar» se lee sin tooltip */}\n                        <ListItemText primary={option.label} secondary={option.disabled ? option.hint : undefined} />\n                    </MenuItem>\n                ))}\n            </PeriodSelectPart>\n        </PeriodField>\n    );\n}\n\n/**\n * @param {object} props\n * @param {string} props.id prefijo de los id de las dos listas (accesibilidad)\n * @param {Array<{value: string, label: string, disabled: boolean, hint?: string}>} props.options en orden; ya\n *     traducidas\n * @param {string|null} props.from\n * @param {string|null} props.to\n * @param {string} props.fromLabel ya traducido\n * @param {string} props.toLabel ya traducido\n * @param {(range: {from: string, to: string}) => void} props.onChange\n */\nexport default function PeriodRangeSelector(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPeriodRangeSelector.defaultProps) y encima lo que llega aquí\n    const {id, options, from, to, fromLabel, toLabel, onChange, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const endOptions = rangeEndOptionsOf(options, from);\n\n    return (\n        <PeriodRoot direction=\"row\" spacing={1.5} useFlexGap ownSx={{alignItems: 'center', flexWrap: 'wrap'}}>\n            <PeriodSelect id={`${id}-from`} label={fromLabel} value={from} options={options}\n                          onChange={(nextFrom) => onChange({from: nextFrom, to: rangeEndAfterStartChange(options, nextFrom, to)})} />\n            <PeriodSelect id={`${id}-to`} label={toLabel} value={to} options={endOptions}\n                          onChange={(nextTo) => onChange({from, to: nextTo})} />\n        </PeriodRoot>\n    );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,SAAS,WAAW;AAC9D,MAAM,mBAAmB,UAAU,YAAY,UAAU,MAAM;AAC/D,MAAM,aAAa,UAAU,YAAY,QAAQ,KAAK;AAGtD,MAAM,uBAAuB;AAY7B,SAAS,aAAa,EAAC,IAAI,OAAO,OAAO,SAAS,YAAW;AACzD,SACI,qBAAC,aAAA,EAAY,MAAK,SAAQ,OAAO,EAAC,UAAU,sBAAsB,MAAM,WAAA,GACpE,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,IAAI,GAAG,EAAE,UAAW,UAAA,OAAM;AAAA,IACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAiB,SAAS,GAAG,EAAE;AAAA,QAAU;AAAA,QAAc,OAAO,SAAS;AAAA,QAAI,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,QACpH,OAAO,EAAC,SAAS,mBAAA;AAAA,QACjB,aAAa,CAAC,kBAAkB,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,aAAa,GAAG,SAAS;AAAA,QACtG,UAAA,QAAQ,IAAI,CAAC,WACV,oBAAC,UAAA,EAA4B,OAAO,OAAO,OAAO,UAAU,OAAO,UAE/D,UAAA,oBAAC,gBAAa,SAAS,OAAO,OAAO,WAAW,OAAO,WAAW,OAAO,OAAO,OAAA,CAAW,EAAA,GAFhF,OAAO,KAGtB,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AAaA,SAAwB,oBAAoB,OAAO;AAE/C,QAAM,EAAC,IAAI,SAAS,MAAM,IAAI,WAAW,SAAS,UAAU,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC9G,mBAAiB,YAAY,YAAY;AACzC,QAAM,aAAa,kBAAkB,SAAS,IAAI;AAElD,SACI,qBAAC,YAAA,EAAW,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,OAAO,EAAC,YAAY,UAAU,UAAU,UACzF,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,IAAI,GAAG,EAAE;AAAA,QAAS,OAAO;AAAA,QAAW,OAAO;AAAA,QAAM;AAAA,QACjD,UAAU,CAAC,aAAa,SAAS,EAAC,MAAM,UAAU,IAAI,yBAAyB,SAAS,UAAU,EAAE,GAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IACpH;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,IAAI,GAAG,EAAE;AAAA,QAAO,OAAO;AAAA,QAAS,OAAO;AAAA,QAAI,SAAS;AAAA,QACpD,UAAU,CAAC,WAAW,SAAS,EAAC,MAAM,IAAI,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAG,GACtE;AAER;"}
+{"version":3,"file":"PeriodRangeSelector.js","sources":["../../../src/ui/filters/PeriodRangeSelector.jsx"],"sourcesContent":["// Un rango de periodos: «desde» y «hasta», cada uno una lista para elegir (de tal quincena a tal quincena, de tal mes a\n// tal mes). Se usa en lugar de un calendario porque los periodos no son días: solo se ofrecen los que existen, y los que no\n// se pueden elegir salen apagados con su razón.\n//\n// «Hasta» solo ofrece lo que hace un rango válido con «desde»: nada de antes y nada que salte un periodo apagado\n// (periodRanges.js). Al cambiar «desde», si el «hasta» que había ya no vale, se iguala a «desde».\n//\n// No sabe de quincenas ni de productos: recibe las opciones ya ordenadas y con sus textos traducidos.\n//\n// Se cambia desde el tema del proyecto, como las piezas de MUI: components.CalcitaPeriodRangeSelector con defaultProps y\n// styleOverrides de sus partes: field, select, root.\n//\n// Genérico del paquete: function (regla de la casa).\nimport FormControl from '@mui/material/FormControl';\nimport InputLabel from '@mui/material/InputLabel';\nimport ListItemText from '@mui/material/ListItemText';\nimport MenuItem from '@mui/material/MenuItem';\nimport Select from '@mui/material/Select';\nimport Stack from '@mui/material/Stack';\n\nimport {rangeEndAfterStartChange, rangeEndOptionsOf} from '@/periodRanges.js';\nimport {piecePart, usePieceProps, withPieceSlots} from '@/theme/themePieces.js';\nimport {warnUnknownProps} from '@/toolkit/unknownProps.js';\n\n// el nombre de la pieza en el tema y sus partes (theme.components.CalcitaPeriodRangeSelector)\nconst THEME_NAME = 'CalcitaPeriodRangeSelector';\nconst PeriodField = piecePart(THEME_NAME, 'Field', FormControl);\nconst PeriodSelectPart = piecePart(THEME_NAME, 'Select', Select);\nconst PeriodRoot = piecePart(THEME_NAME, 'Root', Stack);\n\n// ancho de cada lista: cabe «septiembre 2026 · Q2» sin cortarse\nconst SELECT_MINIMUM_WIDTH = 210;\n\n/**\n * Una lista del rango.\n *\n * @param {object} props\n * @param {string} props.id\n * @param {string} props.label\n * @param {string} props.value\n * @param {(value: string) => void} props.onChange\n * @param {Array<{value: string, label: string, disabled: boolean, hint?: string}>} props.options\n */\nfunction PeriodSelect({id, label, value, options, onChange}) {\n    return (\n        <PeriodField size=\"small\" ownSx={{minWidth: SELECT_MINIMUM_WIDTH, flex: '0 0 auto'}}>\n            <InputLabel id={`${id}-label`}>{label}</InputLabel>\n            <PeriodSelectPart labelId={`${id}-label`} label={label} value={value ?? ''} onChange={(event) => onChange(event.target.value)}\n                    ownSx={{bgcolor: 'background.paper'}}\n                    renderValue={(selectedValue) => options.find((option) => option.value === selectedValue)?.label ?? ''}>\n                {options.map((option) => (\n                    <MenuItem key={option.value} value={option.value} disabled={option.disabled}>\n                        {/* la razón de una opción apagada va debajo de su nombre: «sin validar» se lee sin tooltip */}\n                        <ListItemText primary={option.label} secondary={option.disabled ? option.hint : undefined} />\n                    </MenuItem>\n                ))}\n            </PeriodSelectPart>\n        </PeriodField>\n    );\n}\n\n/**\n * @param {object} props\n * @param {string} props.id prefijo de los id de las dos listas (accesibilidad)\n * @param {Array<{value: string, label: string, disabled: boolean, hint?: string}>} props.options en orden; ya\n *     traducidas\n * @param {string|null} props.from\n * @param {string|null} props.to\n * @param {string} props.fromLabel ya traducido\n * @param {string} props.toLabel ya traducido\n * @param {(range: {from: string, to: string}) => void} props.onChange\n */\nfunction PeriodRangeSelectorContent(props) {\n    // lo que el proyecto puso en su tema (components.CalcitaPeriodRangeSelector.defaultProps) y encima lo que llega aquí\n    const {id, options, from, to, fromLabel, toLabel, onChange, ...unknownProps} = usePieceProps(props, THEME_NAME);\n    warnUnknownProps(THEME_NAME, unknownProps);\n    const endOptions = rangeEndOptionsOf(options, from);\n\n    return (\n        <PeriodRoot direction=\"row\" spacing={1.5} useFlexGap ownSx={{alignItems: 'center', flexWrap: 'wrap'}}>\n            <PeriodSelect id={`${id}-from`} label={fromLabel} value={from} options={options}\n                          onChange={(nextFrom) => onChange({from: nextFrom, to: rangeEndAfterStartChange(options, nextFrom, to)})} />\n            <PeriodSelect id={`${id}-to`} label={toLabel} value={to} options={endOptions}\n                          onChange={(nextTo) => onChange({from, to: nextTo})} />\n        </PeriodRoot>\n    );\n}\n\n// lo que se exporta: la pieza con slots y slotProps para cambiar sus partes (themePieces.js)\nconst PeriodRangeSelector = withPieceSlots(PeriodRangeSelectorContent, THEME_NAME);\nexport default PeriodRangeSelector;\n"],"names":[],"mappings":";;;;;;;;;;;AAyBA,MAAM,aAAa;AACnB,MAAM,cAAc,UAAU,YAAY,SAAS,WAAW;AAC9D,MAAM,mBAAmB,UAAU,YAAY,UAAU,MAAM;AAC/D,MAAM,aAAa,UAAU,YAAY,QAAQ,KAAK;AAGtD,MAAM,uBAAuB;AAY7B,SAAS,aAAa,EAAC,IAAI,OAAO,OAAO,SAAS,YAAW;AACzD,SACI,qBAAC,aAAA,EAAY,MAAK,SAAQ,OAAO,EAAC,UAAU,sBAAsB,MAAM,WAAA,GACpE,UAAA;AAAA,IAAA,oBAAC,YAAA,EAAW,IAAI,GAAG,EAAE,UAAW,UAAA,OAAM;AAAA,IACtC;AAAA,MAAC;AAAA,MAAA;AAAA,QAAiB,SAAS,GAAG,EAAE;AAAA,QAAU;AAAA,QAAc,OAAO,SAAS;AAAA,QAAI,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,QACpH,OAAO,EAAC,SAAS,mBAAA;AAAA,QACjB,aAAa,CAAC,kBAAkB,QAAQ,KAAK,CAAC,WAAW,OAAO,UAAU,aAAa,GAAG,SAAS;AAAA,QACtG,UAAA,QAAQ,IAAI,CAAC,WACV,oBAAC,UAAA,EAA4B,OAAO,OAAO,OAAO,UAAU,OAAO,UAE/D,UAAA,oBAAC,gBAAa,SAAS,OAAO,OAAO,WAAW,OAAO,WAAW,OAAO,OAAO,OAAA,CAAW,EAAA,GAFhF,OAAO,KAGtB,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAER;AAaA,SAAS,2BAA2B,OAAO;AAEvC,QAAM,EAAC,IAAI,SAAS,MAAM,IAAI,WAAW,SAAS,UAAU,GAAG,aAAA,IAAgB,cAAc,OAAO,UAAU;AAC9G,mBAAiB,YAAY,YAAY;AACzC,QAAM,aAAa,kBAAkB,SAAS,IAAI;AAElD,SACI,qBAAC,YAAA,EAAW,WAAU,OAAM,SAAS,KAAK,YAAU,MAAC,OAAO,EAAC,YAAY,UAAU,UAAU,UACzF,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,IAAI,GAAG,EAAE;AAAA,QAAS,OAAO;AAAA,QAAW,OAAO;AAAA,QAAM;AAAA,QACjD,UAAU,CAAC,aAAa,SAAS,EAAC,MAAM,UAAU,IAAI,yBAAyB,SAAS,UAAU,EAAE,GAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IACpH;AAAA,MAAC;AAAA,MAAA;AAAA,QAAa,IAAI,GAAG,EAAE;AAAA,QAAO,OAAO;AAAA,QAAS,OAAO;AAAA,QAAI,SAAS;AAAA,QACpD,UAAU,CAAC,WAAW,SAAS,EAAC,MAAM,IAAI,QAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAG,GACtE;AAER;AAGA,MAAM,sBAAsB,eAAe,4BAA4B,UAAU;"}