npm - @c80/ui - Versions diffs - 1.0.57 → 1.0.62 - Mend

@c80/ui 1.0.57 → 1.0.62

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

Files changed (166) hide show

package/esm2022/lib/table/table-selection.service.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-selection.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/table/table-selection.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { type OutputEmitterRef, Injectable, signal } from '@angular/core';\n\n/*\n Servicio para gestionar la selección de elementos en tablas C80\n \n Maneja:\n * - Selección simple y múltiple\n * - Estado de selección completa\n * - Preservación de selección tras actualizaciones de datos\n * - Emisión de eventos de selección\n /\n@Injectable({\n providedIn: 'root'\n})\nexport class TableSelectionService {\n\n /\n Inicializa el estado de selección para una nueva tabla\n * @returns Objeto con signals y métodos de selección\n /\n createSelectionState<T extends Record<string, unknown>>() {\n const selectedItems = signal<Set<string>>(new Set());\n const selectAllChecked = signal(false);\n const selectAllIndeterminate = signal(false);\n\n const signals = { selectedItems, selectAllChecked, selectAllIndeterminate };\n\n return {\n selectedItems: selectedItems.asReadonly(),\n selectAllChecked: selectAllChecked.asReadonly(),\n selectAllIndeterminate: selectAllIndeterminate.asReadonly(),\n clearSelection: () => this.clearSelection(signals),\n toggleSelectAll: (allItems: T[]) => this.toggleSelectAll(signals, allItems),\n toggleItemSelection: (item: T, multiple: boolean) => this.toggleItemSelection(selectedItems, item, multiple),\n isItemSelected: (item: T) => this.isItemSelected(selectedItems, item),\n preserveSelection: (newData: T[]) => this.preserveSelection(signals, newData),\n getSelectedItems: (allData: T[]) => this.getSelectedItems(selectedItems, allData),\n };\n }\n\n private clearSelection(signals: {\n selectedItems: ReturnType<typeof signal<Set<string>>>;\n selectAllChecked: ReturnType<typeof signal<boolean>>;\n selectAllIndeterminate: ReturnType<typeof signal<boolean>>;\n }): void {\n signals.selectedItems.set(new Set());\n signals.selectAllChecked.set(false);\n signals.selectAllIndeterminate.set(false);\n }\n\n private toggleSelectAll<T extends Record<string, unknown>>(\n signals: {\n selectedItems: ReturnType<typeof signal<Set<string>>>;\n selectAllChecked: ReturnType<typeof signal<boolean>>;\n selectAllIndeterminate: ReturnType<typeof signal<boolean>>;\n },\n allItems: T[]\n ): void {\n const currentSelection = signals.selectedItems();\n\n if (currentSelection.size === allItems.length) {\n signals.selectedItems.set(new Set());\n signals.selectAllChecked.set(false);\n signals.selectAllIndeterminate.set(false);\n } else {\n const allIds = new Set(allItems.map(item => item['id'] as string));\n signals.selectedItems.set(allIds);\n this.updateSelectAllState(allItems, allIds.size, signals.selectAllChecked, signals.selectAllIndeterminate);\n }\n }\n\n private toggleItemSelection<T extends Record<string, unknown>>(\n selectedItems: ReturnType<typeof signal<Set<string>>>,\n item: T,\n multiple: boolean\n ): void {\n const id = item['id'] as string;\n const currentSelection = new Set(selectedItems());\n\n if (!multiple) {\n currentSelection.clear();\n if (!selectedItems().has(id)) {\n currentSelection.add(id);\n }\n } else if (currentSelection.has(id)) {\n currentSelection.delete(id);\n } else {\n currentSelection.add(id);\n }\n\n selectedItems.set(currentSelection);\n }\n\n private isItemSelected<T extends Record<string, unknown>>(\n selectedItems: ReturnType<typeof signal<Set<string>>>,\n item: T\n ): boolean {\n return selectedItems().has(item['id'] as string);\n }\n\n private preserveSelection<T extends Record<string, unknown>>(\n signals: {\n selectedItems: ReturnType<typeof signal<Set<string>>>;\n selectAllChecked: ReturnType<typeof signal<boolean>>;\n selectAllIndeterminate: ReturnType<typeof signal<boolean>>;\n },\n newData: T[]\n ): void {\n const currentSelection = signals.selectedItems();\n\n if (currentSelection.size === 0 \|\| newData.length === 0) {\n this.clearSelection(signals);\n return;\n }\n\n const availableIds = new Set(newData.map(item => item['id'] as string));\n const preservedSelection = new Set(\n Array.from(currentSelection).filter(id => availableIds.has(id))\n );\n\n signals.selectedItems.set(preservedSelection);\n this.updateSelectAllState(newData, preservedSelection.size, signals.selectAllChecked, signals.selectAllIndeterminate);\n }\n\n private getSelectedItems<T extends Record<string, unknown>>(\n selectedItems: ReturnType<typeof signal<Set<string>>>,\n allData: T[]\n ): T[] {\n const selectedIds = selectedItems();\n return allData.filter(item => selectedIds.has(item['id'] as string));\n }\n\n private updateSelectAllState<T extends Record<string, unknown>>(\n allItems: T[],\n selectedCount: number,\n selectAllChecked: ReturnType<typeof signal<boolean>>,\n selectAllIndeterminate: ReturnType<typeof signal<boolean>>\n ): void {\n const totalCount = allItems.length;\n\n if (selectedCount === 0) {\n selectAllChecked.set(false);\n selectAllIndeterminate.set(false);\n } else if (selectedCount === totalCount) {\n selectAllChecked.set(true);\n selectAllIndeterminate.set(false);\n } else {\n selectAllChecked.set(false);\n selectAllIndeterminate.set(true);\n }\n }\n\n /\n Emite los elementos seleccionados a través del output proporcionado\n * @param selectionState - Estado de selección\n * @param allData - Todos los datos de la tabla\n * @param selectableEmitter - Output para emitir la selección\n */\n emitSelection<T extends Record<string, unknown>>(\n selectionState: { getSelectedItems: (allData: T[]) => T[] },\n allData: T[],\n selectableEmitter: OutputEmitterRef<T[]>\n ): void {\n const selectedItems = selectionState.getSelectedItems(allData);\n selectableEmitter.emit(selectedItems);\n }\n}\n"]}
1	+ {"version":3,"file":"table-selection.service.js","sourceRoot":"","sources":["../../../../../libs/ui/src/lib/table/table-selection.service.ts"],"names":[],"mappings":"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","sourcesContent":["import { type OutputEmitterRef, Injectable, signal, type Signal } from '@angular/core';\n\ninterface SelectionState<T extends Record<string, unknown>> {\n selectedItems: Signal<Set<string>>;\n selectAllChecked: Signal<boolean>;\n selectAllIndeterminate: Signal<boolean>;\n clearSelection: () => void;\n toggleSelectAll: (allItems: T[]) => void;\n toggleItemSelection: (item: T, multiple: boolean) => void;\n isItemSelected: (item: T) => boolean;\n preserveSelection: (newData: T[]) => void;\n getSelectedItems: (allData: T[]) => T[];\n}\n\n/*\n Servicio para gestionar la selección de elementos en tablas C80\n \n Maneja:\n * - Selección simple y múltiple\n * - Estado de selección completa\n * - Preservación de selección tras actualizaciones de datos\n * - Emisión de eventos de selección\n /\n@Injectable({\n providedIn: 'root'\n})\nexport class TableSelectionService {\n\n /\n Inicializa el estado de selección para una nueva tabla\n * @returns Objeto con signals y métodos de selección\n /\n createSelectionState<T extends Record<string, unknown>>(): SelectionState<T> {\n const selectedItems = signal<Set<string>>(new Set());\n const selectAllChecked = signal(false);\n const selectAllIndeterminate = signal(false);\n\n const signals = { selectedItems, selectAllChecked, selectAllIndeterminate };\n\n return {\n selectedItems: selectedItems.asReadonly(),\n selectAllChecked: selectAllChecked.asReadonly(),\n selectAllIndeterminate: selectAllIndeterminate.asReadonly(),\n clearSelection: () => this.clearSelection(signals),\n toggleSelectAll: (allItems: T[]) => this.toggleSelectAll(signals, allItems),\n toggleItemSelection: (item: T, multiple: boolean) => this.toggleItemSelection(selectedItems, item, multiple),\n isItemSelected: (item: T) => this.isItemSelected(selectedItems, item),\n preserveSelection: (newData: T[]) => this.preserveSelection(signals, newData),\n getSelectedItems: (allData: T[]) => this.getSelectedItems(selectedItems, allData),\n };\n }\n\n private clearSelection(signals: {\n selectedItems: ReturnType<typeof signal<Set<string>>>;\n selectAllChecked: ReturnType<typeof signal<boolean>>;\n selectAllIndeterminate: ReturnType<typeof signal<boolean>>;\n }): void {\n signals.selectedItems.set(new Set());\n signals.selectAllChecked.set(false);\n signals.selectAllIndeterminate.set(false);\n }\n\n private toggleSelectAll<T extends Record<string, unknown>>(\n signals: {\n selectedItems: ReturnType<typeof signal<Set<string>>>;\n selectAllChecked: ReturnType<typeof signal<boolean>>;\n selectAllIndeterminate: ReturnType<typeof signal<boolean>>;\n },\n allItems: T[]\n ): void {\n const currentSelection = signals.selectedItems();\n\n if (currentSelection.size === allItems.length) {\n signals.selectedItems.set(new Set());\n signals.selectAllChecked.set(false);\n signals.selectAllIndeterminate.set(false);\n } else {\n const allIds = new Set(allItems.map(item => item['id'] as string));\n signals.selectedItems.set(allIds);\n this.updateSelectAllState({\n allItems,\n selectedCount: allIds.size,\n selectAllChecked: signals.selectAllChecked,\n selectAllIndeterminate: signals.selectAllIndeterminate\n });\n }\n }\n\n private toggleItemSelection<T extends Record<string, unknown>>(\n selectedItems: ReturnType<typeof signal<Set<string>>>,\n item: T,\n multiple: boolean\n ): void {\n const id = item['id'] as string;\n const currentSelection = new Set(selectedItems());\n\n if (!multiple) {\n currentSelection.clear();\n if (!selectedItems().has(id)) {\n currentSelection.add(id);\n }\n } else if (currentSelection.has(id)) {\n currentSelection.delete(id);\n } else {\n currentSelection.add(id);\n }\n\n selectedItems.set(currentSelection);\n }\n\n private isItemSelected<T extends Record<string, unknown>>(\n selectedItems: ReturnType<typeof signal<Set<string>>>,\n item: T\n ): boolean {\n return selectedItems().has(item['id'] as string);\n }\n\n private preserveSelection<T extends Record<string, unknown>>(\n signals: {\n selectedItems: ReturnType<typeof signal<Set<string>>>;\n selectAllChecked: ReturnType<typeof signal<boolean>>;\n selectAllIndeterminate: ReturnType<typeof signal<boolean>>;\n },\n newData: T[]\n ): void {\n const currentSelection = signals.selectedItems();\n\n if (currentSelection.size === 0 \|\| newData.length === 0) {\n this.clearSelection(signals);\n return;\n }\n\n const availableIds = new Set(newData.map(item => item['id'] as string));\n const preservedSelection = new Set(\n Array.from(currentSelection).filter(id => availableIds.has(id))\n );\n\n signals.selectedItems.set(preservedSelection);\n this.updateSelectAllState({\n allItems: newData,\n selectedCount: preservedSelection.size,\n selectAllChecked: signals.selectAllChecked,\n selectAllIndeterminate: signals.selectAllIndeterminate\n });\n }\n\n private getSelectedItems<T extends Record<string, unknown>>(\n selectedItems: ReturnType<typeof signal<Set<string>>>,\n allData: T[]\n ): T[] {\n const selectedIds = selectedItems();\n return allData.filter(item => selectedIds.has(item['id'] as string));\n }\n\n private updateSelectAllState<T extends Record<string, unknown>>(context: {\n allItems: T[];\n selectedCount: number;\n selectAllChecked: ReturnType<typeof signal<boolean>>;\n selectAllIndeterminate: ReturnType<typeof signal<boolean>>;\n }): void {\n const { allItems, selectedCount, selectAllChecked, selectAllIndeterminate } = context;\n const totalCount = allItems.length;\n\n if (selectedCount === 0) {\n selectAllChecked.set(false);\n selectAllIndeterminate.set(false);\n } else if (selectedCount === totalCount) {\n selectAllChecked.set(true);\n selectAllIndeterminate.set(false);\n } else {\n selectAllChecked.set(false);\n selectAllIndeterminate.set(true);\n }\n }\n\n /\n Emite los elementos seleccionados a través del output proporcionado\n * @param selectionState - Estado de selección\n * @param allData - Todos los datos de la tabla\n * @param selectableEmitter - Output para emitir la selección\n */\n emitSelection<T extends Record<string, unknown>>(\n selectionState: { getSelectedItems: (allData: T[]) => T[] },\n allData: T[],\n selectableEmitter: OutputEmitterRef<T[]>\n ): void {\n const selectedItems = selectionState.getSelectedItems(allData);\n selectableEmitter.emit(selectedItems);\n }\n}\n"]}

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

