@ddiazr/data-table 0.0.1

package/README.md

@@ -0,0 +1,169 @@
+# Generic Table
+
+Tabla Dinamica con Angular 21+
+
+## Instalación
+
+```bash
+npm install @ddiazr/data-table
+```
+
+## Peer Dependencies
+
+```bash
+npm i bootstrap @fortawesome/fontawesome-free
+```
+
+## TableColumn && TableAction
+
+```bash
+interface TableAction<T> {
+  label: string;
+  icon?: string;
+  styleClass?: string; // Clases CSS (ej: Bootstrap)
+  callback: (row: T) => void;
+  isVisible?: (row: T) => boolean;
+}
+
+interface TableColumn<T> {
+  key: keyof T | 'actions' | 'select';
+  label: string;
+  isSortable?: boolean;
+  templateRef?: any;
+  dataType?: DataType;
+}
+```
+
+## Campos
+
+| Propiedad       | Tipo               | Obligatorio | Descripción                                           |
+| --------------- | ------------------ | ----------- | ----------------------------------------------------- |
+| `data`          | `any[]`            | ✅ Sí       | Datos de entrada segun el jsonen la tabla             |
+| `columns`       | `ColumnConfig[]`   | ✅ Sí       | Datos de las columnas que quieras que tenga la tabla  |
+| `filterPlaceholder`      | `string`  | ❌ No       | Si necesita cambiar al buscador el placeholder         |
+| `showExportButtons`   | `boolean`    | ❌ No       | Todos los botnes de exportar (EXCEL, PDF O PRINT)          |
+| `actions`       | `TableAction<T>[]` | ❌ No       | Funcion que devuelve la accion segun el columnsConfig |
+
+## Uso básico
+
+```typescript
+import { DataTable } from '@ddiazr/utilt-service';
+
+interface TableAction<T> {
+  label: string;
+  icon?: string;
+  styleClass?: string; // Clases CSS (ej: Bootstrap)
+  callback: (row: T) => void;
+  isVisible?: (row: T) => boolean;
+}
+
+interface TableColumn<T> {
+  key: keyof T | 'actions' | 'select';
+  label: string;
+  isSortable?: boolean;
+  templateRef?: any;
+  dataType?: DataType;
+}
+@Component({
+  imports: [DataTable],
+  template: `
+    <tbl-generic-drag-and-drop
+      [data]="data()"
+      [columns]="columns()"      
+      [actions]="actions()"
+      filterPlaceholder='BUSCAR POR'
+      [showExportButtons]="true"
+    />
+  `,
+})
+export class AppComponent {
+  
+  data = signal<any[]>([
+    {
+      id: 1,
+      nombre: 'Juan Perez',
+      edad: 36,
+      salario: 1000,
+      fechanac: '21/07/1700',
+    },
+    {
+      id: 2,
+      nombre: 'Juana Perez',
+      edad: 14,
+      salario: 2000,
+      fechanac: '21/07/1700',
+    },
+  ]);
+  //DECALRAMOS LAS COLUMNAS QUE VA A CONTENER LA TABLA
+  columns = signal<TableColumn[]>([
+   {
+      key: 'id',
+      label: 'ID',
+    },
+    {
+      key: 'nombre',
+      label: 'Nombre',
+      isSortable: true,
+    },
+    {
+      key: 'edad',
+      label: 'Edad',
+      isSortable: true,
+      dataType: 'number',
+    },
+    {
+      key: 'salario',
+      label: 'Salario',
+      isSortable: true,
+      dataType: 'currency',
+    },
+    {
+      key: 'fechanac',
+      label: 'F. Nac',
+      isSortable: true,
+      dataType: 'date',
+    },
+  ]);
+
+  // SI SE NECESITA QUE LA TABLA TENGA BOTONES PARA N ACCIONES
+  // SE MUESTRA ESTE EJEMPLO QUE TIENE DOS ACCIONES
+  // 1. MUESTRA EL BOTON EDIT SI LA EDAD ES > 18
+  // 2. MUESTRA EL BOTON SIN RESTRICCION
+  actions = signal<TableAction<any>[]>([
+    {
+      label: 'Edit',
+      icon: 'fa fa-edit',
+      styleClass: 'btn-warning',
+      showIf: (row) => row.edad > 18,
+      callback: (row) => this.edit(row),
+    },
+    {
+      label: 'VER',
+      icon: 'fa fa-edit',
+      styleClass: 'btn-warning',
+      callback: (row) => this.ver(row.id),
+    },
+  ]);
+}
+```
+
+## Configuración de estilos
+
+En tu `angular.json`:
+
+```json
+"styles": [
+  "node_modules/bootstrap/dist/css/bootstrap.min.css",
+  "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+]
+```
+
+## Licencia
+
+MIT
+
+# Source files
+
+src/
+_.ts
+!_.d.ts

package/fesm2022/ddiazr-data-table.mjs

