nexabase-report 0.2.1 → 0.2.4

package/dist/style.css

@@ -2489,6 +2489,67 @@ html, body, #app {
   font-style: italic;
 }
 
+/* Table footer styles for nexabase-report viewer */
+.nexa-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 11px;
+}
+
+.nexa-table thead tr {
+  background: #f1f5f9;
+  border-bottom: 2px solid var(--nd-border-strong, #e2e8f0);
+}
+
+.nexa-table th {
+  padding: 6px 8px;
+  font-weight: 600;
+  color: var(--nd-text, #1e293b);
+  text-align: left;
+  border-right: 1px solid var(--nd-border, #e2e8f0);
+}
+
+.nexa-table th:last-child { border-right: none; }
+
+.nexa-table td {
+  padding: 5px 8px;
+  border-right: 1px solid var(--nd-border, #e2e8f0);
+  border-bottom: 1px solid var(--nd-border, #e2e8f0);
+  color: #475569;
+}
+
+.nexa-table td:last-child { border-right: none; }
+
+.nexa-table tfoot tr {
+  background: #f8fafc;
+  border-top: 2px solid #94a3b8;
+}
+
+.nexa-table-footer td {
+  font-weight: 600;
+  color: #1e3a8a;
+  background: #f1f5f9;
+}
+
+.nexa-table-group-header td {
+  font-weight: 700;
+  background: #e0e7ff;
+  color: #1e3a8a;
+  font-size: 12px;
+  padding: 4px 8px;
+}
+
+.nexa-table-group-footer td {
+  font-weight: 600;
+  background: #f1f5f9;
+  color: #374151;
+  border-top: 1px solid #cbd5e1;
+}
+
+.nexa-footer-val {
+  font-family: 'Courier New', monospace;
+}
+
 .nd-footer {
   height: 30px;
   background: var(--nd-surface);

package/examples/factura_de_recolecci/303/263n_de_residuos.json

@@ -0,0 +1,528 @@
+{
+  "metadata": {
+    "version": "1.0",
+    "name": "Factura de Recolección de Residuos",
+    "description": "Ejemplo de factura ambiental con datos del cliente, detalle de residuos recolectados y tarifas aplicadas. Usa tres DataSources manuales relacionados por nofactura.",
+    "author": "NexaBase",
+    "createdAt": "2025-05-01T00:00:00.000Z"
+  },
+  "layout": {
+    "page": {
+      "format": "A4",
+      "orientation": "portrait",
+      "margins": {
+        "top": 1,
+        "right": 0.5,
+        "bottom": 1,
+        "left": 0.5
+      }
+    },
+    "bands": [
+      {
+        "id": "rh_factura",
+        "type": "ReportHeader",
+        "height": 230,
+        "elements": [
+          {
+            "id": "rect_header",
+            "type": "Rectangle",
+            "x": 0,
+            "y": 0,
+            "width": 720,
+            "height": 120,
+            "shapeType": "Rectangle",
+            "options": {
+              "lineColor": "#1e40af",
+              "strokeWidth": 2,
+              "fillColor": "#f8fafc"
+            }
+          },
+          {
+            "id": "t_titulo",
+            "type": "Text",
+            "x": 20,
+            "y": 15,
+            "width": 400,
+            "height": 28,
+            "content": "FACTURA DE RECOLECCIÓN",
+            "style": {
+              "fontSize": "18px",
+              "fontWeight": "bold",
+              "color": "#1e3a8a"
+            }
+          },
+          {
+            "id": "t_nofactura",
+            "type": "Text",
+            "x": 500,
+            "y": 15,
+            "width": 200,
+            "height": 24,
+            "content": "N° {{nofactura}}",
+            "style": {
+              "fontSize": "16px",
+              "fontWeight": "bold",
+              "color": "#1e40af",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_razon",
+            "type": "Text",
+            "x": 20,
+            "y": 50,
+            "width": 350,
+            "height": 18,
+            "content": "{{nombre}}",
+            "style": {
+              "fontSize": "14px",
+              "fontWeight": "bold",
+              "color": "#0f172a"
+            }
+          },
+          {
+            "id": "t_nit",
+            "type": "Text",
+            "x": 20,
+            "y": 70,
+            "width": 250,
+            "height": 16,
+            "content": "NIT: {{nit}}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#475569"
+            }
+          },
+          {
+            "id": "t_direccion",
+            "type": "Text",
+            "x": 20,
+            "y": 88,
+            "width": 350,
+            "height": 16,
+            "content": "{{direccion}}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b"
+            }
+          },
+          {
+            "id": "t_ciudad",
+            "type": "Text",
+            "x": 20,
+            "y": 104,
+            "width": 250,
+            "height": 16,
+            "content": "{{ciudad}}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b"
+            }
+          },
+          {
+            "id": "line_div",
+            "type": "Line",
+            "x": 0,
+            "y": 125,
+            "width": 720,
+            "height": 2,
+            "shapeType": "Line",
+            "options": {
+              "lineColor": "#1e40af",
+              "strokeWidth": 2
+            }
+          },
+          {
+            "id": "t_fecha",
+            "type": "Text",
+            "x": 500,
+            "y": 130,
+            "width": 200,
+            "height": 16,
+            "content": "Fecha: {{fechaRecoleccion}}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b",
+              "textAlign": "right"
+            }
+          }
+        ]
+      },
+      {
+        "id": "db_residuos",
+        "type": "DataBand",
+        "height": 180,
+        "dataSource": "residuos",
+        "elements": [
+          {
+            "id": "t_items_title",
+            "type": "Text",
+            "x": 0,
+            "y": 5,
+            "width": 300,
+            "height": 20,
+            "content": "Detalle de Residuos Recolectados",
+            "style": {
+              "fontSize": "13px",
+              "fontWeight": "bold",
+              "color": "#1e3a8a"
+            }
+          },
+          {
+            "id": "table_residuos",
+            "type": "Table",
+            "x": 0,
+            "y": 30,
+            "width": 720,
+            "height": 140,
+            "tableColumns": [
+              {
+                "id": "col1",
+                "title": "Fecha Recolección",
+                "width": 140,
+                "binding": "fechaRecoleccion"
+              },
+              {
+                "id": "col2",
+                "title": "Nombre del Residuo",
+                "width": 280,
+                "binding": "nombreResiduo",
+                "groupHeaderText": "{[UPPER(groupKey)]}",
+                "groupFooterText": "Subtotal {[groupKey]}: {sum(cantidad)} kg"
+              },
+              {
+                "id": "col3",
+                "title": "Cantidad (kg)",
+                "width": 120,
+                "binding": "cantidad",
+                "footerText": "Total: {[sum(cantidad)]}"
+              },
+              {
+                "id": "col4",
+                "title": "Doc. Relacionado",
+                "width": 160,
+                "binding": "documentoRelacionado"
+              }
+            ],
+            "tableShowFooter": true,
+            "tableShowGroupHeader": true,
+            "tableShowGroupFooter": true,
+            "tableGroupBy": "nombreResiduo",
+            "style": {
+              "fontSize": "11px"
+            }
+          }
+        ]
+      },
+      {
+        "id": "db_tarifas",
+        "type": "DataBand",
+        "height": 160,
+        "dataSource": "tarifas",
+        "elements": [
+          {
+            "id": "t_tarifas_title",
+            "type": "Text",
+            "x": 0,
+            "y": 5,
+            "width": 300,
+            "height": 20,
+            "content": "Tarifas Aplicadas",
+            "style": {
+              "fontSize": "13px",
+              "fontWeight": "bold",
+              "color": "#1e3a8a"
+            }
+          },
+          {
+            "id": "table_tarifas",
+            "type": "Table",
+            "x": 0,
+            "y": 30,
+            "width": 720,
+            "height": 110,
+            "tableColumns": [
+              {
+                "id": "col1",
+                "title": "Residuo",
+                "width": 240,
+                "binding": "residuo"
+              },
+              {
+                "id": "col2",
+                "title": "Tipo Tarifa",
+                "width": 140,
+                "binding": "tipoTarifa"
+              },
+              {
+                "id": "col3",
+                "title": "Precio Unit.",
+                "width": 120,
+                "binding": "precio"
+              },
+              {
+                "id": "col4",
+                "title": "Kilos Mínimos",
+                "width": 100,
+                "binding": "kilosMinimos"
+              },
+              {
+                "id": "col5",
+                "title": "Fact. Mínima",
+                "width": 100,
+                "binding": "facturacionMinima"
+              }
+            ],
+            "style": {
+              "fontSize": "11px"
+            }
+          }
+        ]
+      },
+      {
+        "id": "rf_totales",
+        "type": "ReportFooter",
+        "height": 100,
+        "elements": [
+          {
+            "id": "line_footer",
+            "type": "Line",
+            "x": 300,
+            "y": 0,
+            "width": 400,
+            "height": 1,
+            "shapeType": "Line",
+            "options": {
+              "lineColor": "#94a3b8",
+              "strokeWidth": 1
+            }
+          },
+          {
+            "id": "t_resumen",
+            "type": "Text",
+            "x": 350,
+            "y": 10,
+            "width": 150,
+            "height": 20,
+            "content": "Subtotal:",
+            "style": {
+              "fontSize": "12px",
+              "fontWeight": "bold",
+              "color": "#374151",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_subtotal_val",
+            "type": "Text",
+            "x": 510,
+            "y": 10,
+            "width": 180,
+            "height": 20,
+            "content": "${[sum(precio) * cantidad]}",
+            "style": {
+              "fontSize": "12px",
+              "color": "#1e40af",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_iva_label",
+            "type": "Text",
+            "x": 350,
+            "y": 32,
+            "width": 150,
+            "height": 18,
+            "content": "Total Items:",
+            "style": {
+              "fontSize": "11px",
+              "color": "#64748b",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_total_items",
+            "type": "Text",
+            "x": 510,
+            "y": 32,
+            "width": 180,
+            "height": 18,
+            "content": "${[count(nofactura)]}",
+            "style": {
+              "fontSize": "11px",
+              "color": "#475569",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "line_total",
+            "type": "Line",
+            "x": 350,
+            "y": 55,
+            "width": 340,
+            "height": 2,
+            "shapeType": "Line",
+            "options": {
+              "lineColor": "#1e40af",
+              "strokeWidth": 2
+            }
+          },
+          {
+            "id": "t_total_label",
+            "type": "Text",
+            "x": 350,
+            "y": 60,
+            "width": 150,
+            "height": 24,
+            "content": "TOTAL A PAGAR:",
+            "style": {
+              "fontSize": "14px",
+              "fontWeight": "bold",
+              "color": "#1e3a8a",
+              "textAlign": "right"
+            }
+          },
+          {
+            "id": "t_total_val",
+            "type": "Text",
+            "x": 510,
+            "y": 60,
+            "width": 180,
+            "height": 24,
+            "content": "${[sum(precio) * cantidad]}",
+            "style": {
+              "fontSize": "16px",
+              "fontWeight": "bold",
+              "color": "#1e40af",
+              "textAlign": "right"
+            }
+          }
+        ]
+      },
+      {
+        "id": "pf_factura",
+        "type": "PageFooter",
+        "height": 30,
+        "elements": [
+          {
+            "id": "t_pagina",
+            "type": "Text",
+            "x": 0,
+            "y": 8,
+            "width": 720,
+            "height": 16,
+            "content": "Página {{Page}} de {{TotalPages}} — Generado: {{Now}}",
+            "style": {
+              "fontSize": "9px",
+              "color": "#94a3b8",
+              "textAlign": "center"
+            }
+          }
+        ]
+      }
+    ],
+    "watermark": {
+      "text": "BORRADOR",
+      "opacity": 0.15,
+      "rotation": -45,
+      "color": "#cccccc",
+      "position": "center",
+      "pages": "all",
+      "behindContent": true
+    },
+    "generateTOC": false
+  },
+  "dataSources": [
+    {
+      "id": "ds_cliente",
+      "collection": "",
+      "alias": "cliente",
+      "enabled": true,
+      "isManual": true,
+      "manualData": [
+        {
+          "nofactura": "34",
+          "nombre": "CLIENTE EJEMPLO S.A.S.",
+          "nit": "900.123.456-7",
+          "direccion": "Calle 100 # 15-20",
+          "ciudad": "Bogotá D.C.",
+          "fechaRecoleccion": "2025-05-01"
+        }
+      ]
+    },
+    {
+      "id": "ds_residuos",
+      "collection": "",
+      "alias": "residuos",
+      "enabled": true,
+      "isManual": true,
+      "manualData": [
+        {
+          "nofactura": "34",
+          "fechaRecoleccion": "2025-05-01",
+          "nombreResiduo": "ÁCIDO CLORHÍDRICO",
+          "cantidad": 5,
+          "documentoRelacionado": "25"
+        },
+        {
+          "nofactura": "34",
+          "fechaRecoleccion": "2025-05-02",
+          "nombreResiduo": "ÁCIDO CLORHÍDRICO",
+          "cantidad": 3,
+          "documentoRelacionado": "26"
+        },
+        {
+          "nofactura": "34",
+          "fechaRecoleccion": "2025-05-01",
+          "nombreResiduo": "BIO SANITARIOS",
+          "cantidad": 5,
+          "documentoRelacionado": "28"
+        },
+        {
+          "nofactura": "34",
+          "fechaRecoleccion": "2025-05-03",
+          "nombreResiduo": "BIO SANITARIOS",
+          "cantidad": 2,
+          "documentoRelacionado": "30"
+        },
+        {
+          "nofactura": "34",
+          "fechaRecoleccion": "2025-05-01",
+          "nombreResiduo": "CLORURO FÉRRICO",
+          "cantidad": 8,
+          "documentoRelacionado": "31"
+        }
+      ]
+    },
+    {
+      "id": "ds_tarifas",
+      "collection": "",
+      "alias": "tarifas",
+      "enabled": true,
+      "isManual": true,
+      "manualData": [
+        {
+          "nofactura": "34",
+          "facturacionMinima": 0,
+          "kilosMinimos": 0,
+          "precio": 52200,
+          "residuo": "ÁCIDO CLORHÍDRICO",
+          "tipoTarifa": "Tarifa x Kilo"
+        },
+        {
+          "nofactura": "34",
+          "facturacionMinima": 0,
+          "kilosMinimos": 0,
+          "precio": 52200,
+          "residuo": "BIO SANITARIOS",
+          "tipoTarifa": "Tarifa x Kilo"
+        }
+      ]
+    }
+  ],
+  "dictionary": {
+    "dataSources": [],
+    "manualFields": []
+  },
+  "documentType": "Report"
+}

package/examples/integration-angular.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>NexaReport — Angular</title>
+  <link rel="stylesheet" href="../dist/style.css">
+  <style>
+    body { margin: 0; font-family: system-ui, sans-serif; }
+    #app { height: 100vh; display: flex; flex-direction: column; }
+    header { padding: 12px 20px; background: #1e293b; color: #fff; display: flex; align-items: center; gap: 12px; }
+    header h1 { margin: 0; font-size: 18px; font-weight: 600; }
+    header small { opacity: 0.7; }
+    nexa-viewer { flex: 1; display: block; }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <header>
+      <h1>NexaReport</h1>
+      <small>Angular · Demo</small>
+    </header>
+    <nexa-viewer id="viewer" minimal></nexa-viewer>
+  </div>
+
+  <script src="https://unpkg.com/@angular/core@18/bundles/core.umd.js"></script>
+  <script src="https://unpkg.com/@angular/common@18/bundles/common.umd.js"></script>
+  <script src="https://unpkg.com/@angular/compiler@18/bundles/compiler.umd.js"></script>
+  <script src="https://unpkg.com/@angular/platform-browser@18/bundles/platform-browser.umd.js"></script>
+  <script src="https://unpkg.com/@angular/platform-browser-dynamic@18/bundles/platform-browser-dynamic.umd.js"></script>
+  <script src="https://unpkg.com/zone.js@0.14/dist/zone.js"></script>
+  <script src="https://unpkg.com/rxjs@7/dist/bundles/rxjs.umd.js"></script>
+  <script src="../dist/nexabase-report.umd.js"></script>
+  <script>
+    NexaReport.registerNexaReport();
+
+    const reportDef = {
+      metadata: { version: '1', name: 'Clientes', createdAt: new Date().toISOString() },
+      layout: {
+        page: { format: 'A4', orientation: 'portrait', margins: { top: 1, right: 1, bottom: 1, left: 1 } },
+        bands: [
+          { id: 'b_hdr', type: 'ReportHeader', height: 60, elements: [
+            { id: 'e_titulo', type: 'Text', x: 20, y: 10, width: 500, height: 30,
+              content: 'Directorio de Clientes', style: { fontSize: '22px', fontWeight: 'bold' } }
+          ]},
+          { id: 'b_data', type: 'DataBand', height: 30, dataSource: 'main', elements: [
+            { id: 'e_nombre', type: 'Text', x: 20, y: 5, width: 200, height: 20,
+              binding: 'nombre', style: { fontSize: '12px' } },
+            { id: 'e_email', type: 'Text', x: 240, y: 5, width: 250, height: 20,
+              binding: 'email', style: { fontSize: '12px' } },
+            { id: 'e_ciudad', type: 'Text', x: 510, y: 5, width: 150, height: 20,
+              binding: 'ciudad', style: { fontSize: '12px' } }
+          ]},
+          { id: 'b_ftr', type: 'PageFooter', height: 30, elements: [
+            { id: 'e_page', type: 'Text', x: 20, y: 5, width: 200, height: 20,
+              content: 'Página {[Page]} de {[TotalPages]}', style: { fontSize: '10px', color: '#666' } }
+          ]}
+        ]
+      },
+      dataSources: [{ id: 'ds1', collection: '', alias: 'main', enabled: true }]
+    };
+
+    const data = [
+      { nombre: 'Juan Pérez', email: 'juan@mail.com', ciudad: 'Madrid' },
+      { nombre: 'María López', email: 'maria@mail.com', ciudad: 'Barcelona' },
+      { nombre: 'Carlos Ruiz', email: 'carlos@mail.com', ciudad: 'Valencia' },
+    ];
+
+    (function() {
+      const { Component, NgModule } = ng.core;
+      const { BrowserModule } = ng.platformBrowser;
+      const { platformBrowserDynamic } = ng.platformBrowserDynamic;
+      const { CommonModule } = ng.common;
+
+      @Component({
+        selector: 'app-root',
+        template: '<nexa-viewer id="viewer" minimal></nexa-viewer>'
+      })
+      class AppComponent {
+        ngAfterViewInit() {
+          const viewer = document.getElementById('viewer');
+          viewer.definition = reportDef;
+          viewer.data = data;
+        }
+      }
+
+      @NgModule({
+        imports: [BrowserModule],
+        declarations: [AppComponent],
+        schemas: [ng.core.CUSTOM_ELEMENTS_SCHEMA],
+        bootstrap: [AppComponent]
+      })
+      class AppModule {}
+
+      platformBrowserDynamic().bootstrapModule(AppModule);
+    })();
+  </script>
+</body>
+</html>