@@ -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,9 +190,17 @@ 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(), this.data(), this.creating(), this.editing()), ...(ngDevMode ? [{ debugName: "keys" }] : []));
+    keys = computed(() => this.visibilityService.updateVisibleKeys(this.columns(), { data: this.data(), creating: this.creating(), editing: this.editing() }), ...(ngDevMode ? [{ debugName: "keys" }] : []));
     // Computed - Detecta acciones CRUD y custom
     /* v8 ignore next 5 */
     hasAnyActions = computed(() => this.customActions().length > 0, ...(ngDevMode ? [{ debugName: "hasAnyActions" }] : []));
@@ -193,16 +208,34 @@ 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
      */
-    handleInput(event, key, col, isEdit) {
+    handleInput(options) {
+        const { event, key, col, isEdit } = options;
         const updateFn = isEdit
             ? this.crudState.updateEditRow.bind(this.crudState)
             : this.crudState.updateNewRow.bind(this.crudState);
@@ -214,12 +247,18 @@ import * as i0 from "@angular/core";
     /**
      * Maneja confirmación modal de forma genérica
      */
-    async handleConfirmAction(title, message, confirmText, action) {
+    async handleConfirmAction(options) {
+        const { title, message, confirmText, action } = options;
         if (this.noConfirm()) {
             action();
             return;
         }
-        const confirmed = await this.modalService.confirm(title, message, confirmText, 'Cancelar');
+        const confirmed = await this.modalService.confirm({
+            title,
+            message,
+            confirmText,
+            cancelText: 'Cancelar'
+        });
         if (confirmed) {
             action();
         }
@@ -254,19 +293,29 @@ import * as i0 from "@angular/core";
         this.modalService.closeModal();
     }
     onInput(event, key, col) {
-        this.handleInput(event, key, col, false);
+        this.handleInput({ event, key, col, isEdit: false });
     }
     onEditInput(event, key, col) {
-        this.handleInput(event, key, col, true);
+        this.handleInput({ event, key, col, isEdit: true });
     }
     async onDelete(row) {
-        await this.handleConfirmAction('Confirmar eliminación', '¿Está seguro de que desea eliminar este elemento? Esta acción no se puede deshacer.', 'Eliminar', () => this.actionClick.emit({ action: 'delete', row }));
+        await this.handleConfirmAction({
+            title: 'Confirmar eliminación',
+            message: '¿Está seguro de que desea eliminar este elemento? Esta acción no se puede deshacer.',
+            confirmText: 'Eliminar',
+            action: () => this.actionClick.emit({ action: 'delete', row })
+        });
     }
     async onCancel(row) {
-        await this.handleConfirmAction('Confirmar cancelación', '¿Está seguro de que desea cancelar este elemento?', 'Cancelar elemento', () => this.actionClick.emit({ action: 'cancel', row }));
+        await this.handleConfirmAction({
+            title: 'Confirmar cancelación',
+            message: '¿Está seguro de que desea cancelar este elemento?',
+            confirmText: 'Cancelar elemento',
+            action: () => this.actionClick.emit({ action: 'cancel', row })
+        });
     }
     startCreate() {
-        this.crudState.startCreate(this.columns(), this.data());
+        this.crudState.startCreate({ columns: this.columns(), data: this.data() });
     }
     cancelCreate() {
         this.crudState.cancelCreate();
@@ -275,12 +324,13 @@ import * as i0 from "@angular/core";
         const current = this.newRow();
         if (current) {
             const convertedRow = this.convertRowTypes(current);
-            this.actionClick.emit({ action: 'create', row: convertedRow });
+            const filteredRow = this.filterReadOnlyFields(convertedRow);
+            this.actionClick.emit({ action: 'create', row: filteredRow });
             this.cancelCreate();
         }
     }
     onEdit(row) {
-        this.crudState.startEdit(row, this.columns(), this.data());
+        this.crudState.startEdit({ row, columns: this.columns(), data: this.data() });
     }
     cancelEdit() {
         this.crudState.cancelEdit();
@@ -289,12 +339,31 @@ import * as i0 from "@angular/core";
         const changes = this.editRow();
         if (changes) {
             const convertedChanges = this.convertRowTypes(changes);
-            const updatedRow = { ...row, ...convertedChanges };
-            this.actionClick.emit({ action: 'update', row: updatedRow });
+            const filteredChanges = this.filterReadOnlyFields(convertedChanges);
+            // Solo enviar los cambios filtrados junto con el ID
+            const updatePayload = {
+                id: row['id'],
+                ...filteredChanges
+            };
+            this.actionClick.emit({ action: 'update', row: updatePayload });
             this.cancelEdit();
         }
     }
     /**
+     * Filtra los campos readOnly de los cambios para evitar enviarlos en las actualizaciones
+     */
+    filterReadOnlyFields(changes) {
+        const columnsMap = new Map(this.columns().map(col => [col.accessor, col]));
+        const filtered = {};
+        for (const [key, value] of Object.entries(changes)) {
+            const col = columnsMap.get(key);
+            // Solo incluir campos que no son readOnly
+            if (!col?.readOnly) {
+                filtered[key] = value;
+            }
+        }
+        return filtered;
+    } /**
      * Convierte todos los valores de una fila según los tipos definidos en las columnas
      * Asegura que los datos emitidos tengan el tipo correcto (integer, number, boolean, etc.)
      */
@@ -356,7 +425,12 @@ import * as i0 from "@angular/core";
     async handleActionWithConfirmation(action, row) {
         if (!action.confirmation)
             return;
-        const confirmed = await this.modalService.confirm(action.confirmation.title, action.confirmation.message, action.confirmation.confirmText ?? 'Confirmar', action.confirmation.cancelText ?? 'Cancelar');
+        const confirmed = await this.modalService.confirm({
+            title: action.confirmation.title,
+            message: action.confirmation.message,
+            confirmText: action.confirmation.confirmText ?? 'Confirmar',
+            cancelText: action.confirmation.cancelText ?? 'Cancelar'
+        });
         if (confirmed) {
             this.actionClick.emit({ action: action.name, row });
         }
@@ -417,10 +491,38 @@ import * as i0 from "@angular/core";
         });
     }
     isColumnVisibleInHeader(column) {
-        return this.visibilityService.isColumnVisibleInHeader(column, this.data(), this.creating(), this.editing());
+        return this.visibilityService.isColumnVisibleInHeader(column, { data: this.data(), creating: this.creating(), editing: this.editing() });
     }
     isColumnVisibleForRow(column, row) {
-        return this.visibilityService.isColumnVisibleForRow(column, row, this.data(), this.editing());
+        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.
@@ -439,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