@@ -0,0 +1,234 @@
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Pipe, input, output, signal, computed, Component } from '@angular/core';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+class SafeDatePipe {
+    transform(value) {
+        if (!value)
+            return "";
+        const date = new Date(value);
+        if (isNaN(date.getTime()))
+            return value;
+        const day = String(date.getDate()).padStart(2, "0");
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const year = date.getFullYear();
+        return `${day}/${month}/${year}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SafeDatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: SafeDatePipe, isStandalone: true, name: "safeDate" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SafeDatePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "safeDate",
+                    standalone: true,
+                    pure: true, // ✅ Muy importante para performance
+                }]
+        }] });
+
+class SafeCurrencyPipe {
+    transform(value) {
+        if (value == null || value === '')
+            return '';
+        const num = Number(value);
+        if (isNaN(num))
+            return value;
+        return 'Q' + num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SafeCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: SafeCurrencyPipe, isStandalone: true, name: "safeCurrency" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SafeCurrencyPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'safeCurrency',
+                    standalone: true,
+                    pure: true
+                }]
+        }] });
+
+class SafeNumberPipe {
+    transform(value) {
+        if (value == null || value === "")
+            return "";
+        const num = Number(value);
+        if (isNaN(num))
+            return value;
+        return num.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SafeNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.1.2", ngImport: i0, type: SafeNumberPipe, isStandalone: true, name: "safeNumber" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: SafeNumberPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "safeNumber",
+                    standalone: true,
+                    pure: true,
+                }]
+        }] });
+
+class DataTable {
+    // ------------------------------------
+    // I. INPUT SIGNALS
+    // ------------------------------------
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : []));
+    actions = input([], ...(ngDevMode ? [{ debugName: "actions" }] : []));
+    filterPlaceholder = input('Buscar...', ...(ngDevMode ? [{ debugName: "filterPlaceholder" }] : []));
+    showExportButtons = input(true, ...(ngDevMode ? [{ debugName: "showExportButtons" }] : []));
+    // ------------------------------------
+    // II. OUTPUTS (Usando la función output())
+    // ------------------------------------
+    actionClicked = output();
+    exportRequested = output();
+    // ------------------------------------
+    // III. ESTADO INTERNO (Signals para Filtrado)
+    // ------------------------------------
+    filterTerm = signal('', ...(ngDevMode ? [{ debugName: "filterTerm" }] : []));
+    sortState = signal({
+        column: null,
+        direction: null,
+    }, ...(ngDevMode ? [{ debugName: "sortState" }] : []));
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : [])); // Página actual, inicia en 1
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : [])); // Elementos por página
+    // 4. Datos filtrados (Computed Signal - LÓGICA DE BÚSQUEDA)
+    filteredData = computed(() => {
+        const term = this.filterTerm().toLowerCase();
+        const currentData = this.data();
+        if (!term)
+            return currentData;
+        return currentData.filter((item) => Object.values(item).some((value) => String(value).toLowerCase().includes(term)));
+    }, ...(ngDevMode ? [{ debugName: "filteredData" }] : []));
+    sortedAndFilteredData = computed(() => {
+        const data = [...this.filteredData()]; // Copia para ordenar
+        const state = this.sortState();
+        if (!state.column || !state.direction) {
+            return data; // Sin ordenamiento
+        }
+        const directionMultiplier = state.direction === 'asc' ? 1 : -1;
+        const columnKey = state.column;
+        return data.sort((a, b) => {
+            // Usamos localeCompare para ordenar strings correctamente, si no, comparación simple
+            const aValue = a[columnKey];
+            const bValue = b[columnKey];
+            if (typeof aValue === 'string' && typeof bValue === 'string') {
+                return aValue.localeCompare(bValue) * directionMultiplier;
+            }
+            if (aValue < bValue) {
+                return -1 * directionMultiplier;
+            }
+            if (aValue > bValue) {
+                return 1 * directionMultiplier;
+            }
+            return 0;
+        });
+    }, ...(ngDevMode ? [{ debugName: "sortedAndFilteredData" }] : []));
+    paginatedData = computed(() => {
+        const data = this.sortedAndFilteredData();
+        const size = this.pageSize();
+        const page = this.currentPage();
+        const start = (page - 1) * size;
+        const end = start + size;
+        // Retorna solo el slice (rebanada) de datos de la página actual
+        return data.slice(start, end);
+    }, ...(ngDevMode ? [{ debugName: "paginatedData" }] : []));
+    totalPages = computed(() => {
+        const totalItems = this.sortedAndFilteredData().length;
+        const size = this.pageSize();
+        return Math.ceil(totalItems / size);
+    }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    pagesToShow = computed(() => {
+        const total = this.totalPages();
+        const current = this.currentPage();
+        const maxPagesToShow = 5; // Máximo de botones numéricos a mostrar
+        const pages = [];
+        // Lógica simple para centrar los botones en la página actual
+        let start = Math.max(1, current - Math.floor(maxPagesToShow / 2));
+        let end = Math.min(total, start + maxPagesToShow - 1);
+        // Ajuste si la tabla es pequeña
+        if (end - start + 1 < maxPagesToShow) {
+            start = Math.max(1, end - maxPagesToShow + 1);
+        }
+        for (let i = start; i <= end; i++) {
+            pages.push(i);
+        }
+        return pages;
+    }, ...(ngDevMode ? [{ debugName: "pagesToShow" }] : []));
+    // ------------------------------------
+    // IV. FUNCIONES
+    // ------------------------------------
+    onSort(columnKey) {
+        // Solo permitir ordenar si no es una columna de acción/selección
+        if (columnKey === 'actions' || columnKey === 'select')
+            return;
+        this.sortState.update((current) => {
+            let newDirection = 'asc';
+            if (current.column === columnKey) {
+                // Mismo column, se alterna la dirección
+                newDirection = current.direction === 'asc' ? 'desc' : 'asc';
+            }
+            return {
+                column: columnKey,
+                direction: newDirection,
+            };
+        });
+    }
+    /**
+     * FUNCIÓN DE BÚSQUEDA
+     * Actualiza el WritableSignal interno.
+     */
+    onSearchChange(term) {
+        this.filterTerm.set(term);
+    }
+    /**
+     * FUNCIÓN DE ACCIONES
+     * Emite el evento usando .emit() del Output Signal.
+     */
+    onActionClick(action, rowData) {
+        this.actionClicked.emit({ action, rowData });
+    }
+    /**
+     * FUNCIÓN DE EXPORTACIÓN
+     * Emite el evento de salida, delegando la lógica al padre.
+     */
+    exportData(format) {
+        this.exportRequested.emit(format);
+    }
+    getConfig(key) {
+        return this.columns().find((c) => c.key === key);
+    }
+    goToPage(page) {
+        const total = this.totalPages();
+        if (page >= 1 && page <= total) {
+            this.currentPage.set(page);
+        }
+    }
+    onPageSizeChange(event) {
+        const target = event.target;
+        const newSize = Number(target.value);
+        this.pageSize.set(newSize);
+        // Reiniciar a la página 1 después de cambiar el tamaño para evitar errores de índice
+        this.currentPage.set(1);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: DataTable, isStandalone: true, selector: "dtbl-data-table", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, filterPlaceholder: { classPropertyName: "filterPlaceholder", publicName: "filterPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showExportButtons: { classPropertyName: "showExportButtons", publicName: "showExportButtons", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked", exportRequested: "exportRequested" }, ngImport: i0, template: "<div class=\"container-fluid pt-3\">\r\n  <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control w-25\"\r\n      [placeholder]=\"filterPlaceholder()\"\r\n      [ngModel]=\"filterTerm()\"\r\n      (ngModelChange)=\"onSearchChange($event)\"\r\n    />\r\n\r\n    @if (showExportButtons()) {\r\n      <div class=\"export-buttons btn-group\" role=\"group\">\r\n        <button class=\"btn btn-outline-success\" (click)=\"exportData('excel')\">\r\n          <i class=\"bi bi-file-earmark-excel\"></i> Exportar a Excel\r\n        </button>\r\n        <button class=\"btn btn-outline-danger\" (click)=\"exportData('pdf')\">\r\n          <i class=\"bi bi-file-earmark-pdf\"></i> Exportar a PDF\r\n        </button>\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"exportData('print')\">\r\n          <i class=\"bi bi-printer\"></i> Imprimir\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"table-responsive\">\r\n    <table class=\"table table-hover table-bordered caption-top\">\r\n      <caption>\r\n        Mostrando\r\n        {{\r\n          paginatedData().length\r\n        }}\r\n        de\r\n        {{\r\n          sortedAndFilteredData().length\r\n        }}\r\n        resultados (Total:\r\n        {{\r\n          data().length\r\n        }}).\r\n      </caption>\r\n\r\n      <thead>\r\n        <tr>\r\n          @for (col of columns(); track col.key) {\r\n            <th\r\n              [class.sortable]=\"col.isSortable\"\r\n              (click)=\"col.isSortable && onSort(col.key)\"\r\n              scope=\"col\"\r\n              class=\"text-nowrap\"\r\n            >\r\n              <div class=\"d-flex align-items-center justify-content-between\">\r\n                <span class=\"fw-bold\">{{ col.label }}</span>\r\n\r\n                @if (col.isSortable) {\r\n                  @if (col.key === sortState().column) {\r\n                    <i\r\n                      class=\"fa-solid ms-1\"\r\n                      [class.fa-sort-up]=\"sortState().direction === 'asc'\"\r\n                      [class.fa-sort-down]=\"sortState().direction === 'desc'\"\r\n                    >\r\n                    </i>\r\n                  } @else {\r\n                    <i class=\"fa-solid fa-sort text-muted ms-1\" style=\"opacity: 0.5\"></i>\r\n                  }\r\n                }\r\n              </div>\r\n            </th>\r\n          }\r\n          @if (actions().length > 0) {\r\n            <th class=\"bg-dark text-center text-white\">Acciones</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n        @for (row of paginatedData(); track row.id || $index) {\r\n          <tr>\r\n            @for (col of columns(); track col.key) {\r\n              <td class=\"text-nowrap\">\r\n                @if (col.templateRef) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      col.templateRef;\r\n                      context: { $implicit: row, column: col.key }\r\n                    \"\r\n                  ></ng-container>\r\n                } @else {\r\n                  <!-- {{ formatCellValue(row, col) }} -->\r\n                  @let config = getConfig(col.key.toString());\r\n                  @switch (config?.dataType) {\r\n                    @case ('date') {\r\n                      {{ $any(row)[col.key] | safeDate }}\r\n                    }\r\n                    @case ('currency') {\r\n                      {{ $any(row)[col.key] | safeCurrency }}\r\n                    }\r\n                    @case ('number') {\r\n                      {{ $any(row)[col.key] | safeNumber }}\r\n                    }\r\n                    @default {\r\n                      {{ $any(row)[col.key] }}\r\n                    }\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n            @if (actions().length > 0) {\r\n              <td class=\"text-center\">\r\n                @for (action of actions(); track action.label) {\r\n                  @if (!action.isVisible || action.isVisible(row)) {\r\n                    <button\r\n                      [class]=\"'btn btn-sm mx-1 ' + action.styleClass\"\r\n                      (click)=\"action.callback(row)\"\r\n                    >\r\n                      <i [class]=\"action.icon\"></i>\r\n                    </button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        } @empty {\r\n          <tr>\r\n            <td [attr.colspan]=\"columns().length\" class=\"text-center\">\r\n              No hay datos disponibles para mostrar.\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <label for=\"pageSizeSelect\" class=\"me-2 text-nowrap\">Art\u00EDculos por p\u00E1gina: </label>\r\n      <select\r\n        id=\"pageSizeSelect\"\r\n        class=\"form-select form-select-sm w-auto\"\r\n        (change)=\"onPageSizeChange($event)\"\r\n      >\r\n        <option value=\"10\" [selected]=\"pageSize() === 10\">10</option>\r\n        <option value=\"25\" [selected]=\"pageSize() === 25\">25</option>\r\n        <option value=\"50\" [selected]=\"pageSize() === 50\">50</option>\r\n        <option value=\"100\" [selected]=\"pageSize() === 100\">100</option>\r\n      </select>\r\n    </div>\r\n\r\n    <nav aria-label=\"Paginaci\u00F3n de tabla\">\r\n      <ul class=\"pagination pagination-md mb-0\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage() === 1\">\r\n          <button type=\"button\" class=\"page-link\" (click)=\"goToPage(currentPage() - 1)\"><<</button>\r\n        </li>\r\n\r\n        @for (pageNumber of pagesToShow(); track pageNumber) {\r\n          <li class=\"page-item\" [class.active]=\"currentPage() === pageNumber\">\r\n            <button type=\"button\" class=\"page-link\" (click)=\"goToPage(pageNumber)\">\r\n              {{ pageNumber }}\r\n            </button>\r\n          </li>\r\n        }\r\n\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage() === totalPages()\">\r\n          <button type=\"button\" class=\"page-link\" (click)=\"goToPage(currentPage() + 1)\">>></button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SafeDatePipe, name: "safeDate" }, { kind: "pipe", type: SafeCurrencyPipe, name: "safeCurrency" }, { kind: "pipe", type: SafeNumberPipe, name: "safeNumber" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: DataTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'dtbl-data-table', imports: [CommonModule, FormsModule, SafeDatePipe, SafeCurrencyPipe, SafeNumberPipe], template: "<div class=\"container-fluid pt-3\">\r\n  <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control w-25\"\r\n      [placeholder]=\"filterPlaceholder()\"\r\n      [ngModel]=\"filterTerm()\"\r\n      (ngModelChange)=\"onSearchChange($event)\"\r\n    />\r\n\r\n    @if (showExportButtons()) {\r\n      <div class=\"export-buttons btn-group\" role=\"group\">\r\n        <button class=\"btn btn-outline-success\" (click)=\"exportData('excel')\">\r\n          <i class=\"bi bi-file-earmark-excel\"></i> Exportar a Excel\r\n        </button>\r\n        <button class=\"btn btn-outline-danger\" (click)=\"exportData('pdf')\">\r\n          <i class=\"bi bi-file-earmark-pdf\"></i> Exportar a PDF\r\n        </button>\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"exportData('print')\">\r\n          <i class=\"bi bi-printer\"></i> Imprimir\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"table-responsive\">\r\n    <table class=\"table table-hover table-bordered caption-top\">\r\n      <caption>\r\n        Mostrando\r\n        {{\r\n          paginatedData().length\r\n        }}\r\n        de\r\n        {{\r\n          sortedAndFilteredData().length\r\n        }}\r\n        resultados (Total:\r\n        {{\r\n          data().length\r\n        }}).\r\n      </caption>\r\n\r\n      <thead>\r\n        <tr>\r\n          @for (col of columns(); track col.key) {\r\n            <th\r\n              [class.sortable]=\"col.isSortable\"\r\n              (click)=\"col.isSortable && onSort(col.key)\"\r\n              scope=\"col\"\r\n              class=\"text-nowrap\"\r\n            >\r\n              <div class=\"d-flex align-items-center justify-content-between\">\r\n                <span class=\"fw-bold\">{{ col.label }}</span>\r\n\r\n                @if (col.isSortable) {\r\n                  @if (col.key === sortState().column) {\r\n                    <i\r\n                      class=\"fa-solid ms-1\"\r\n                      [class.fa-sort-up]=\"sortState().direction === 'asc'\"\r\n                      [class.fa-sort-down]=\"sortState().direction === 'desc'\"\r\n                    >\r\n                    </i>\r\n                  } @else {\r\n                    <i class=\"fa-solid fa-sort text-muted ms-1\" style=\"opacity: 0.5\"></i>\r\n                  }\r\n                }\r\n              </div>\r\n            </th>\r\n          }\r\n          @if (actions().length > 0) {\r\n            <th class=\"bg-dark text-center text-white\">Acciones</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n        @for (row of paginatedData(); track row.id || $index) {\r\n          <tr>\r\n            @for (col of columns(); track col.key) {\r\n              <td class=\"text-nowrap\">\r\n                @if (col.templateRef) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      col.templateRef;\r\n                      context: { $implicit: row, column: col.key }\r\n                    \"\r\n                  ></ng-container>\r\n                } @else {\r\n                  <!-- {{ formatCellValue(row, col) }} -->\r\n                  @let config = getConfig(col.key.toString());\r\n                  @switch (config?.dataType) {\r\n                    @case ('date') {\r\n                      {{ $any(row)[col.key] | safeDate }}\r\n                    }\r\n                    @case ('currency') {\r\n                      {{ $any(row)[col.key] | safeCurrency }}\r\n                    }\r\n                    @case ('number') {\r\n                      {{ $any(row)[col.key] | safeNumber }}\r\n                    }\r\n                    @default {\r\n                      {{ $any(row)[col.key] }}\r\n                    }\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n            @if (actions().length > 0) {\r\n              <td class=\"text-center\">\r\n                @for (action of actions(); track action.label) {\r\n                  @if (!action.isVisible || action.isVisible(row)) {\r\n                    <button\r\n                      [class]=\"'btn btn-sm mx-1 ' + action.styleClass\"\r\n                      (click)=\"action.callback(row)\"\r\n                    >\r\n                      <i [class]=\"action.icon\"></i>\r\n                    </button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        } @empty {\r\n          <tr>\r\n            <td [attr.colspan]=\"columns().length\" class=\"text-center\">\r\n              No hay datos disponibles para mostrar.\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <label for=\"pageSizeSelect\" class=\"me-2 text-nowrap\">Art\u00EDculos por p\u00E1gina: </label>\r\n      <select\r\n        id=\"pageSizeSelect\"\r\n        class=\"form-select form-select-sm w-auto\"\r\n        (change)=\"onPageSizeChange($event)\"\r\n      >\r\n        <option value=\"10\" [selected]=\"pageSize() === 10\">10</option>\r\n        <option value=\"25\" [selected]=\"pageSize() === 25\">25</option>\r\n        <option value=\"50\" [selected]=\"pageSize() === 50\">50</option>\r\n        <option value=\"100\" [selected]=\"pageSize() === 100\">100</option>\r\n      </select>\r\n    </div>\r\n\r\n    <nav aria-label=\"Paginaci\u00F3n de tabla\">\r\n      <ul class=\"pagination pagination-md mb-0\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage() === 1\">\r\n          <button type=\"button\" class=\"page-link\" (click)=\"goToPage(currentPage() - 1)\"><<</button>\r\n        </li>\r\n\r\n        @for (pageNumber of pagesToShow(); track pageNumber) {\r\n          <li class=\"page-item\" [class.active]=\"currentPage() === pageNumber\">\r\n            <button type=\"button\" class=\"page-link\" (click)=\"goToPage(pageNumber)\">\r\n              {{ pageNumber }}\r\n            </button>\r\n          </li>\r\n        }\r\n\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage() === totalPages()\">\r\n          <button type=\"button\" class=\"page-link\" (click)=\"goToPage(currentPage() + 1)\">>></button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n" }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], filterPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPlaceholder", required: false }] }], showExportButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExportButtons", required: false }] }], actionClicked: [{ type: i0.Output, args: ["actionClicked"] }], exportRequested: [{ type: i0.Output, args: ["exportRequested"] }] } });
+
+/*
+ * Public API Surface of data-table
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DataTable };
+//# sourceMappingURL=ddiazr-data-table.mjs.map

package/fesm2022/ddiazr-data-table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ddiazr-data-table.mjs","sources":["../../../projects/data-table/src/lib/pipes/safe-date.pipe.ts","../../../projects/data-table/src/lib/pipes/safe-currency.pipe.ts","../../../projects/data-table/src/lib/pipes/safe-number.pipe.ts","../../../projects/data-table/src/lib/data-table.ts","../../../projects/data-table/src/lib/data-table.html","../../../projects/data-table/src/public-api.ts","../../../projects/data-table/src/ddiazr-data-table.ts"],"sourcesContent":["import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({\r\n  name: \"safeDate\",\r\n  standalone: true,\r\n  pure: true, // ✅ Muy importante para performance\r\n})\r\nexport class SafeDatePipe implements PipeTransform {\r\n  transform(value: any): string {\r\n    if (!value) return \"\";\r\n    const date = new Date(value);\r\n    if (isNaN(date.getTime())) return value;\r\n\r\n    const day = String(date.getDate()).padStart(2, \"0\");\r\n    const month = String(date.getMonth() + 1).padStart(2, \"0\");\r\n    const year = date.getFullYear();\r\n\r\n    return `${day}/${month}/${year}`;\r\n  }\r\n}\r\n","import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({\r\n  name: 'safeCurrency',\r\n  standalone: true,\r\n  pure: true\r\n})\r\nexport class SafeCurrencyPipe implements PipeTransform {\r\n  transform(value: any): string {\r\n    if (value == null || value === '') return '';\r\n    const num = Number(value);\r\n    if (isNaN(num)) return value;\r\n    \r\n    return 'Q' + num.toFixed(2).replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',');\r\n  }\r\n}","import { Pipe, PipeTransform } from \"@angular/core\";\r\n\r\n@Pipe({\r\n  name: \"safeNumber\",\r\n  standalone: true,\r\n  pure: true,\r\n})\r\nexport class SafeNumberPipe implements PipeTransform {\r\n  transform(value: any): string {\r\n    if (value == null || value === \"\") return \"\";\r\n    const num = Number(value);\r\n    if (isNaN(num)) return value;\r\n\r\n    return num.toFixed(2).replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n  }\r\n}\r\n","import { CommonModule } from '@angular/common';\r\nimport { Component, computed, input, output, signal, WritableSignal } from '@angular/core';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { SortDirection, TableColumn, SortState, TableAction } from './interfaces/table.interface';\r\nimport { SafeDatePipe } from './pipes/safe-date.pipe';\r\nimport { SafeCurrencyPipe } from './pipes/safe-currency.pipe';\r\nimport { SafeNumberPipe } from './pipes/safe-number.pipe';\r\n@Component({\r\n  selector: 'dtbl-data-table',\r\n  imports: [CommonModule, FormsModule, SafeDatePipe, SafeCurrencyPipe, SafeNumberPipe],\r\n  templateUrl: './data-table.html',\r\n  styles: ``,\r\n})\r\nexport class DataTable<T extends { id?: any }> {\r\n  // ------------------------------------\r\n  // I. INPUT SIGNALS\r\n  // ------------------------------------\r\n  public data = input.required<T[]>();\r\n  public columns = input.required<TableColumn<T>[]>();\r\n  public actions = input<TableAction<T>[]>([]);\r\n  public filterPlaceholder = input<string>('Buscar...');\r\n  public showExportButtons = input<boolean>(true);\r\n\r\n  // ------------------------------------\r\n  // II. OUTPUTS (Usando la función output())\r\n  // ------------------------------------\r\n  public actionClicked = output<{ action: string; rowData: T }>();\r\n  public exportRequested = output<'pdf' | 'excel' | 'print'>();\r\n\r\n  // ------------------------------------\r\n  // III. ESTADO INTERNO (Signals para Filtrado)\r\n  // ------------------------------------\r\n\r\n  public filterTerm: WritableSignal<string> = signal('');\r\n  public sortState: WritableSignal<SortState<T>> = signal({\r\n    column: null,\r\n    direction: null,\r\n  });\r\n\r\n  public currentPage: WritableSignal<number> = signal(1); // Página actual, inicia en 1\r\n  public pageSize: WritableSignal<number> = signal(10); // Elementos por página\r\n\r\n  // 4. Datos filtrados (Computed Signal - LÓGICA DE BÚSQUEDA)\r\n  public filteredData = computed(() => {\r\n    const term = this.filterTerm().toLowerCase();\r\n    const currentData = this.data();\r\n\r\n    if (!term) return currentData;\r\n\r\n    return currentData.filter((item) =>\r\n      Object.values(item as object).some((value) => String(value).toLowerCase().includes(term)),\r\n    );\r\n  });\r\n\r\n  public sortedAndFilteredData = computed(() => {\r\n    const data = [...this.filteredData()]; // Copia para ordenar\r\n    const state = this.sortState();\r\n\r\n    if (!state.column || !state.direction) {\r\n      return data; // Sin ordenamiento\r\n    }\r\n\r\n    const directionMultiplier = state.direction === 'asc' ? 1 : -1;\r\n    const columnKey = state.column as keyof T;\r\n\r\n    return data.sort((a, b) => {\r\n      // Usamos localeCompare para ordenar strings correctamente, si no, comparación simple\r\n      const aValue = a[columnKey];\r\n      const bValue = b[columnKey];\r\n\r\n      if (typeof aValue === 'string' && typeof bValue === 'string') {\r\n        return aValue.localeCompare(bValue) * directionMultiplier;\r\n      }\r\n\r\n      if (aValue < bValue) {\r\n        return -1 * directionMultiplier;\r\n      }\r\n      if (aValue > bValue) {\r\n        return 1 * directionMultiplier;\r\n      }\r\n      return 0;\r\n    });\r\n  });\r\n\r\n  public paginatedData = computed(() => {\r\n    const data = this.sortedAndFilteredData();\r\n    const size = this.pageSize();\r\n    const page = this.currentPage();\r\n\r\n    const start = (page - 1) * size;\r\n    const end = start + size;\r\n\r\n    // Retorna solo el slice (rebanada) de datos de la página actual\r\n    return data.slice(start, end);\r\n  });\r\n\r\n  public totalPages = computed(() => {\r\n    const totalItems = this.sortedAndFilteredData().length;\r\n    const size = this.pageSize();\r\n    return Math.ceil(totalItems / size);\r\n  });\r\n\r\n  public pagesToShow = computed<number[]>(() => {\r\n    const total = this.totalPages();\r\n    const current = this.currentPage();\r\n    const maxPagesToShow = 5; // Máximo de botones numéricos a mostrar\r\n    const pages: number[] = [];\r\n\r\n    // Lógica simple para centrar los botones en la página actual\r\n    let start = Math.max(1, current - Math.floor(maxPagesToShow / 2));\r\n    let end = Math.min(total, start + maxPagesToShow - 1);\r\n\r\n    // Ajuste si la tabla es pequeña\r\n    if (end - start + 1 < maxPagesToShow) {\r\n      start = Math.max(1, end - maxPagesToShow + 1);\r\n    }\r\n\r\n    for (let i = start; i <= end; i++) {\r\n      pages.push(i);\r\n    }\r\n    return pages;\r\n  });\r\n\r\n  // ------------------------------------\r\n  // IV. FUNCIONES\r\n  // ------------------------------------\r\n  onSort(columnKey: keyof T | 'actions' | 'select'): void {\r\n    // Solo permitir ordenar si no es una columna de acción/selección\r\n    if (columnKey === 'actions' || columnKey === 'select') return;\r\n\r\n    this.sortState.update((current) => {\r\n      let newDirection: SortDirection = 'asc';\r\n\r\n      if (current.column === columnKey) {\r\n        // Mismo column, se alterna la dirección\r\n        newDirection = current.direction === 'asc' ? 'desc' : 'asc';\r\n      }\r\n\r\n      return {\r\n        column: columnKey as keyof T,\r\n        direction: newDirection,\r\n      };\r\n    });\r\n  }\r\n\r\n  /**\r\n   * FUNCIÓN DE BÚSQUEDA\r\n   * Actualiza el WritableSignal interno.\r\n   */\r\n  onSearchChange(term: string): void {\r\n    this.filterTerm.set(term);\r\n  }\r\n\r\n  /**\r\n   * FUNCIÓN DE ACCIONES\r\n   * Emite el evento usando .emit() del Output Signal.\r\n   */\r\n  onActionClick(action: string, rowData: T): void {\r\n    this.actionClicked.emit({ action, rowData });\r\n  }\r\n\r\n  /**\r\n   * FUNCIÓN DE EXPORTACIÓN\r\n   * Emite el evento de salida, delegando la lógica al padre.\r\n   */\r\n  exportData(format: 'pdf' | 'excel' | 'print'): void {\r\n    this.exportRequested.emit(format);\r\n  }\r\n\r\n  getConfig(key: string): TableColumn<T> | undefined {\r\n    return this.columns().find((c) => c.key === key);\r\n  }\r\n\r\n  goToPage(page: number): void {\r\n    const total = this.totalPages();\r\n    if (page >= 1 && page <= total) {\r\n      this.currentPage.set(page);\r\n    }\r\n  }\r\n\r\n  onPageSizeChange(event: Event): void {\r\n    const target = event.target as HTMLSelectElement;\r\n    const newSize = Number(target.value);\r\n\r\n    this.pageSize.set(newSize);\r\n    // Reiniciar a la página 1 después de cambiar el tamaño para evitar errores de índice\r\n    this.currentPage.set(1);\r\n  }\r\n}\r\n","<div class=\"container-fluid pt-3\">\r\n  <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"form-control w-25\"\r\n      [placeholder]=\"filterPlaceholder()\"\r\n      [ngModel]=\"filterTerm()\"\r\n      (ngModelChange)=\"onSearchChange($event)\"\r\n    />\r\n\r\n    @if (showExportButtons()) {\r\n      <div class=\"export-buttons btn-group\" role=\"group\">\r\n        <button class=\"btn btn-outline-success\" (click)=\"exportData('excel')\">\r\n          <i class=\"bi bi-file-earmark-excel\"></i> Exportar a Excel\r\n        </button>\r\n        <button class=\"btn btn-outline-danger\" (click)=\"exportData('pdf')\">\r\n          <i class=\"bi bi-file-earmark-pdf\"></i> Exportar a PDF\r\n        </button>\r\n        <button class=\"btn btn-outline-secondary\" (click)=\"exportData('print')\">\r\n          <i class=\"bi bi-printer\"></i> Imprimir\r\n        </button>\r\n      </div>\r\n    }\r\n  </div>\r\n\r\n  <div class=\"table-responsive\">\r\n    <table class=\"table table-hover table-bordered caption-top\">\r\n      <caption>\r\n        Mostrando\r\n        {{\r\n          paginatedData().length\r\n        }}\r\n        de\r\n        {{\r\n          sortedAndFilteredData().length\r\n        }}\r\n        resultados (Total:\r\n        {{\r\n          data().length\r\n        }}).\r\n      </caption>\r\n\r\n      <thead>\r\n        <tr>\r\n          @for (col of columns(); track col.key) {\r\n            <th\r\n              [class.sortable]=\"col.isSortable\"\r\n              (click)=\"col.isSortable && onSort(col.key)\"\r\n              scope=\"col\"\r\n              class=\"text-nowrap\"\r\n            >\r\n              <div class=\"d-flex align-items-center justify-content-between\">\r\n                <span class=\"fw-bold\">{{ col.label }}</span>\r\n\r\n                @if (col.isSortable) {\r\n                  @if (col.key === sortState().column) {\r\n                    <i\r\n                      class=\"fa-solid ms-1\"\r\n                      [class.fa-sort-up]=\"sortState().direction === 'asc'\"\r\n                      [class.fa-sort-down]=\"sortState().direction === 'desc'\"\r\n                    >\r\n                    </i>\r\n                  } @else {\r\n                    <i class=\"fa-solid fa-sort text-muted ms-1\" style=\"opacity: 0.5\"></i>\r\n                  }\r\n                }\r\n              </div>\r\n            </th>\r\n          }\r\n          @if (actions().length > 0) {\r\n            <th class=\"bg-dark text-center text-white\">Acciones</th>\r\n          }\r\n        </tr>\r\n      </thead>\r\n\r\n      <tbody>\r\n        @for (row of paginatedData(); track row.id || $index) {\r\n          <tr>\r\n            @for (col of columns(); track col.key) {\r\n              <td class=\"text-nowrap\">\r\n                @if (col.templateRef) {\r\n                  <ng-container\r\n                    *ngTemplateOutlet=\"\r\n                      col.templateRef;\r\n                      context: { $implicit: row, column: col.key }\r\n                    \"\r\n                  ></ng-container>\r\n                } @else {\r\n                  <!-- {{ formatCellValue(row, col) }} -->\r\n                  @let config = getConfig(col.key.toString());\r\n                  @switch (config?.dataType) {\r\n                    @case ('date') {\r\n                      {{ $any(row)[col.key] | safeDate }}\r\n                    }\r\n                    @case ('currency') {\r\n                      {{ $any(row)[col.key] | safeCurrency }}\r\n                    }\r\n                    @case ('number') {\r\n                      {{ $any(row)[col.key] | safeNumber }}\r\n                    }\r\n                    @default {\r\n                      {{ $any(row)[col.key] }}\r\n                    }\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n            @if (actions().length > 0) {\r\n              <td class=\"text-center\">\r\n                @for (action of actions(); track action.label) {\r\n                  @if (!action.isVisible || action.isVisible(row)) {\r\n                    <button\r\n                      [class]=\"'btn btn-sm mx-1 ' + action.styleClass\"\r\n                      (click)=\"action.callback(row)\"\r\n                    >\r\n                      <i [class]=\"action.icon\"></i>\r\n                    </button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        } @empty {\r\n          <tr>\r\n            <td [attr.colspan]=\"columns().length\" class=\"text-center\">\r\n              No hay datos disponibles para mostrar.\r\n            </td>\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  <div class=\"d-flex justify-content-between align-items-center mt-3\">\r\n    <div class=\"d-flex align-items-center\">\r\n      <label for=\"pageSizeSelect\" class=\"me-2 text-nowrap\">Artículos por página: </label>\r\n      <select\r\n        id=\"pageSizeSelect\"\r\n        class=\"form-select form-select-sm w-auto\"\r\n        (change)=\"onPageSizeChange($event)\"\r\n      >\r\n        <option value=\"10\" [selected]=\"pageSize() === 10\">10</option>\r\n        <option value=\"25\" [selected]=\"pageSize() === 25\">25</option>\r\n        <option value=\"50\" [selected]=\"pageSize() === 50\">50</option>\r\n        <option value=\"100\" [selected]=\"pageSize() === 100\">100</option>\r\n      </select>\r\n    </div>\r\n\r\n    <nav aria-label=\"Paginación de tabla\">\r\n      <ul class=\"pagination pagination-md mb-0\">\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage() === 1\">\r\n          <button type=\"button\" class=\"page-link\" (click)=\"goToPage(currentPage() - 1)\"><<</button>\r\n        </li>\r\n\r\n        @for (pageNumber of pagesToShow(); track pageNumber) {\r\n          <li class=\"page-item\" [class.active]=\"currentPage() === pageNumber\">\r\n            <button type=\"button\" class=\"page-link\" (click)=\"goToPage(pageNumber)\">\r\n              {{ pageNumber }}\r\n            </button>\r\n          </li>\r\n        }\r\n\r\n        <li class=\"page-item\" [class.disabled]=\"currentPage() === totalPages()\">\r\n          <button type=\"button\" class=\"page-link\" (click)=\"goToPage(currentPage() + 1)\">>></button>\r\n        </li>\r\n      </ul>\r\n    </nav>\r\n  </div>\r\n</div>\r\n","/*\r\n * Public API Surface of data-table\r\n */\r\n\r\nexport * from './lib/data-table';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@ddiazr/data-table",
+  "version": "0.0.1",
+  "description": "Tabla generica sirve para acciones, export PDF,EXCEl",
+  "author": {
+    "name": "Dany Díaz",
+    "email": "danylen1@hotmail.com"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "bootstrap": "^5.3.8",
+    "@fortawesome/fontawesome-free": "^7.1.0",
+    "jspdf": "^4.0.0",
+    "jspdf-autotable": "^5.0.7",
+    "xlsx": "^0.18.5"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/ddiazr-data-table.mjs",
+  "typings": "types/ddiazr-data-table.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ddiazr-data-table.d.ts",
+      "default": "./fesm2022/ddiazr-data-table.mjs"
+    }
+  }
+}

package/types/ddiazr-data-table.d.ts

@@ -0,0 +1,81 @@
+import * as _angular_core from '@angular/core';
+import { WritableSignal } from '@angular/core';
+
+type DataType = 'string' | 'number' | 'currency' | 'date' | 'boolean';
+type SortDirection = 'asc' | 'desc' | null;
+/**
+ * Define la configuración de una columna en la tabla genérica.
+ * @template T El tipo de dato de la fila (ej: User, Product).
+ */
+interface TableColumn<T> {
+    key: keyof T | 'actions' | 'select';
+    label: string;
+    isSortable?: boolean;
+    templateRef?: any;
+    dataType?: DataType;
+}
+/**
+ * Define el estado actual de ordenamiento de la tabla.
+ * @template T El tipo de dato de la fila.
+ */
+interface SortState<T> {
+    column: keyof T | null;
+    direction: SortDirection;
+}
+/**
+ * Define un botón o acción específica dentro de la columna 'actions'.
+ */
+interface TableAction<T> {
+    label: string;
+    icon?: string;
+    styleClass?: string;
+    callback: (row: T) => void;
+    isVisible?: (row: T) => boolean;
+}
+
+declare class DataTable<T extends {
+    id?: any;
+}> {
+    data: _angular_core.InputSignal<T[]>;
+    columns: _angular_core.InputSignal<TableColumn<T>[]>;
+    actions: _angular_core.InputSignal<TableAction<T>[]>;
+    filterPlaceholder: _angular_core.InputSignal<string>;
+    showExportButtons: _angular_core.InputSignal<boolean>;
+    actionClicked: _angular_core.OutputEmitterRef<{
+        action: string;
+        rowData: T;
+    }>;
+    exportRequested: _angular_core.OutputEmitterRef<"pdf" | "excel" | "print">;
+    filterTerm: WritableSignal<string>;
+    sortState: WritableSignal<SortState<T>>;
+    currentPage: WritableSignal<number>;
+    pageSize: WritableSignal<number>;
+    filteredData: _angular_core.Signal<T[]>;
+    sortedAndFilteredData: _angular_core.Signal<T[]>;
+    paginatedData: _angular_core.Signal<T[]>;
+    totalPages: _angular_core.Signal<number>;
+    pagesToShow: _angular_core.Signal<number[]>;
+    onSort(columnKey: keyof T | 'actions' | 'select'): void;
+    /**
+     * FUNCIÓN DE BÚSQUEDA
+     * Actualiza el WritableSignal interno.
+     */
+    onSearchChange(term: string): void;
+    /**
+     * FUNCIÓN DE ACCIONES
+     * Emite el evento usando .emit() del Output Signal.
+     */
+    onActionClick(action: string, rowData: T): void;
+    /**
+     * FUNCIÓN DE EXPORTACIÓN
+     * Emite el evento de salida, delegando la lógica al padre.
+     */
+    exportData(format: 'pdf' | 'excel' | 'print'): void;
+    getConfig(key: string): TableColumn<T> | undefined;
+    goToPage(page: number): void;
+    onPageSizeChange(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTable<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "dtbl-data-table", never, { "data": { "alias": "data"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; "isSignal": true; }; "showExportButtons": { "alias": "showExportButtons"; "required": false; "isSignal": true; }; }, { "actionClicked": "actionClicked"; "exportRequested": "exportRequested"; }, never, never, true, never>;
+}
+
+export { DataTable };