{"version":3,"file":"WidgetDataGuard-BqS9wFzT.cjs","sources":["../src/dashboard/components/WidgetDataGuard.tsx"],"sourcesContent":["import React from 'react';\nimport { useDashboardTranslation } from '../i18n';\nimport { WidgetSkeleton } from './WidgetSkeletons';\nimport type { SkeletonShape } from '../utils/skeletonShape';\nimport { useReducedMotion } from '../utils/useReducedMotion';\n\ninterface WidgetDataGuardProps {\n  loading: boolean;\n  error: string | null;\n  data: unknown;\n  children: React.ReactNode;\n  /** Forma del esqueleto de carga. Sin ella cae en `generic`. */\n  shape?: SkeletonShape;\n  /**\n   * Titular del estado vacío, ya traducido por quien lo conoce.\n   *\n   * <b>Nombra el hueco</b> —\"Sin ventas en este periodo\", \"Ningún ítem por debajo\n   * del mínimo\"— en vez de \"Sin datos disponibles\". Dos motivos: un vacío en un\n   * tablero suele ser información y no un fallo, y a veces es una buena noticia\n   * que merece leerse como tal. El guard no puede saber cuál es el caso, así que\n   * lo declara el widget.\n   */\n  emptyTitle?: string;\n  /** Qué puede hacer el usuario al respecto. Ej.: \"Cambiar a Mes\". */\n  emptyHint?: string;\n}\n\n/**\n * Guard compartido para widgets: carga, vacío y error.\n *\n * El error se relanza para que lo capture `WidgetErrorBoundary`, que es quien\n * pinta el estado de fallo — así un widget roto no arrastra al resto del tablero.\n */\nexport const WidgetDataGuard: React.FC<WidgetDataGuardProps> = ({\n  loading,\n  error,\n  data,\n  children,\n  shape = 'generic',\n  emptyTitle,\n  emptyHint,\n}) => {\n  const { t } = useDashboardTranslation();\n  const reducedMotion = useReducedMotion();\n\n  if (loading) {\n    return <WidgetSkeleton shape={shape} reducedMotion={reducedMotion} />;\n  }\n\n  // Lanzar error de fetch antes de verificar data null — evita ErrorBoundary prematuro durante carga inicial\n  if (error) {\n    throw new Error(error);\n  }\n\n  // Un array vacío es tan \"sin datos\" como un null: hasta ahora sólo se cubría el\n  // null, y un endpoint que devolvía [] pintaba un gráfico en blanco sin explicar\n  // nada.\n  const isEmpty = data == null || (Array.isArray(data) && data.length === 0);\n\n  if (isEmpty) {\n    return (\n      <div\n        className=\"w-full h-full flex flex-col items-center justify-center text-center px-4 gap-1\"\n        data-testid=\"widget-empty\"\n      >\n        <p className=\"text-[13px]\" style={{ color: 'var(--dash-text-secondary)' }}>\n          {emptyTitle || t('dashboard.widget.noData')}\n        </p>\n        {emptyHint && (\n          <p className=\"text-[11px]\" style={{ color: 'var(--dash-text-muted)' }}>\n            {emptyHint}\n          </p>\n        )}\n      </div>\n    );\n  }\n\n  return <>{children}</>;\n};\n"],"names":["WidgetDataGuard","loading","error","data","children","shape","emptyTitle","emptyHint","t","useDashboardTranslation","reducedMotion","useReducedMotion","jsx","WidgetSkeleton","jsxs"],"mappings":"2GAiCaA,EAAkD,CAAC,CAC9D,QAAAC,EACA,MAAAC,EACA,KAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,UACR,WAAAC,EACA,UAAAC,CACF,IAAM,CACJ,KAAM,CAAE,EAAAC,CAAA,EAAMC,0BAAA,EACRC,EAAgBC,EAAAA,iBAAA,EAEtB,GAAIV,EACF,OAAOW,EAAAA,IAACC,EAAAA,eAAA,CAAe,MAAAR,EAAc,cAAAK,CAAA,CAA8B,EAIrE,GAAIR,EACF,MAAM,IAAI,MAAMA,CAAK,EAQvB,OAFgBC,GAAQ,MAAS,MAAM,QAAQA,CAAI,GAAKA,EAAK,SAAW,EAIpEW,EAAAA,KAAC,MAAA,CACC,UAAU,iFACV,cAAY,eAEZ,SAAA,CAAAF,EAAAA,IAAC,IAAA,CAAE,UAAU,cAAc,MAAO,CAAE,MAAO,4BAAA,EACxC,SAAAN,GAAcE,EAAE,yBAAyB,CAAA,CAC5C,EACCD,GACCK,EAAAA,IAAC,IAAA,CAAE,UAAU,cAAc,MAAO,CAAE,MAAO,0BACxC,SAAAL,CAAA,CACH,CAAA,CAAA,CAAA,oBAME,SAAAH,EAAS,CACrB"}