npm - nexabase-report - Versions diffs - 0.2.9 → 0.2.11 - Mend

nexabase-report 0.2.9 → 0.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) hide show

package/examples/integration/integration-jquery.html CHANGED Viewed

@@ -1,142 +1,142 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Reporte - Ejemplo jQuery + nexabase-report</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexabase-report@0.2.8/dist/style.css">
-    <style>
-        body { font-family: system-ui, sans-serif; margin: 20px; background: #f9fafb; }
-        .report-container { height: 800px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: white; }
-        .toolbar { margin-bottom: 12px; display: flex; gap: 8px; }
-        .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
-        .btn-primary { background: #1e40af; color: white; }
-        .btn-success { background: #16a34a; color: white; }
-        .btn-outline { background: white; border: 1px solid #d1d5db; }
-        .info { margin-top: 12px; padding: 12px; background: #eff6ff; border-radius: 6px; font-size: 13px; }
-    </style>
-</head>
-<body>
-    <h2>Reporte de Factura</h2>
-    <div class="toolbar">
-        <button class="btn btn-primary" id="btnPdf">Exportar PDF</button>
-        <button class="btn btn-success" id="btnExcel">Exportar Excel</button>
-        <button class="btn btn-outline" id="btnCsv">Exportar CSV</button>
-        <button class="btn btn-outline" id="btnReload">Recargar</button>
-    </div>
-    <nexa-viewer id="reportViewer"></nexa-viewer>
-    <div class="info">
-        <strong>Datos simulados generados por jQuery/JavaScript:</strong><br>
-        Los datos de factura e items son construidos dinámicamente en el cliente.
-    </div>
-    <script src="https://cdn.jsdelivr.net/npm/nexabase-report@0.2.8/dist/nexabase-report.umd.js"></script>
-    <script>
-    $(function() {
-        // Registrar el custom element una vez
-        NexaReport.registerNexaReport();
-        // Datos simulados (como vendrían de un API en .NET)
-        var facturaData = {
-            numeroFactura: "FV-2026-00456",
-            fecha: "2026-05-09",
-            nombreCliente: "CLIENTE EJEMPLO S.A.S.",
-            nitCliente: "900.987.654-3",
-            direccionCliente: "Carrera 15 # 88-40, Bogotá D.C.",
-            formaPago: "Crédito 30 días",
-            vendedor: "Carlos Mendoza"
-        };
-        var itemsData = [
-            { codigo: "P-001", descripcion: "Portátil HP ProBook 450 G10", cantidad: 2, precioUnitario: 3250000, descuentoPorcentaje: 5, subtotal: 6175000 },
-            { codigo: "P-002", descripcion: "Monitor Dell 27'' UltraSharp", cantidad: 2, precioUnitario: 1450000, descuentoPorcentaje: 0, subtotal: 2900000 },
-            { codigo: "P-003", descripcion: "Teclado mecánico Logitech MX", cantidad: 5, precioUnitario: 285000, descuentoPorcentaje: 10, subtotal: 1282500 },
-            { codigo: "P-004", descripcion: "Mouse wireless Logitech MX Master 3", cantidad: 5, precioUnitario: 380000, descuentoPorcentaje: 10, subtotal: 1710000 },
-            { codigo: "P-005", descripcion: "Webcam Logitech Brio 4K", cantidad: 3, precioUnitario: 650000, descuentoPorcentaje: 0, subtotal: 1950000 },
-            { codigo: "P-006", descripcion: "Docking station Dell WD19TBS", cantidad: 2, precioUnitario: 890000, descuentoPorcentaje: 5, subtotal: 1691000 }
-        ];
-        var definition = {
-            metadata: {
-                name: "Factura de Venta",
-                author: "Sistema .NET",
-                createdAt: new Date().toISOString()
-            },
-            layout: {
-                page: { format: "A4", orientation: "portrait", margins: { top: 1.5, right: 1, bottom: 1, left: 1 } },
-                bands: [
-                    {
-                        id: "rh_factura", type: "ReportHeader", height: 250,
-                        elements: [
-                            { id: "t_titulo", type: "Text", x: 20, y: 10, width: 300, height: 24, content: "MI EMPRESA S.A.", style: { fontSize: "20px", fontWeight: "bold", color: "#1e3a8a" } },
-                            { id: "t_num", type: "Text", x: 450, y: 10, width: 210, height: 24, content: "FACTURA N° {{numeroFactura}}", style: { fontSize: "18px", fontWeight: "bold", color: "#1e40af", textAlign: "right" } },
-                            { id: "t_cliente", type: "Text", x: 20, y: 112, width: 280, height: 16, content: "{{nombreCliente}}", style: { fontSize: "12px", color: "#1e293b" } },
-                            { id: "t_nit", type: "Text", x: 20, y: 130, width: 200, height: 14, content: "NIT: {{nitCliente}}", style: { fontSize: "11px", color: "#64748b" } },
-                            { id: "t_direccion", type: "Text", x: 20, y: 146, width: 350, height: 14, content: "{{direccionCliente}}", style: { fontSize: "11px", color: "#64748b" } },
-                            { id: "t_fecha", type: "Text", x: 450, y: 58, width: 210, height: 14, content: "Fecha: {{fecha}}", style: { fontSize: "11px", color: "#64748b", textAlign: "right" } },
-                            { id: "t_vendedor", type: "Text", x: 480, y: 130, width: 180, height: 14, content: "Vendedor: {{vendedor}}", style: { fontSize: "11px", color: "#475569", textAlign: "right" } }
-                        ]
-                    },
-                    {
-                        id: "db_items", type: "DataBand", height: 280, dataSource: "items",
-                        elements: [
-                            {
-                                id: "table_items", type: "Table", x: 0, y: 30, width: 680, height: 240,
-                                tableColumns: [
-                                    { id: "c1", title: "Código", width: 80, binding: "codigo" },
-                                    { id: "c2", title: "Producto", width: 260, binding: "descripcion" },
-                                    { id: "c3", title: "Cant.", width: 70, binding: "cantidad" },
-                                    { id: "c4", title: "Precio Unit.", width: 110, binding: "precioUnitario" },
-                                    { id: "c5", title: "Desc.", width: 60, binding: "descuentoPorcentaje" },
-                                    { id: "c6", title: "Subtotal", width: 100, binding: "subtotal" }
-                                ],
-                                tableShowFooter: true,
-                                style: { fontSize: "11px" }
-                            }
-                        ]
-                    },
-                    {
-                        id: "rf_totales", type: "ReportFooter", height: 120,
-                        elements: [
-                            { id: "t_subtotal_label", type: "Text", x: 400, y: 8, width: 120, height: 18, content: "Subtotal:", style: { fontSize: "12px", fontWeight: "bold", textAlign: "right" } },
-                            { id: "t_subtotal_val", type: "Text", x: 530, y: 8, width: 150, height: 18, content: "${[sum(subtotal)]}", style: { fontSize: "12px", textAlign: "right" } },
-                            { id: "t_total_label", type: "Text", x: 400, y: 76, width: 120, height: 28, content: "TOTAL:", style: { fontSize: "16px", fontWeight: "bold", color: "#1e3a8a", textAlign: "right" } },
-                            { id: "t_total_val", type: "Text", x: 530, y: 76, width: 150, height: 28, content: "${[sum(subtotal) * 1.19]}", style: { fontSize: "18px", fontWeight: "bold", color: "#1e3a8a", textAlign: "right" } }
-                        ]
-                    },
-                    {
-                        id: "pf_pagina", type: "PageFooter", height: 30,
-                        elements: [
-                            { id: "t_pagina", type: "Text", x: 0, y: 8, width: 680, height: 16, content: "Página {{Page}} de {{TotalPages}}", style: { fontSize: "9px", color: "#94a3b8", textAlign: "center" } }
-                        ]
-                    }
-                ],
-                watermark: { text: "", opacity: 0 }
-            },
-            dataSources: [
-                { id: "ds_factura", alias: "factura", enabled: true, isManual: true, manualData: [facturaData] },
-                { id: "ds_items", alias: "items", enabled: true, isManual: true, manualData: itemsData }
-            ],
-            documentType: "Report"
-        };
-        // Asignar al viewer
-        var viewer = document.getElementById('reportViewer');
-        viewer.definition = definition;
-        viewer.data = { factura: [facturaData], items: itemsData };
-        // Botones
-        $('#btnPdf').click(function() { viewer.exportPdf(); });
-        $('#btnExcel').click(function() { viewer.exportExcel(); });
-        $('#btnCsv').click(function() { viewer.exportCsv(); });
-        $('#btnReload').click(function() {
-            viewer.definition = null;
-            setTimeout(function() { viewer.definition = definition; }, 50);
-        });
-    });
-    </script>
-</body>
-</html>
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reporte - Ejemplo jQuery + nexabase-report</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nexabase-report@0.2.10/dist/style.css">
+    <style>
+        body { font-family: system-ui, sans-serif; margin: 20px; background: #f9fafb; }
+        .report-container { height: 800px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; background: white; }
+        .toolbar { margin-bottom: 12px; display: flex; gap: 8px; }
+        .btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; }
+        .btn-primary { background: #1e40af; color: white; }
+        .btn-success { background: #16a34a; color: white; }
+        .btn-outline { background: white; border: 1px solid #d1d5db; }
+        .info { margin-top: 12px; padding: 12px; background: #eff6ff; border-radius: 6px; font-size: 13px; }
+    </style>
+</head>
+<body>
+    <h2>Reporte de Factura</h2>
+    <div class="toolbar">
+        <button class="btn btn-primary" id="btnPdf">Exportar PDF</button>
+        <button class="btn btn-success" id="btnExcel">Exportar Excel</button>
+        <button class="btn btn-outline" id="btnCsv">Exportar CSV</button>
+        <button class="btn btn-outline" id="btnReload">Recargar</button>
+    </div>
+    <nexa-viewer id="reportViewer"></nexa-viewer>
+    <div class="info">
+        <strong>Datos simulados generados por jQuery/JavaScript:</strong><br>
+        Los datos de factura e items son construidos dinámicamente en el cliente.
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/nexabase-report@0.2.10/dist/nexabase-report.umd.js"></script>
+    <script>
+    $(function() {
+        // Registrar el custom element una vez
+        NexaReport.registerNexaReport();
+        // Datos simulados (como vendrían de un API en .NET)
+        var facturaData = {
+            numeroFactura: "FV-2026-00456",
+            fecha: "2026-05-09",
+            nombreCliente: "CLIENTE EJEMPLO S.A.S.",
+            nitCliente: "900.987.654-3",
+            direccionCliente: "Carrera 15 # 88-40, Bogotá D.C.",
+            formaPago: "Crédito 30 días",
+            vendedor: "Carlos Mendoza"
+        };
+        var itemsData = [
+            { codigo: "P-001", descripcion: "Portátil HP ProBook 450 G10", cantidad: 2, precioUnitario: 3250000, descuentoPorcentaje: 5, subtotal: 6175000 },
+            { codigo: "P-002", descripcion: "Monitor Dell 27'' UltraSharp", cantidad: 2, precioUnitario: 1450000, descuentoPorcentaje: 0, subtotal: 2900000 },
+            { codigo: "P-003", descripcion: "Teclado mecánico Logitech MX", cantidad: 5, precioUnitario: 285000, descuentoPorcentaje: 10, subtotal: 1282500 },
+            { codigo: "P-004", descripcion: "Mouse wireless Logitech MX Master 3", cantidad: 5, precioUnitario: 380000, descuentoPorcentaje: 10, subtotal: 1710000 },
+            { codigo: "P-005", descripcion: "Webcam Logitech Brio 4K", cantidad: 3, precioUnitario: 650000, descuentoPorcentaje: 0, subtotal: 1950000 },
+            { codigo: "P-006", descripcion: "Docking station Dell WD19TBS", cantidad: 2, precioUnitario: 890000, descuentoPorcentaje: 5, subtotal: 1691000 }
+        ];
+        var definition = {
+            metadata: {
+                name: "Factura de Venta",
+                author: "Sistema .NET",
+                createdAt: new Date().toISOString()
+            },
+            layout: {
+                page: { format: "A4", orientation: "portrait", margins: { top: 1.5, right: 1, bottom: 1, left: 1 } },
+                bands: [
+                    {
+                        id: "rh_factura", type: "ReportHeader", height: 250,
+                        elements: [
+                            { id: "t_titulo", type: "Text", x: 20, y: 10, width: 300, height: 24, content: "MI EMPRESA S.A.", style: { fontSize: "20px", fontWeight: "bold", color: "#1e3a8a" } },
+                            { id: "t_num", type: "Text", x: 450, y: 10, width: 210, height: 24, content: "FACTURA N° {{numeroFactura}}", style: { fontSize: "18px", fontWeight: "bold", color: "#1e40af", textAlign: "right" } },
+                            { id: "t_cliente", type: "Text", x: 20, y: 112, width: 280, height: 16, content: "{{nombreCliente}}", style: { fontSize: "12px", color: "#1e293b" } },
+                            { id: "t_nit", type: "Text", x: 20, y: 130, width: 200, height: 14, content: "NIT: {{nitCliente}}", style: { fontSize: "11px", color: "#64748b" } },
+                            { id: "t_direccion", type: "Text", x: 20, y: 146, width: 350, height: 14, content: "{{direccionCliente}}", style: { fontSize: "11px", color: "#64748b" } },
+                            { id: "t_fecha", type: "Text", x: 450, y: 58, width: 210, height: 14, content: "Fecha: {{fecha}}", style: { fontSize: "11px", color: "#64748b", textAlign: "right" } },
+                            { id: "t_vendedor", type: "Text", x: 480, y: 130, width: 180, height: 14, content: "Vendedor: {{vendedor}}", style: { fontSize: "11px", color: "#475569", textAlign: "right" } }
+                        ]
+                    },
+                    {
+                        id: "db_items", type: "DataBand", height: 280, dataSource: "items",
+                        elements: [
+                            {
+                                id: "table_items", type: "Table", x: 0, y: 30, width: 680, height: 240,
+                                tableColumns: [
+                                    { id: "c1", title: "Código", width: 80, binding: "codigo" },
+                                    { id: "c2", title: "Producto", width: 260, binding: "descripcion" },
+                                    { id: "c3", title: "Cant.", width: 70, binding: "cantidad" },
+                                    { id: "c4", title: "Precio Unit.", width: 110, binding: "precioUnitario" },
+                                    { id: "c5", title: "Desc.", width: 60, binding: "descuentoPorcentaje" },
+                                    { id: "c6", title: "Subtotal", width: 100, binding: "subtotal" }
+                                ],
+                                tableShowFooter: true,
+                                style: { fontSize: "11px" }
+                            }
+                        ]
+                    },
+                    {
+                        id: "rf_totales", type: "ReportFooter", height: 120,
+                        elements: [
+                            { id: "t_subtotal_label", type: "Text", x: 400, y: 8, width: 120, height: 18, content: "Subtotal:", style: { fontSize: "12px", fontWeight: "bold", textAlign: "right" } },
+                            { id: "t_subtotal_val", type: "Text", x: 530, y: 8, width: 150, height: 18, content: "${[sum(subtotal)]}", style: { fontSize: "12px", textAlign: "right" } },
+                            { id: "t_total_label", type: "Text", x: 400, y: 76, width: 120, height: 28, content: "TOTAL:", style: { fontSize: "16px", fontWeight: "bold", color: "#1e3a8a", textAlign: "right" } },
+                            { id: "t_total_val", type: "Text", x: 530, y: 76, width: 150, height: 28, content: "${[sum(subtotal) * 1.19]}", style: { fontSize: "18px", fontWeight: "bold", color: "#1e3a8a", textAlign: "right" } }
+                        ]
+                    },
+                    {
+                        id: "pf_pagina", type: "PageFooter", height: 30,
+                        elements: [
+                            { id: "t_pagina", type: "Text", x: 0, y: 8, width: 680, height: 16, content: "Página {{Page}} de {{TotalPages}}", style: { fontSize: "9px", color: "#94a3b8", textAlign: "center" } }
+                        ]
+                    }
+                ],
+                watermark: { text: "", opacity: 0 }
+            },
+            dataSources: [
+                { id: "ds_factura", alias: "factura", enabled: true, isManual: true, manualData: [facturaData] },
+                { id: "ds_items", alias: "items", enabled: true, isManual: true, manualData: itemsData }
+            ],
+            documentType: "Report"
+        };
+        // Asignar al viewer
+        var viewer = document.getElementById('reportViewer');
+        viewer.definition = definition;
+        viewer.data = { factura: [facturaData], items: itemsData };
+        // Botones
+        $('#btnPdf').click(function() { viewer.exportPdf(); });
+        $('#btnExcel').click(function() { viewer.exportExcel(); });
+        $('#btnCsv').click(function() { viewer.exportCsv(); });
+        $('#btnReload').click(function() {
+            viewer.definition = null;
+            setTimeout(function() { viewer.definition = definition; }, 50);
+        });
+    });
+    </script>
+</body>
+</html>

package/examples/integration-angular.html CHANGED Viewed

@@ -1,99 +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>
+<!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>