@c80/ui 1.0.58 → 1.0.62

package/esm2022/lib/table/table-pagination.service.js

@@ -0,0 +1,79 @@
+import { Injectable, signal, computed } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Servicio para gestionar el estado de paginación en tablas C80
+ *
+ * Maneja:
+ * - Estado de paginación (página actual, tamaño, total)
+ * - Cálculo automático de offset para API (limit/offset)
+ * - Navegación (siguiente, anterior)
+ * - Validaciones de límites
+ */
+export class TablePaginationService {
+    /**
+     * Inicializa el estado de paginación para una nueva tabla
+     * @param initialPageSize - Tamaño de página inicial (default: 10)
+     * @returns Objeto con signals y métodos de paginación
+     */
+    createPaginationState(initialPageSize = 10) {
+        const currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+        const pageSize = signal(initialPageSize, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+        const totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+        const totalPages = computed(() => {
+            const total = totalItems();
+            const size = pageSize();
+            return Math.ceil(total / size) || 1;
+        }, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+        const hasNextPage = computed(() => currentPage() < totalPages(), ...(ngDevMode ? [{ debugName: "hasNextPage" }] : []));
+        const hasPrevPage = computed(() => currentPage() > 1, ...(ngDevMode ? [{ debugName: "hasPrevPage" }] : []));
+        const offset = computed(() => (currentPage() - 1) * pageSize(), ...(ngDevMode ? [{ debugName: "offset" }] : []));
+        return {
+            currentPage,
+            pageSize,
+            totalItems,
+            totalPages,
+            hasNextPage,
+            hasPrevPage,
+            offset,
+            setPage: (page) => this.setPage(currentPage, page, totalPages),
+            setPageSize: (size) => this.setPageSize(pageSize, currentPage, size),
+            setTotalItems: (total) => totalItems.set(total),
+            nextPage: () => this.nextPage(currentPage, totalPages),
+            prevPage: () => this.prevPage(currentPage),
+            reset: () => this.reset(currentPage, totalItems)
+        };
+    }
+    setPage(currentPageSignal, page, totalPages) {
+        const validPage = Math.max(1, Math.min(page, totalPages()));
+        currentPageSignal.set(validPage);
+    }
+    setPageSize(pageSizeSignal, currentPageSignal, size) {
+        pageSizeSignal.set(Math.max(1, size));
+        currentPageSignal.set(1);
+    }
+    nextPage(currentPageSignal, totalPages) {
+        const current = currentPageSignal();
+        if (current < totalPages()) {
+            currentPageSignal.set(current + 1);
+        }
+    }
+    prevPage(currentPageSignal) {
+        const current = currentPageSignal();
+        if (current > 1) {
+            currentPageSignal.set(current - 1);
+        }
+    }
+    reset(currentPageSignal, totalItemsSignal) {
+        currentPageSignal.set(1);
+        totalItemsSignal.set(0);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TablePaginationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TablePaginationService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TablePaginationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+//# sourceMappingURL=table-pagination.service.js.map

package/esm2022/lib/table/table-pagination.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-pagination.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/table/table-pagination.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAe,MAAM,eAAe,CAAC;;AAkB1E;;;;;;;;GAQG;AAIH,MAAM,OAAO,sBAAsB;IAEjC;;;;OAIG;IACH,qBAAqB,CAAC,eAAe,GAAG,EAAE;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,uDAAC,CAAC;QAC9B,MAAM,QAAQ,GAAG,MAAM,CAAC,eAAe,oDAAC,CAAC;QACzC,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,sDAAC,CAAC;QAE7B,MAAM,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE;YAC/B,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;YAC3B,MAAM,IAAI,GAAG,QAAQ,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;QACtC,CAAC,sDAAC,CAAC;QAEH,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,GAAG,UAAU,EAAE,uDAAC,CAAC;QACjE,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,uDAAC,CAAC;QACtD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,kDAAC,CAAC;QAEhE,OAAO;YACL,WAAW;YACX,QAAQ;YACR,UAAU;YACV,UAAU;YACV,WAAW;YACX,WAAW;YACX,MAAM;YACN,OAAO,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE,UAAU,CAAC;YACtE,WAAW,EAAE,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,EAAE,WAAW,EAAE,IAAI,CAAC;YAC5E,aAAa,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC;YACvD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,UAAU,CAAC;YACtD,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;YAC1C,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,CAAC;SACjD,CAAC;IACJ,CAAC;IAEO,OAAO,CACb,iBAAoD,EACpD,IAAY,EACZ,UAA0B;QAE1B,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;QAC5D,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;IACnC,CAAC;IAEO,WAAW,CACjB,cAAiD,EACjD,iBAAoD,EACpD,IAAY;QAEZ,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;QACtC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC;IAEO,QAAQ,CACd,iBAAoD,EACpD,UAA0B;QAE1B,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;QACpC,IAAI,OAAO,GAAG,UAAU,EAAE,EAAE,CAAC;YAC3B,iBAAiB,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAEO,QAAQ,CACd,iBAAoD;QAEpD,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;QACpC,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;YAChB,iBAAiB,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAEO,KAAK,CACX,iBAAoD,EACpD,gBAAmD;QAEnD,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACzB,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC;wGAlFU,sBAAsB;4GAAtB,sBAAsB,cAFrB,MAAM;;4FAEP,sBAAsB;kBAHlC,UAAU;mBAAC;oBACV,UAAU,EAAE,MAAM;iBACnB","sourcesContent":["import { Injectable, signal, computed, type Signal } from '@angular/core';\n\nexport interface TablePaginationState {\n  currentPage: Signal<number>;\n  pageSize: Signal<number>;\n  totalItems: Signal<number>;\n  totalPages: Signal<number>;\n  hasNextPage: Signal<boolean>;\n  hasPrevPage: Signal<boolean>;\n  offset: Signal<number>;\n  setPage: (page: number) => void;\n  setPageSize: (size: number) => void;\n  setTotalItems: (total: number) => void;\n  nextPage: () => void;\n  prevPage: () => void;\n  reset: () => void;\n}\n\n/**\n * Servicio para gestionar el estado de paginación en tablas C80\n *\n * Maneja:\n * - Estado de paginación (página actual, tamaño, total)\n * - Cálculo automático de offset para API (limit/offset)\n * - Navegación (siguiente, anterior)\n * - Validaciones de límites\n */\n@Injectable({\n  providedIn: 'root'\n})\nexport class TablePaginationService {\n\n  /**\n   * Inicializa el estado de paginación para una nueva tabla\n   * @param initialPageSize - Tamaño de página inicial (default: 10)\n   * @returns Objeto con signals y métodos de paginación\n   */\n  createPaginationState(initialPageSize = 10): TablePaginationState {\n    const currentPage = signal(1);\n    const pageSize = signal(initialPageSize);\n    const totalItems = signal(0);\n\n    const totalPages = computed(() => {\n      const total = totalItems();\n      const size = pageSize();\n      return Math.ceil(total / size) || 1;\n    });\n\n    const hasNextPage = computed(() => currentPage() < totalPages());\n    const hasPrevPage = computed(() => currentPage() > 1);\n    const offset = computed(() => (currentPage() - 1) * pageSize());\n\n    return {\n      currentPage,\n      pageSize,\n      totalItems,\n      totalPages,\n      hasNextPage,\n      hasPrevPage,\n      offset,\n      setPage: (page: number) => this.setPage(currentPage, page, totalPages),\n      setPageSize: (size: number) => this.setPageSize(pageSize, currentPage, size),\n      setTotalItems: (total: number) => totalItems.set(total),\n      nextPage: () => this.nextPage(currentPage, totalPages),\n      prevPage: () => this.prevPage(currentPage),\n      reset: () => this.reset(currentPage, totalItems)\n    };\n  }\n\n  private setPage(\n    currentPageSignal: ReturnType<typeof signal<number>>,\n    page: number,\n    totalPages: Signal<number>\n  ): void {\n    const validPage = Math.max(1, Math.min(page, totalPages()));\n    currentPageSignal.set(validPage);\n  }\n\n  private setPageSize(\n    pageSizeSignal: ReturnType<typeof signal<number>>,\n    currentPageSignal: ReturnType<typeof signal<number>>,\n    size: number\n  ): void {\n    pageSizeSignal.set(Math.max(1, size));\n    currentPageSignal.set(1);\n  }\n\n  private nextPage(\n    currentPageSignal: ReturnType<typeof signal<number>>,\n    totalPages: Signal<number>\n  ): void {\n    const current = currentPageSignal();\n    if (current < totalPages()) {\n      currentPageSignal.set(current + 1);\n    }\n  }\n\n  private prevPage(\n    currentPageSignal: ReturnType<typeof signal<number>>\n  ): void {\n    const current = currentPageSignal();\n    if (current > 1) {\n      currentPageSignal.set(current - 1);\n    }\n  }\n\n  private reset(\n    currentPageSignal: ReturnType<typeof signal<number>>,\n    totalItemsSignal: ReturnType<typeof signal<number>>\n  ): void {\n    currentPageSignal.set(1);\n    totalItemsSignal.set(0);\n  }\n}\n"]}

package/esm2022/lib/table/table.component.js

@@ -1,10 +1,11 @@
-import { Component, ChangeDetectionStrategy, input, signal, computed, output, inject, } from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, signal, computed, output, inject, effect, } from '@angular/core';
 import { IconComponent } from '../icon';
 import { TableColumnVisibilityService } from './table-column-visibility.service';
 import { TableDataUtilsService } from './table-data-utils.service';
 import { TableDataConverterService } from './table-data-converter.service';
 import { TableSelectionService } from './table-selection.service';
 import { TableCrudStateService } from './table-crud-state.service';
+import { TablePaginationService } from './table-pagination.service';
 import { ModalComponent, ModalService } from '../modal';
 import { booleanAttribute, getErrorMessage, getInputValue, trackById, shouldShowAction, getActionTooltip, } from './table.utils';
 import * as i0 from "@angular/core";
@@ -132,13 +133,14 @@ import * as i0 from "@angular/core";
  * - customActions con custom → Botón personalizado emite evento
  */ export class TableComponent {
     // Servicios inyectados
-    /* v8 ignore next 6 */
+    /* v8 ignore next 7 */
     modalService = inject(ModalService);
     visibilityService = inject(TableColumnVisibilityService);
     dataUtils = inject(TableDataUtilsService);
     dataConverter = inject(TableDataConverterService);
     selectionService = inject(TableSelectionService);
     crudService = inject(TableCrudStateService);
+    paginationService = inject(TablePaginationService);
     // Inputs
     /* v8 ignore next */
     data$ = input.required(...(ngDevMode ? [{ debugName: "data$" }] : []));
@@ -158,14 +160,19 @@ import * as i0 from "@angular/core";
     allowSelection = input(false, ...(ngDevMode ? [{ debugName: "allowSelection", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // Si es true, permite selección de filas
     /* v8 ignore next */
     noConfirm = input(false, ...(ngDevMode ? [{ debugName: "noConfirm", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // Si es true, no muestra confirmaciones modales
+    /* v8 ignore next */
+    paginated = input(false, ...(ngDevMode ? [{ debugName: "paginated", transform: booleanAttribute }] : [{ transform: booleanAttribute }])); // Si es true, habilita paginación con limit/offset
+    /* v8 ignore next */
+    paginationConfig = input({ pageSize: 10 }, ...(ngDevMode ? [{ debugName: "paginationConfig" }] : [])); // Configuración de paginación (tamaño de página, total items)
     // Outputs - Acciones unificadas (Angular 18+ output API)
     /* v8 ignore next */
     actionClick = output(); // Output unificado para TODAS las acciones (CRUD + custom)
     // Outputs - Utilidades
-    /* v8 ignore next 3 */
+    /* v8 ignore next 4 */
     searchTerm = output();
     errorEvent = output();
     selectable = output();
+    paginationChange = output(); // Output para cambios de paginación (page, limit, offset)
     // Estado principal
     /* v8 ignore next 2 */
     data = signal([], ...(ngDevMode ? [{ debugName: "data" }] : []));
@@ -183,6 +190,14 @@ import * as i0 from "@angular/core";
     newRow = this.crudState.newRow;
     editing = this.crudState.editing;
     editRow = this.crudState.editRow;
+    // Estado de paginación (delegado a servicio)
+    /* v8 ignore next 7 */
+    paginationState = this.paginationService.createPaginationState(this.paginationConfig().pageSize ?? 10);
+    currentPage = this.paginationState.currentPage;
+    pageSize = this.paginationState.pageSize;
+    totalPages = this.paginationState.totalPages;
+    hasNextPage = this.paginationState.hasNextPage;
+    hasPrevPage = this.paginationState.hasPrevPage;
     // Keys visibles computed automáticamente
     /* v8 ignore next 7 */
     keys = computed(() => this.visibilityService.updateVisibleKeys(this.columns(), { data: this.data(), creating: this.creating(), editing: this.editing() }), ...(ngDevMode ? [{ debugName: "keys" }] : []));
@@ -193,12 +208,29 @@ import * as i0 from "@angular/core";
     hasCrudUpdate = computed(() => this.customActions().some(a => a.name === 'update'), ...(ngDevMode ? [{ debugName: "hasCrudUpdate" }] : []));
     hasCrudDelete = computed(() => this.customActions().some(a => a.name === 'delete'), ...(ngDevMode ? [{ debugName: "hasCrudDelete" }] : []));
     hasCrudCancel = computed(() => this.customActions().some(a => a.name === 'cancel'), ...(ngDevMode ? [{ debugName: "hasCrudCancel" }] : []));
+    /* v8 ignore next 5 */
+    shouldShowCreateButton = computed(() => {
+        const createAction = this.customActions().find(a => a.name === 'create');
+        if (!createAction)
+            return false;
+        return !createAction.condition || createAction.condition({}, this.data());
+    }, ...(ngDevMode ? [{ debugName: "shouldShowCreateButton" }] : []));
     // Table max height computed
     /* v8 ignore next 3 */
     tableMaxHeight = computed(() => this.dataUtils.getTableMaxHeight(this.size()), ...(ngDevMode ? [{ debugName: "tableMaxHeight" }] : []));
     /* v8 ignore next 2 */
     dataSub;
     inputValuesSub;
+    constructor() {
+        // Sincronizar totalItems del paginationConfig con el estado de paginación
+        /* v8 ignore next 4 */
+        effect(() => {
+            const config = this.paginationConfig();
+            if (config.totalItems !== undefined && this.paginated()) {
+                this.paginationState.setTotalItems(config.totalItems);
+            }
+        });
+    }
     /**
      * Maneja input de creación/edición de forma unificada
      */
@@ -464,6 +496,34 @@ import * as i0 from "@angular/core";
     isColumnVisibleForRow(column, row) {
         return this.visibilityService.isColumnVisibleForRow(column, { row, data: this.data(), editing: this.editing() });
     }
+    // Métodos de paginación
+    onPageChange(page) {
+        this.paginationState.setPage(page);
+        this.emitPaginationChange();
+    }
+    onNextPage() {
+        this.paginationState.nextPage();
+        this.emitPaginationChange();
+    }
+    onPrevPage() {
+        this.paginationState.prevPage();
+        this.emitPaginationChange();
+    }
+    emitPaginationChange() {
+        const event = {
+            page: this.currentPage(),
+            limit: this.pageSize(),
+            offset: this.paginationState.offset()
+        };
+        this.paginationChange.emit(event);
+    }
+    /**
+     * Actualiza el total de items para calcular páginas
+     * Debe ser llamado por el componente padre después de recibir datos
+     */
+    updateTotalItems(total) {
+        this.paginationState.setTotalItems(total);
+    }
     /**
      * Obtiene el color de una acción considerando el tema actual.
      * Si la acción tiene color explícito, lo usa. Si no, aplica color por tema.
@@ -481,10 +541,10 @@ import * as i0 from "@angular/core";
         return '#e9ecef';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: TableComponent, isStandalone: true, selector: "c80-table", inputs: { data$: { classPropertyName: "data$", publicName: "data$", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, inputValues$: { classPropertyName: "inputValues$", publicName: "inputValues$", isSignal: true, isRequired: false, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allowSelection: { classPropertyName: "allowSelection", publicName: "allowSelection", isSignal: true, isRequired: false, transformFunction: null }, noConfirm: { classPropertyName: "noConfirm", publicName: "noConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", searchTerm: "searchTerm", errorEvent: "errorEvent", selectable: "selectable" }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n<div class=\"table-responsive\" [style.max-height]=\"tableMaxHeight()\" [style.overflow-y]=\"size() > 0 ? 'auto' : 'visible'\">\n  <!-- Search Bar -->\n  @if (searchable()) {\n  <div class=\"search-container\">\n    <div class=\"search-input-wrapper\">\n      <div class=\"input-group\">\n        <span class=\"input-group-text\">\n          <c80-icon icon=\"search\" [size]=\".65\" [button]=\"false\" />\n        </span>\n        <input type=\"text\" class=\"form-control search-input\" placeholder=\"Buscar...\" [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Buscar en la tabla\" />\n        @if (searchValue()) {\n        <button class=\"btn btn-outline-secondary btn-borrar\" type=\"button\" (click)=\"clearSearch()\" title=\"Limpiar b\u00FAsqueda\">\n          <c80-icon icon=\"cancel\" [size]=\".6\" />\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <table class=\"table table-bordered table-hover align-middle\">\n    <thead class=\"thead table-light sticky-header\">\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <th class=\"text-center selection-column\">\n          @if (multiple()) {\n          <input type=\"checkbox\" [checked]=\"selectAllChecked()\" [indeterminate]=\"selectAllIndeterminate()\" (change)=\"toggleSelectAll()\" aria-label=\"Seleccionar todo\" />\n          }\n        </th>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisibleInHeader(col)) {\n        @if (col.type === 'boolean') {\n        <th class=\"text-center boolean-column\">{{ col.label }}</th>\n        }\n        @else if (col.type === 'number' || col.type === 'integer') {\n        <th class=\"text-center number-column\">{{ col.label }}</th>\n        }\n        @else {\n        <th>{{ col.label }}</th>\n        }\n        }\n        }\n        @if (hasAnyActions()) {\n        <th class=\"table-actions-header\">\n          <div class=\"actions-wrapper\">\n            <span>Actions</span>\n            @if (hasCrudCreate()) {\n            <c80-icon button icon=\"add\" [disabled]=\"creating()\" title=\"Agregar\" [size]=\".6\" (iconClick)=\"startCreate()\" />\n            }\n          </div>\n        </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of data(); track trackById(i, row); let i = $index) {\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <td class=\"text-center selection-column\">\n          <input type=\"checkbox\" [checked]=\"isItemSelected(row)\" (change)=\"toggleItemSelection(row)\" [attr.aria-label]=\"'Seleccionar fila ' + (i + 1)\" />\n        </td>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisibleForRow(col, row)) {\n        @if (col.type === 'boolean') {\n        <td class=\"text-center boolean-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input type=\"checkbox\" [checked]=\"!!editRow()?.[col.accessor]\" (change)=\"onEditInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\n          }\n          @else {\n          @if (getCellValue(row, col.accessor) === true) {\n          <c80-icon icon=\"check\" [size]=\".7\" />\n          <br />\n          }\n          @else if (getCellValue(row, col.accessor) === false) {\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\n          <br />\n          }\n          }\n        </td>\n        }\n        @else if (col.type === 'number' || col.type === 'integer') {\n        <td class=\"text-center number-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\n            (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n        </td>\n        }\n        @else {\n        <td>\n          @if (editing() === row['id'] && !col.readOnly) {\n          @if (col.type === 'enum') {\n          <select class=\"form-control form-control-sm\" [value]=\"editRow()?.[col.accessor] ?? ''\" (change)=\"onEditInput($event, col.accessor, col)\">\n            <option value=\"\">{{ col.label }}</option>\n            @for (option of getEnumOptions(col); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </select>\n          }\n          @else {\n          <input class=\"form-control form-control-sm\" [type]=\"col.type === 'password' ? 'password' : 'text'\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          }\n          @else {\n          @if (col.type === 'password') {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">******</span>\n          }\n          @else if (col.type === 'enum') {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{\n            getEnumDisplayValue(getCellValue(row, col.accessor), col)\n            }}</span>\n          }\n          @else if (getCellValue(row, col.accessor) === true) {\n          <c80-icon icon=\"check\" [size]=\".7\" />\n          }\n          @else if (getCellValue(row, col.accessor) === false) {\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n          }\n        </td>\n        }\n        }\n        }\n        @if (hasAnyActions()) {\n        <td class=\"text-center actions-cell\">\n          <div class=\"actions-container\">\n            @if (editing() === row['id']) {\n            <!-- Modo edici\u00F3n: mostrar guardar y cancelar -->\n            @if (hasCrudUpdate()) {\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveEdit(row)\" [size]=\".7\" />\n            }\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelEdit()\" [size]=\".7\" />\n            }\n            @else {\n            @for (action of customActions(); track action.name) {\n            @if (shouldShowAction(action, row)) {\n            <c80-icon button [icon]=\"action.icon\" [customColor]=\"getActionColor(action)\" [color]=\"action.name === 'delete' ? 'warn' : 'primary'\" [title]=\"getActionTooltip(action)\" (iconClick)=\"onDynamicAction(action, row)\"\n              [size]=\".7\" />\n            }\n            }\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      }\n      @if (creating() && hasCrudCreate()) {\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <td class=\"text-center selection-column\">\n          <!-- Empty cell for alignment -->\n        </td>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisible(col)) {\n        @if (col.type === 'boolean') {\n        <td class=\"text-center\">\n          @if (!col.readOnly) {\n          <input type=\"checkbox\" [checked]=\"!!newRow()?.[col.accessor]\" (change)=\"onInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\n          }\n          @else {\n          <!-- ReadOnly boolean column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        } @else if (col.type === 'number' || col.type === 'integer') {\n        <td class=\"text-center number-column\">\n          @if (!col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\n            (input)=\"onInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- ReadOnly number column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        } @else {\n        <td>\n          @if (!col.readOnly) {\n          @if (col.type === 'enum') {\n          <select class=\"form-control form-control-sm\" [value]=\"newRow()?.[col.accessor] ?? ''\" (change)=\"onInput($event, col.accessor, col)\">\n            <option value=\"\">{{ col.label }}</option>\n            @for (option of getEnumOptions(col); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </select>\n          }\n          @else {\n          <input class=\"form-control form-control-sm\" type=\"text\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onInput($event, col.accessor, col)\" />\n          }\n          }\n          @else {\n          <!-- ReadOnly column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        }\n        }\n        }\n        <td class=\"text-center actions-cell\">\n          <div class=\"actions-container\">\n            @if (hasCrudCreate()) {\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveCreate()\" [size]=\".7\" />\n            }\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelCreate()\" [size]=\".7\" />\n          </div>\n        </td>\n      </tr>\n      }\n    </tbody>\n  </table>\n  @if (data().length === 0 && !creating()) {\n  <div class=\"text-center text-muted py-3 small\">\n    No hay datos para mostrar.\n  </div>\n  }\n</div>\n\n<c80-modal />", styles: ["@charset \"UTF-8\";input[type=checkbox]{width:1.3rem!important;height:1.3rem!important;accent-color:var(--color-icon-danger);background:var(--color-bg-primary);margin:0 .25rem;vertical-align:middle;cursor:pointer}.table-responsive{width:100%;overflow-x:auto}.table-responsive .search-container{margin-bottom:-.06rem}.table-responsive .search-container .search-input-wrapper .input-group .btn-borrar{border-bottom-right-radius:0;border-color:var(--color-border-default);height:32px}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text{background-color:var(--color-bg-secondary);border-color:var(--color-border-default);border-bottom-left-radius:0;color:var(--color-text-secondary);width:56.1px;height:32px;padding:.25rem .5rem}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text c80-icon{display:flex;align-items:center;justify-content:center}.table-responsive .search-container .search-input-wrapper .input-group .search-input{border-color:var(--color-border-default);border-bottom-right-radius:0;font-size:.75rem;height:32px;padding:.25rem .5rem;outline:none!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .search-container .search-input-wrapper .input-group .search-input:focus{outline:none!important}.table-responsive .search-container .search-input-wrapper .input-group .search-input::placeholder{color:var(--color-text-muted);font-style:italic}.table-responsive .table{min-width:0px;margin-bottom:.5rem;background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .table.table-bordered,.table-responsive .table.table-bordered th,.table-responsive .table.table-bordered td{border-color:var(--color-border-default)}.table-responsive .table.table-hover tbody tr:hover{background-color:var(--color-bg-hover)!important;color:var(--color-text-primary)}.table-responsive .table.table-hover tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table .sticky-header{position:sticky;top:0;z-index:10;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .table-actions-header{display:table-cell;vertical-align:middle;padding:.2rem .6rem!important;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .actions-wrapper{display:flex;align-items:center;justify-content:center;gap:.5rem;height:100%}.table-responsive .table .sticky-header th{max-height:31px!important;vertical-align:middle!important;padding:.2rem .6rem!important;font-size:small!important;background-color:var(--color-bg-secondary)!important;border-bottom:2px solid var(--color-border-default);color:var(--color-text-primary)}.table-responsive .table tbody{background-color:var(--color-bg-primary)}.table-responsive .table tbody td{height:35px!important;min-height:35px!important;max-height:35px!important;vertical-align:middle!important;padding:.2rem .8rem!important;font-size:small;color:var(--color-text-primary);background-color:var(--color-bg-primary);border-color:var(--color-border-default)}.table-responsive .table tbody tr{height:35px!important;min-height:35px!important;max-height:35px!important;cursor:pointer;background-color:var(--color-bg-primary)}.table-responsive .table tbody tr:hover{background-color:var(--color-bg-hover)!important}.table-responsive .table tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table tbody .text-muted{color:var(--color-text-muted)!important}.table-responsive .table tbody input,.table-responsive .table tbody select{border:1px solid var(--color-border-default);height:100%!important;font-size:smaller!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .table tbody input:focus,.table-responsive .table tbody select:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}.table-responsive .table tbody input::placeholder,.table-responsive .table tbody select::placeholder{color:var(--color-text-muted)}.table-responsive .table tbody input[type=text],.table-responsive .table tbody input:not([type]){width:100%!important}.table-responsive .table tbody input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table tbody select{width:100%!important;padding:.25rem .5rem}.table-responsive .table thead th.boolean-column,.table-responsive .table tbody td.boolean-column,.table-responsive .table thead th.selection-column,.table-responsive .table tbody td.selection-column,.table-responsive .table thead th.table-actions-header,.table-responsive .table tbody td.table-actions-header{width:1%;white-space:nowrap}.table-responsive .table thead th.number-column,.table-responsive .table tbody td.number-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.number-column input[type=number],.table-responsive .table tbody td.number-column input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table .actions-cell{white-space:nowrap;padding:0!important}.table-responsive .table .actions-container{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:100%}.table-responsive .text-center.text-muted{color:var(--color-text-muted)!important}.table-responsive .btn-outline-secondary{background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .btn-outline-secondary:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium)}.table-responsive .btn-outline-secondary:focus{box-shadow:var(--shadow-focus)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight", "dark"], outputs: ["iconClick"] }, { kind: "component", type: ModalComponent, selector: "c80-modal" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: TableComponent, isStandalone: true, selector: "c80-table", inputs: { data$: { classPropertyName: "data$", publicName: "data$", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, inputValues$: { classPropertyName: "inputValues$", publicName: "inputValues$", isSignal: true, isRequired: false, transformFunction: null }, customActions: { classPropertyName: "customActions", publicName: "customActions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, allowSelection: { classPropertyName: "allowSelection", publicName: "allowSelection", isSignal: true, isRequired: false, transformFunction: null }, noConfirm: { classPropertyName: "noConfirm", publicName: "noConfirm", isSignal: true, isRequired: false, transformFunction: null }, paginated: { classPropertyName: "paginated", publicName: "paginated", isSignal: true, isRequired: false, transformFunction: null }, paginationConfig: { classPropertyName: "paginationConfig", publicName: "paginationConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", searchTerm: "searchTerm", errorEvent: "errorEvent", selectable: "selectable", paginationChange: "paginationChange" }, ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n<div class=\"table-responsive\" [style.max-height]=\"tableMaxHeight()\" [style.overflow-y]=\"size() > 0 ? 'auto' : 'visible'\">\n  <!-- Search Bar -->\n  @if (searchable()) {\n  <div class=\"search-container\">\n    <div class=\"search-input-wrapper\">\n      <div class=\"input-group\">\n        <span class=\"input-group-text\">\n          <c80-icon icon=\"search\" [size]=\".65\" [button]=\"false\" />\n        </span>\n        <input type=\"text\" class=\"form-control search-input\" placeholder=\"Buscar...\" [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Buscar en la tabla\" />\n        @if (searchValue()) {\n        <button class=\"btn btn-outline-secondary btn-borrar\" type=\"button\" (click)=\"clearSearch()\" title=\"Limpiar b\u00FAsqueda\">\n          <c80-icon icon=\"cancel\" [size]=\".6\" />\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <table class=\"table table-bordered table-hover align-middle\">\n    <thead class=\"thead table-light sticky-header\">\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <th class=\"text-center selection-column\">\n          @if (multiple()) {\n          <input type=\"checkbox\" [checked]=\"selectAllChecked()\" [indeterminate]=\"selectAllIndeterminate()\" (change)=\"toggleSelectAll()\" aria-label=\"Seleccionar todo\" />\n          }\n        </th>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisibleInHeader(col)) {\n        @if (col.type === 'boolean') {\n        <th class=\"text-center boolean-column\">{{ col.label }}</th>\n        }\n        @else if (col.type === 'number' || col.type === 'integer') {\n        <th class=\"text-center number-column\">{{ col.label }}</th>\n        }\n        @else if (col.type === 'date') {\n        <th class=\"text-center date-column\">{{ col.label }}</th>\n        }\n        @else {\n        <th>{{ col.label }}</th>\n        }\n        }\n        }\n        @if (hasAnyActions()) {\n        <th class=\"table-actions-header\">\n          <div class=\"actions-wrapper\">\n            <span>Actions</span>\n            @if (shouldShowCreateButton()) {\n            <c80-icon button icon=\"add\" [disabled]=\"creating()\" title=\"Agregar\" [size]=\".6\" (iconClick)=\"startCreate()\" />\n            }\n          </div>\n        </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of data(); track trackById(i, row); let i = $index) {\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <td class=\"text-center selection-column\">\n          <input type=\"checkbox\" [checked]=\"isItemSelected(row)\" (change)=\"toggleItemSelection(row)\" [attr.aria-label]=\"'Seleccionar fila ' + (i + 1)\" />\n        </td>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisibleForRow(col, row)) {\n        @if (col.type === 'boolean') {\n        <td class=\"text-center boolean-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input type=\"checkbox\" [checked]=\"!!editRow()?.[col.accessor]\" (change)=\"onEditInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\n          }\n          @else {\n          @if (getCellValue(row, col.accessor) === true) {\n          <c80-icon icon=\"check\" [size]=\".7\" />\n          <br />\n          }\n          @else if (getCellValue(row, col.accessor) === false) {\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\n          <br />\n          }\n          }\n        </td>\n        }\n        @else if (col.type === 'number' || col.type === 'integer') {\n        <td class=\"text-center number-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\n            (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n        </td>\n        }\n        @else if (col.type === 'date') {\n        <td class=\"text-center date-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"datetime-local\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n        </td>\n        }\n        @else {\n        <td>\n          @if (editing() === row['id'] && !col.readOnly) {\n          @if (col.type === 'enum') {\n          <select class=\"form-control form-control-sm\" [value]=\"editRow()?.[col.accessor] ?? ''\" (change)=\"onEditInput($event, col.accessor, col)\">\n            <option value=\"\">{{ col.label }}</option>\n            @for (option of getEnumOptions(col); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </select>\n          }\n          @else {\n          <input class=\"form-control form-control-sm\" [type]=\"col.type === 'password' ? 'password' : 'text'\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          }\n          @else {\n          @if (col.type === 'password') {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">******</span>\n          }\n          @else if (col.type === 'enum') {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{\n            getEnumDisplayValue(getCellValue(row, col.accessor), col)\n            }}</span>\n          }\n          @else if (getCellValue(row, col.accessor) === true) {\n          <c80-icon icon=\"check\" [size]=\".7\" />\n          }\n          @else if (getCellValue(row, col.accessor) === false) {\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n          }\n        </td>\n        }\n        }\n        }\n        @if (hasAnyActions()) {\n        <td class=\"text-end actions-cell\">\n          <div class=\"actions-container\" [class.centered-actions]=\"editing() === row['id']\">\n            @if (editing() === row['id']) {\n            <!-- Modo edici\u00F3n: mostrar guardar y cancelar -->\n            @if (hasCrudUpdate()) {\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveEdit(row)\" [size]=\".7\" />\n            }\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelEdit()\" [size]=\".7\" />\n            }\n            @else {\n            @for (action of customActions(); track action.name) {\n            @if (shouldShowAction(action, row, data())) {\n            <c80-icon button [icon]=\"action.icon\" [customColor]=\"getActionColor(action)\" [color]=\"action.name === 'delete' ? 'warn' : 'primary'\" [title]=\"getActionTooltip(action)\" (iconClick)=\"onDynamicAction(action, row)\" [size]=\".7\" />\n            }\n            }\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      }\n      @if (creating() && hasCrudCreate()) {\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <td class=\"text-center selection-column\">\n          <!-- Empty cell for alignment -->\n        </td>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisible(col)) {\n        @if (col.type === 'boolean') {\n        <td class=\"text-center\">\n          @if (!col.readOnly) {\n          <input type=\"checkbox\" [checked]=\"!!newRow()?.[col.accessor]\" (change)=\"onInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\n          }\n          @else {\n          <!-- ReadOnly boolean column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        } @else if (col.type === 'number' || col.type === 'integer') {\n        <td class=\"text-center number-column\">\n          @if (!col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\n            (input)=\"onInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- ReadOnly number column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        } @else {\n        <td>\n          @if (!col.readOnly) {\n          @if (col.type === 'enum') {\n          <select class=\"form-control form-control-sm\" [value]=\"newRow()?.[col.accessor] ?? ''\" (change)=\"onInput($event, col.accessor, col)\">\n            <option value=\"\">{{ col.label }}</option>\n            @for (option of getEnumOptions(col); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </select>\n          }\n          @else {\n          <input class=\"form-control form-control-sm\" type=\"text\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onInput($event, col.accessor, col)\" />\n          }\n          }\n          @else {\n          <!-- ReadOnly column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        }\n        }\n        }\n        <td class=\"text-end actions-cell\">\n          <div class=\"actions-container centered-actions\">\n            @if (hasCrudCreate()) {\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveCreate()\" [size]=\".7\" />\n            }\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelCreate()\" [size]=\".7\" />\n          </div>\n        </td>\n      </tr>\n      }\n    </tbody>\n  </table>\n  @if (data().length === 0 && !creating()) {\n  <div class=\"text-center text-muted py-3 small\">\n    No hay datos para mostrar.\n  </div>\n  }\n\n  <!-- Pagination Controls -->\n  @if (paginated() && data().length > 0) {\n  <div class=\"pagination-container\">\n    <div class=\"pagination-info\">\n      P\u00E1gina {{ currentPage() }} de {{ totalPages() }}\n    </div>\n    <div class=\"pagination-controls\">\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasPrevPage()\" (click)=\"onPrevPage()\" title=\"P\u00E1gina anterior\">\n        <c80-icon icon=\"arrowLeft\" [size]=\".6\" [button]=\"false\" />\n      </button>\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasNextPage()\" (click)=\"onNextPage()\" title=\"P\u00E1gina siguiente\">\n        <c80-icon icon=\"arrowRight\" [size]=\".6\" [button]=\"false\" />\n      </button>\n    </div>\n  </div>\n  }\n</div>\n\n<c80-modal />", styles: ["@charset \"UTF-8\";input[type=checkbox]{width:1.3rem!important;height:1.3rem!important;accent-color:var(--color-icon-danger);background:var(--color-bg-primary);margin:0 .25rem;vertical-align:middle;cursor:pointer}.table-responsive{width:100%;overflow-x:auto}.table-responsive .search-container{margin-bottom:-.06rem}.table-responsive .search-container .search-input-wrapper .input-group .btn-borrar{border-bottom-right-radius:0;border-color:var(--color-border-default);height:32px}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text{background-color:var(--color-bg-secondary);border-color:var(--color-border-default);border-bottom-left-radius:0;color:var(--color-text-secondary);width:56.1px;height:32px;padding:.25rem .5rem}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text c80-icon{display:flex;align-items:center;justify-content:center}.table-responsive .search-container .search-input-wrapper .input-group .search-input{border-color:var(--color-border-default);border-bottom-right-radius:0;font-size:.75rem;height:32px;padding:.25rem .5rem;outline:none!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .search-container .search-input-wrapper .input-group .search-input:focus{outline:none!important}.table-responsive .search-container .search-input-wrapper .input-group .search-input::placeholder{color:var(--color-text-muted);font-style:italic}.table-responsive .table{min-width:0px;margin-bottom:0;background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .table.table-bordered,.table-responsive .table.table-bordered th,.table-responsive .table.table-bordered td{border-color:var(--color-border-default)}.table-responsive .table.table-hover tbody tr:hover{background-color:var(--color-bg-hover)!important;color:var(--color-text-primary)}.table-responsive .table.table-hover tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table .sticky-header{position:sticky;top:0;z-index:10;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .table-actions-header{display:table-cell;vertical-align:middle;padding:.2rem .6rem!important;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .actions-wrapper{display:flex;align-items:center;justify-content:center;gap:.5rem;height:100%}.table-responsive .table .sticky-header th{max-height:31px!important;vertical-align:middle!important;padding:.2rem .6rem!important;font-size:small!important;background-color:var(--color-bg-secondary)!important;border-bottom:2px solid var(--color-border-default);color:var(--color-text-primary)}.table-responsive .table tbody{background-color:var(--color-bg-primary)}.table-responsive .table tbody td{height:35px!important;min-height:35px!important;max-height:35px!important;vertical-align:middle!important;padding:.2rem .8rem!important;font-size:small;color:var(--color-text-primary);background-color:var(--color-bg-primary);border-color:var(--color-border-default)}.table-responsive .table tbody tr{height:35px!important;min-height:35px!important;max-height:35px!important;cursor:pointer;background-color:var(--color-bg-primary)}.table-responsive .table tbody tr:hover{background-color:var(--color-bg-hover)!important}.table-responsive .table tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table tbody .text-muted{color:var(--color-text-muted)!important}.table-responsive .table tbody input,.table-responsive .table tbody select{border:1px solid var(--color-border-default);height:100%!important;font-size:smaller!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .table tbody input:focus,.table-responsive .table tbody select:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}.table-responsive .table tbody input::placeholder,.table-responsive .table tbody select::placeholder{color:var(--color-text-muted)}.table-responsive .table tbody input[type=text],.table-responsive .table tbody input:not([type]){width:100%!important}.table-responsive .table tbody input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table tbody select{width:100%!important;padding:.25rem .5rem}.table-responsive .table thead th.boolean-column,.table-responsive .table tbody td.boolean-column,.table-responsive .table thead th.selection-column,.table-responsive .table tbody td.selection-column,.table-responsive .table thead th.table-actions-header,.table-responsive .table tbody td.table-actions-header{width:1%;white-space:nowrap}.table-responsive .table thead th.number-column,.table-responsive .table tbody td.number-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.number-column input[type=number],.table-responsive .table tbody td.number-column input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table thead th.date-column,.table-responsive .table tbody td.date-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.date-column input[type=datetime-local],.table-responsive .table tbody td.date-column input[type=datetime-local]{min-width:200px!important;width:200px!important;text-align:center}.table-responsive .table .actions-cell{white-space:nowrap;padding:0!important}.table-responsive .table .actions-container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;height:100%}.table-responsive .table .actions-container.centered-actions{justify-content:center}.table-responsive .text-center.text-muted{color:var(--color-text-muted)!important}.table-responsive .btn-outline-secondary{background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .btn-outline-secondary:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium)}.table-responsive .btn-outline-secondary:focus{box-shadow:var(--shadow-focus)}.table-responsive .pagination-container{display:flex;justify-content:space-between;align-items:center;padding:.2rem .5rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-default);border-top:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.table-responsive .pagination-container .pagination-info{font-size:.875rem;color:var(--color-text-secondary);font-weight:500}.table-responsive .pagination-container .pagination-controls{display:flex;gap:.5rem}.table-responsive .pagination-container .pagination-controls button{min-width:36px;height:32px;padding:.25rem .5rem;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-primary);color:var(--color-text-primary);border:none}.table-responsive .pagination-container .pagination-controls button:hover:not(:disabled){background-color:var(--color-bg-hover);border:none}.table-responsive .pagination-container .pagination-controls button:disabled{opacity:.5;cursor:auto;background-color:var(--color-bg-primary);border:none}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "c80-icon", inputs: ["icon", "color", "customColor", "disabled", "size", "button", "border", "type", "textLeft", "textRight", "dark"], outputs: ["iconClick"] }, { kind: "component", type: ModalComponent, selector: "c80-modal" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c80-table', standalone: true, imports: [IconComponent, ModalComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n<div class=\"table-responsive\" [style.max-height]=\"tableMaxHeight()\" [style.overflow-y]=\"size() > 0 ? 'auto' : 'visible'\">\n  <!-- Search Bar -->\n  @if (searchable()) {\n  <div class=\"search-container\">\n    <div class=\"search-input-wrapper\">\n      <div class=\"input-group\">\n        <span class=\"input-group-text\">\n          <c80-icon icon=\"search\" [size]=\".65\" [button]=\"false\" />\n        </span>\n        <input type=\"text\" class=\"form-control search-input\" placeholder=\"Buscar...\" [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Buscar en la tabla\" />\n        @if (searchValue()) {\n        <button class=\"btn btn-outline-secondary btn-borrar\" type=\"button\" (click)=\"clearSearch()\" title=\"Limpiar b\u00FAsqueda\">\n          <c80-icon icon=\"cancel\" [size]=\".6\" />\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <table class=\"table table-bordered table-hover align-middle\">\n    <thead class=\"thead table-light sticky-header\">\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <th class=\"text-center selection-column\">\n          @if (multiple()) {\n          <input type=\"checkbox\" [checked]=\"selectAllChecked()\" [indeterminate]=\"selectAllIndeterminate()\" (change)=\"toggleSelectAll()\" aria-label=\"Seleccionar todo\" />\n          }\n        </th>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisibleInHeader(col)) {\n        @if (col.type === 'boolean') {\n        <th class=\"text-center boolean-column\">{{ col.label }}</th>\n        }\n        @else if (col.type === 'number' || col.type === 'integer') {\n        <th class=\"text-center number-column\">{{ col.label }}</th>\n        }\n        @else {\n        <th>{{ col.label }}</th>\n        }\n        }\n        }\n        @if (hasAnyActions()) {\n        <th class=\"table-actions-header\">\n          <div class=\"actions-wrapper\">\n            <span>Actions</span>\n            @if (hasCrudCreate()) {\n            <c80-icon button icon=\"add\" [disabled]=\"creating()\" title=\"Agregar\" [size]=\".6\" (iconClick)=\"startCreate()\" />\n            }\n          </div>\n        </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of data(); track trackById(i, row); let i = $index) {\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <td class=\"text-center selection-column\">\n          <input type=\"checkbox\" [checked]=\"isItemSelected(row)\" (change)=\"toggleItemSelection(row)\" [attr.aria-label]=\"'Seleccionar fila ' + (i + 1)\" />\n        </td>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisibleForRow(col, row)) {\n        @if (col.type === 'boolean') {\n        <td class=\"text-center boolean-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input type=\"checkbox\" [checked]=\"!!editRow()?.[col.accessor]\" (change)=\"onEditInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\n          }\n          @else {\n          @if (getCellValue(row, col.accessor) === true) {\n          <c80-icon icon=\"check\" [size]=\".7\" />\n          <br />\n          }\n          @else if (getCellValue(row, col.accessor) === false) {\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\n          <br />\n          }\n          }\n        </td>\n        }\n        @else if (col.type === 'number' || col.type === 'integer') {\n        <td class=\"text-center number-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\n            (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n        </td>\n        }\n        @else {\n        <td>\n          @if (editing() === row['id'] && !col.readOnly) {\n          @if (col.type === 'enum') {\n          <select class=\"form-control form-control-sm\" [value]=\"editRow()?.[col.accessor] ?? ''\" (change)=\"onEditInput($event, col.accessor, col)\">\n            <option value=\"\">{{ col.label }}</option>\n            @for (option of getEnumOptions(col); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </select>\n          }\n          @else {\n          <input class=\"form-control form-control-sm\" [type]=\"col.type === 'password' ? 'password' : 'text'\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          }\n          @else {\n          @if (col.type === 'password') {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">******</span>\n          }\n          @else if (col.type === 'enum') {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{\n            getEnumDisplayValue(getCellValue(row, col.accessor), col)\n            }}</span>\n          }\n          @else if (getCellValue(row, col.accessor) === true) {\n          <c80-icon icon=\"check\" [size]=\".7\" />\n          }\n          @else if (getCellValue(row, col.accessor) === false) {\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n          }\n        </td>\n        }\n        }\n        }\n        @if (hasAnyActions()) {\n        <td class=\"text-center actions-cell\">\n          <div class=\"actions-container\">\n            @if (editing() === row['id']) {\n            <!-- Modo edici\u00F3n: mostrar guardar y cancelar -->\n            @if (hasCrudUpdate()) {\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveEdit(row)\" [size]=\".7\" />\n            }\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelEdit()\" [size]=\".7\" />\n            }\n            @else {\n            @for (action of customActions(); track action.name) {\n            @if (shouldShowAction(action, row)) {\n            <c80-icon button [icon]=\"action.icon\" [customColor]=\"getActionColor(action)\" [color]=\"action.name === 'delete' ? 'warn' : 'primary'\" [title]=\"getActionTooltip(action)\" (iconClick)=\"onDynamicAction(action, row)\"\n              [size]=\".7\" />\n            }\n            }\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      }\n      @if (creating() && hasCrudCreate()) {\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <td class=\"text-center selection-column\">\n          <!-- Empty cell for alignment -->\n        </td>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisible(col)) {\n        @if (col.type === 'boolean') {\n        <td class=\"text-center\">\n          @if (!col.readOnly) {\n          <input type=\"checkbox\" [checked]=\"!!newRow()?.[col.accessor]\" (change)=\"onInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\n          }\n          @else {\n          <!-- ReadOnly boolean column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        } @else if (col.type === 'number' || col.type === 'integer') {\n        <td class=\"text-center number-column\">\n          @if (!col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\n            (input)=\"onInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- ReadOnly number column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        } @else {\n        <td>\n          @if (!col.readOnly) {\n          @if (col.type === 'enum') {\n          <select class=\"form-control form-control-sm\" [value]=\"newRow()?.[col.accessor] ?? ''\" (change)=\"onInput($event, col.accessor, col)\">\n            <option value=\"\">{{ col.label }}</option>\n            @for (option of getEnumOptions(col); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </select>\n          }\n          @else {\n          <input class=\"form-control form-control-sm\" type=\"text\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onInput($event, col.accessor, col)\" />\n          }\n          }\n          @else {\n          <!-- ReadOnly column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        }\n        }\n        }\n        <td class=\"text-center actions-cell\">\n          <div class=\"actions-container\">\n            @if (hasCrudCreate()) {\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveCreate()\" [size]=\".7\" />\n            }\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelCreate()\" [size]=\".7\" />\n          </div>\n        </td>\n      </tr>\n      }\n    </tbody>\n  </table>\n  @if (data().length === 0 && !creating()) {\n  <div class=\"text-center text-muted py-3 small\">\n    No hay datos para mostrar.\n  </div>\n  }\n</div>\n\n<c80-modal />", styles: ["@charset \"UTF-8\";input[type=checkbox]{width:1.3rem!important;height:1.3rem!important;accent-color:var(--color-icon-danger);background:var(--color-bg-primary);margin:0 .25rem;vertical-align:middle;cursor:pointer}.table-responsive{width:100%;overflow-x:auto}.table-responsive .search-container{margin-bottom:-.06rem}.table-responsive .search-container .search-input-wrapper .input-group .btn-borrar{border-bottom-right-radius:0;border-color:var(--color-border-default);height:32px}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text{background-color:var(--color-bg-secondary);border-color:var(--color-border-default);border-bottom-left-radius:0;color:var(--color-text-secondary);width:56.1px;height:32px;padding:.25rem .5rem}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text c80-icon{display:flex;align-items:center;justify-content:center}.table-responsive .search-container .search-input-wrapper .input-group .search-input{border-color:var(--color-border-default);border-bottom-right-radius:0;font-size:.75rem;height:32px;padding:.25rem .5rem;outline:none!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .search-container .search-input-wrapper .input-group .search-input:focus{outline:none!important}.table-responsive .search-container .search-input-wrapper .input-group .search-input::placeholder{color:var(--color-text-muted);font-style:italic}.table-responsive .table{min-width:0px;margin-bottom:.5rem;background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .table.table-bordered,.table-responsive .table.table-bordered th,.table-responsive .table.table-bordered td{border-color:var(--color-border-default)}.table-responsive .table.table-hover tbody tr:hover{background-color:var(--color-bg-hover)!important;color:var(--color-text-primary)}.table-responsive .table.table-hover tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table .sticky-header{position:sticky;top:0;z-index:10;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .table-actions-header{display:table-cell;vertical-align:middle;padding:.2rem .6rem!important;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .actions-wrapper{display:flex;align-items:center;justify-content:center;gap:.5rem;height:100%}.table-responsive .table .sticky-header th{max-height:31px!important;vertical-align:middle!important;padding:.2rem .6rem!important;font-size:small!important;background-color:var(--color-bg-secondary)!important;border-bottom:2px solid var(--color-border-default);color:var(--color-text-primary)}.table-responsive .table tbody{background-color:var(--color-bg-primary)}.table-responsive .table tbody td{height:35px!important;min-height:35px!important;max-height:35px!important;vertical-align:middle!important;padding:.2rem .8rem!important;font-size:small;color:var(--color-text-primary);background-color:var(--color-bg-primary);border-color:var(--color-border-default)}.table-responsive .table tbody tr{height:35px!important;min-height:35px!important;max-height:35px!important;cursor:pointer;background-color:var(--color-bg-primary)}.table-responsive .table tbody tr:hover{background-color:var(--color-bg-hover)!important}.table-responsive .table tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table tbody .text-muted{color:var(--color-text-muted)!important}.table-responsive .table tbody input,.table-responsive .table tbody select{border:1px solid var(--color-border-default);height:100%!important;font-size:smaller!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .table tbody input:focus,.table-responsive .table tbody select:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}.table-responsive .table tbody input::placeholder,.table-responsive .table tbody select::placeholder{color:var(--color-text-muted)}.table-responsive .table tbody input[type=text],.table-responsive .table tbody input:not([type]){width:100%!important}.table-responsive .table tbody input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table tbody select{width:100%!important;padding:.25rem .5rem}.table-responsive .table thead th.boolean-column,.table-responsive .table tbody td.boolean-column,.table-responsive .table thead th.selection-column,.table-responsive .table tbody td.selection-column,.table-responsive .table thead th.table-actions-header,.table-responsive .table tbody td.table-actions-header{width:1%;white-space:nowrap}.table-responsive .table thead th.number-column,.table-responsive .table tbody td.number-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.number-column input[type=number],.table-responsive .table tbody td.number-column input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table .actions-cell{white-space:nowrap;padding:0!important}.table-responsive .table .actions-container{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:100%}.table-responsive .text-center.text-muted{color:var(--color-text-muted)!important}.table-responsive .btn-outline-secondary{background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .btn-outline-secondary:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium)}.table-responsive .btn-outline-secondary:focus{box-shadow:var(--shadow-focus)}\n"] }]
-        }], propDecorators: { data$: [{ type: i0.Input, args: [{ isSignal: true, alias: "data$", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], inputValues$: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValues$", required: false }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], allowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelection", required: false }] }], noConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "noConfirm", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], searchTerm: [{ type: i0.Output, args: ["searchTerm"] }], errorEvent: [{ type: i0.Output, args: ["errorEvent"] }], selectable: [{ type: i0.Output, args: ["selectable"] }] } });
+            args: [{ selector: 'c80-table', standalone: true, imports: [IconComponent, ModalComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n<div class=\"table-responsive\" [style.max-height]=\"tableMaxHeight()\" [style.overflow-y]=\"size() > 0 ? 'auto' : 'visible'\">\n  <!-- Search Bar -->\n  @if (searchable()) {\n  <div class=\"search-container\">\n    <div class=\"search-input-wrapper\">\n      <div class=\"input-group\">\n        <span class=\"input-group-text\">\n          <c80-icon icon=\"search\" [size]=\".65\" [button]=\"false\" />\n        </span>\n        <input type=\"text\" class=\"form-control search-input\" placeholder=\"Buscar...\" [value]=\"searchValue()\" (input)=\"onSearchInput($event)\" aria-label=\"Buscar en la tabla\" />\n        @if (searchValue()) {\n        <button class=\"btn btn-outline-secondary btn-borrar\" type=\"button\" (click)=\"clearSearch()\" title=\"Limpiar b\u00FAsqueda\">\n          <c80-icon icon=\"cancel\" [size]=\".6\" />\n        </button>\n        }\n      </div>\n    </div>\n  </div>\n  }\n\n  <table class=\"table table-bordered table-hover align-middle\">\n    <thead class=\"thead table-light sticky-header\">\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <th class=\"text-center selection-column\">\n          @if (multiple()) {\n          <input type=\"checkbox\" [checked]=\"selectAllChecked()\" [indeterminate]=\"selectAllIndeterminate()\" (change)=\"toggleSelectAll()\" aria-label=\"Seleccionar todo\" />\n          }\n        </th>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisibleInHeader(col)) {\n        @if (col.type === 'boolean') {\n        <th class=\"text-center boolean-column\">{{ col.label }}</th>\n        }\n        @else if (col.type === 'number' || col.type === 'integer') {\n        <th class=\"text-center number-column\">{{ col.label }}</th>\n        }\n        @else if (col.type === 'date') {\n        <th class=\"text-center date-column\">{{ col.label }}</th>\n        }\n        @else {\n        <th>{{ col.label }}</th>\n        }\n        }\n        }\n        @if (hasAnyActions()) {\n        <th class=\"table-actions-header\">\n          <div class=\"actions-wrapper\">\n            <span>Actions</span>\n            @if (shouldShowCreateButton()) {\n            <c80-icon button icon=\"add\" [disabled]=\"creating()\" title=\"Agregar\" [size]=\".6\" (iconClick)=\"startCreate()\" />\n            }\n          </div>\n        </th>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      @for (row of data(); track trackById(i, row); let i = $index) {\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <td class=\"text-center selection-column\">\n          <input type=\"checkbox\" [checked]=\"isItemSelected(row)\" (change)=\"toggleItemSelection(row)\" [attr.aria-label]=\"'Seleccionar fila ' + (i + 1)\" />\n        </td>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisibleForRow(col, row)) {\n        @if (col.type === 'boolean') {\n        <td class=\"text-center boolean-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input type=\"checkbox\" [checked]=\"!!editRow()?.[col.accessor]\" (change)=\"onEditInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\n          }\n          @else {\n          @if (getCellValue(row, col.accessor) === true) {\n          <c80-icon icon=\"check\" [size]=\".7\" />\n          <br />\n          }\n          @else if (getCellValue(row, col.accessor) === false) {\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\n          <br />\n          }\n          }\n        </td>\n        }\n        @else if (col.type === 'number' || col.type === 'integer') {\n        <td class=\"text-center number-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\n            (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n        </td>\n        }\n        @else if (col.type === 'date') {\n        <td class=\"text-center date-column\">\n          @if (editing() === row['id'] && !col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"datetime-local\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n        </td>\n        }\n        @else {\n        <td>\n          @if (editing() === row['id'] && !col.readOnly) {\n          @if (col.type === 'enum') {\n          <select class=\"form-control form-control-sm\" [value]=\"editRow()?.[col.accessor] ?? ''\" (change)=\"onEditInput($event, col.accessor, col)\">\n            <option value=\"\">{{ col.label }}</option>\n            @for (option of getEnumOptions(col); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </select>\n          }\n          @else {\n          <input class=\"form-control form-control-sm\" [type]=\"col.type === 'password' ? 'password' : 'text'\" [value]=\"editRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onEditInput($event, col.accessor, col)\" />\n          }\n          }\n          @else {\n          @if (col.type === 'password') {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">******</span>\n          }\n          @else if (col.type === 'enum') {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{\n            getEnumDisplayValue(getCellValue(row, col.accessor), col)\n            }}</span>\n          }\n          @else if (getCellValue(row, col.accessor) === true) {\n          <c80-icon icon=\"check\" [size]=\".7\" />\n          }\n          @else if (getCellValue(row, col.accessor) === false) {\n          <c80-icon icon=\"cancel\" [size]=\".7\" />\n          }\n          @else {\n          <!-- eslint-disable-next-line @angular-eslint/template/no-inline-styles -->\n          <span [style.color]=\"getCellColor(getCellValue(row, col.accessor), col)\">{{ getDisplayValue(getCellValue(row,\n            col.accessor), col) }}</span>\n          }\n          }\n        </td>\n        }\n        }\n        }\n        @if (hasAnyActions()) {\n        <td class=\"text-end actions-cell\">\n          <div class=\"actions-container\" [class.centered-actions]=\"editing() === row['id']\">\n            @if (editing() === row['id']) {\n            <!-- Modo edici\u00F3n: mostrar guardar y cancelar -->\n            @if (hasCrudUpdate()) {\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveEdit(row)\" [size]=\".7\" />\n            }\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelEdit()\" [size]=\".7\" />\n            }\n            @else {\n            @for (action of customActions(); track action.name) {\n            @if (shouldShowAction(action, row, data())) {\n            <c80-icon button [icon]=\"action.icon\" [customColor]=\"getActionColor(action)\" [color]=\"action.name === 'delete' ? 'warn' : 'primary'\" [title]=\"getActionTooltip(action)\" (iconClick)=\"onDynamicAction(action, row)\" [size]=\".7\" />\n            }\n            }\n            }\n          </div>\n        </td>\n        }\n      </tr>\n      }\n      @if (creating() && hasCrudCreate()) {\n      <tr>\n        @if (allowSelection() && data().length !== 0) {\n        <td class=\"text-center selection-column\">\n          <!-- Empty cell for alignment -->\n        </td>\n        }\n        @for (col of columns(); track col) {\n        @if (isColumnVisible(col)) {\n        @if (col.type === 'boolean') {\n        <td class=\"text-center\">\n          @if (!col.readOnly) {\n          <input type=\"checkbox\" [checked]=\"!!newRow()?.[col.accessor]\" (change)=\"onInput($event, col.accessor, col)\" [attr.aria-label]=\"col.label\" />\n          }\n          @else {\n          <!-- ReadOnly boolean column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        } @else if (col.type === 'number' || col.type === 'integer') {\n        <td class=\"text-center number-column\">\n          @if (!col.readOnly) {\n          <input class=\"form-control form-control-sm\" type=\"number\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" [min]=\"col.min\" [max]=\"col.max\" [step]=\"col.type === 'integer' ? '1' : 'any'\"\n            (input)=\"onInput($event, col.accessor, col)\" />\n          }\n          @else {\n          <!-- ReadOnly number column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        } @else {\n        <td>\n          @if (!col.readOnly) {\n          @if (col.type === 'enum') {\n          <select class=\"form-control form-control-sm\" [value]=\"newRow()?.[col.accessor] ?? ''\" (change)=\"onInput($event, col.accessor, col)\">\n            <option value=\"\">{{ col.label }}</option>\n            @for (option of getEnumOptions(col); track option.value) {\n            <option [value]=\"option.value\">{{ option.label }}</option>\n            }\n          </select>\n          }\n          @else {\n          <input class=\"form-control form-control-sm\" type=\"text\" [value]=\"newRow()?.[col.accessor] ?? ''\" [placeholder]=\"col.label\" (input)=\"onInput($event, col.accessor, col)\" />\n          }\n          }\n          @else {\n          <!-- ReadOnly column in create mode shows empty -->\n          <span class=\"text-muted\">-</span>\n          }\n        </td>\n        }\n        }\n        }\n        <td class=\"text-end actions-cell\">\n          <div class=\"actions-container centered-actions\">\n            @if (hasCrudCreate()) {\n            <c80-icon button icon=\"check\" title=\"Guardar\" (iconClick)=\"saveCreate()\" [size]=\".7\" />\n            }\n            <c80-icon button icon=\"cancel\" color=\"warn\" title=\"Cancelar\" (iconClick)=\"cancelCreate()\" [size]=\".7\" />\n          </div>\n        </td>\n      </tr>\n      }\n    </tbody>\n  </table>\n  @if (data().length === 0 && !creating()) {\n  <div class=\"text-center text-muted py-3 small\">\n    No hay datos para mostrar.\n  </div>\n  }\n\n  <!-- Pagination Controls -->\n  @if (paginated() && data().length > 0) {\n  <div class=\"pagination-container\">\n    <div class=\"pagination-info\">\n      P\u00E1gina {{ currentPage() }} de {{ totalPages() }}\n    </div>\n    <div class=\"pagination-controls\">\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasPrevPage()\" (click)=\"onPrevPage()\" title=\"P\u00E1gina anterior\">\n        <c80-icon icon=\"arrowLeft\" [size]=\".6\" [button]=\"false\" />\n      </button>\n      <button type=\"button\" class=\"btn btn-sm\" [disabled]=\"!hasNextPage()\" (click)=\"onNextPage()\" title=\"P\u00E1gina siguiente\">\n        <c80-icon icon=\"arrowRight\" [size]=\".6\" [button]=\"false\" />\n      </button>\n    </div>\n  </div>\n  }\n</div>\n\n<c80-modal />", styles: ["@charset \"UTF-8\";input[type=checkbox]{width:1.3rem!important;height:1.3rem!important;accent-color:var(--color-icon-danger);background:var(--color-bg-primary);margin:0 .25rem;vertical-align:middle;cursor:pointer}.table-responsive{width:100%;overflow-x:auto}.table-responsive .search-container{margin-bottom:-.06rem}.table-responsive .search-container .search-input-wrapper .input-group .btn-borrar{border-bottom-right-radius:0;border-color:var(--color-border-default);height:32px}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text{background-color:var(--color-bg-secondary);border-color:var(--color-border-default);border-bottom-left-radius:0;color:var(--color-text-secondary);width:56.1px;height:32px;padding:.25rem .5rem}.table-responsive .search-container .search-input-wrapper .input-group .input-group-text c80-icon{display:flex;align-items:center;justify-content:center}.table-responsive .search-container .search-input-wrapper .input-group .search-input{border-color:var(--color-border-default);border-bottom-right-radius:0;font-size:.75rem;height:32px;padding:.25rem .5rem;outline:none!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .search-container .search-input-wrapper .input-group .search-input:focus{outline:none!important}.table-responsive .search-container .search-input-wrapper .input-group .search-input::placeholder{color:var(--color-text-muted);font-style:italic}.table-responsive .table{min-width:0px;margin-bottom:0;background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .table.table-bordered,.table-responsive .table.table-bordered th,.table-responsive .table.table-bordered td{border-color:var(--color-border-default)}.table-responsive .table.table-hover tbody tr:hover{background-color:var(--color-bg-hover)!important;color:var(--color-text-primary)}.table-responsive .table.table-hover tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table .sticky-header{position:sticky;top:0;z-index:10;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .table-actions-header{display:table-cell;vertical-align:middle;padding:.2rem .6rem!important;background-color:var(--color-bg-secondary)!important}.table-responsive .table .sticky-header .actions-wrapper{display:flex;align-items:center;justify-content:center;gap:.5rem;height:100%}.table-responsive .table .sticky-header th{max-height:31px!important;vertical-align:middle!important;padding:.2rem .6rem!important;font-size:small!important;background-color:var(--color-bg-secondary)!important;border-bottom:2px solid var(--color-border-default);color:var(--color-text-primary)}.table-responsive .table tbody{background-color:var(--color-bg-primary)}.table-responsive .table tbody td{height:35px!important;min-height:35px!important;max-height:35px!important;vertical-align:middle!important;padding:.2rem .8rem!important;font-size:small;color:var(--color-text-primary);background-color:var(--color-bg-primary);border-color:var(--color-border-default)}.table-responsive .table tbody tr{height:35px!important;min-height:35px!important;max-height:35px!important;cursor:pointer;background-color:var(--color-bg-primary)}.table-responsive .table tbody tr:hover{background-color:var(--color-bg-hover)!important}.table-responsive .table tbody tr:hover td{background-color:var(--color-bg-hover)}.table-responsive .table tbody .text-muted{color:var(--color-text-muted)!important}.table-responsive .table tbody input,.table-responsive .table tbody select{border:1px solid var(--color-border-default);height:100%!important;font-size:smaller!important;background-color:var(--color-bg-primary);color:var(--color-text-primary)}.table-responsive .table tbody input:focus,.table-responsive .table tbody select:focus{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus)}.table-responsive .table tbody input::placeholder,.table-responsive .table tbody select::placeholder{color:var(--color-text-muted)}.table-responsive .table tbody input[type=text],.table-responsive .table tbody input:not([type]){width:100%!important}.table-responsive .table tbody input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table tbody select{width:100%!important;padding:.25rem .5rem}.table-responsive .table thead th.boolean-column,.table-responsive .table tbody td.boolean-column,.table-responsive .table thead th.selection-column,.table-responsive .table tbody td.selection-column,.table-responsive .table thead th.table-actions-header,.table-responsive .table tbody td.table-actions-header{width:1%;white-space:nowrap}.table-responsive .table thead th.number-column,.table-responsive .table tbody td.number-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.number-column input[type=number],.table-responsive .table tbody td.number-column input[type=number]{min-width:80px!important;width:80px!important;text-align:center}.table-responsive .table thead th.date-column,.table-responsive .table tbody td.date-column{width:1%;white-space:nowrap;text-align:center}.table-responsive .table thead th.date-column input[type=datetime-local],.table-responsive .table tbody td.date-column input[type=datetime-local]{min-width:200px!important;width:200px!important;text-align:center}.table-responsive .table .actions-cell{white-space:nowrap;padding:0!important}.table-responsive .table .actions-container{display:flex;flex-direction:row;justify-content:flex-end;align-items:center;width:100%;height:100%}.table-responsive .table .actions-container.centered-actions{justify-content:center}.table-responsive .text-center.text-muted{color:var(--color-text-muted)!important}.table-responsive .btn-outline-secondary{background-color:var(--color-bg-primary);color:var(--color-text-primary);border-color:var(--color-border-default)}.table-responsive .btn-outline-secondary:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-medium)}.table-responsive .btn-outline-secondary:focus{box-shadow:var(--shadow-focus)}.table-responsive .pagination-container{display:flex;justify-content:space-between;align-items:center;padding:.2rem .5rem;background-color:var(--color-bg-secondary);border:1px solid var(--color-border-default);border-top:none;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem}.table-responsive .pagination-container .pagination-info{font-size:.875rem;color:var(--color-text-secondary);font-weight:500}.table-responsive .pagination-container .pagination-controls{display:flex;gap:.5rem}.table-responsive .pagination-container .pagination-controls button{min-width:36px;height:32px;padding:.25rem .5rem;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-primary);color:var(--color-text-primary);border:none}.table-responsive .pagination-container .pagination-controls button:hover:not(:disabled){background-color:var(--color-bg-hover);border:none}.table-responsive .pagination-container .pagination-controls button:disabled{opacity:.5;cursor:auto;background-color:var(--color-bg-primary);border:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { data$: [{ type: i0.Input, args: [{ isSignal: true, alias: "data$", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], inputValues$: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputValues$", required: false }] }], customActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "customActions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], allowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowSelection", required: false }] }], noConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "noConfirm", required: false }] }], paginated: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginated", required: false }] }], paginationConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationConfig", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], searchTerm: [{ type: i0.Output, args: ["searchTerm"] }], errorEvent: [{ type: i0.Output, args: ["errorEvent"] }], selectable: [{ type: i0.Output, args: ["selectable"] }], paginationChange: [{ type: i0.Output, args: ["paginationChange"] }] } });
 //# sourceMappingURL=table.component.js.map