@c80/ui 1.0.42 → 1.0.44

package/lib/table/table.component.d.ts

@@ -1,7 +1,7 @@
-import { EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { OnInit, OnDestroy } from '@angular/core';
 import { Observable } from 'rxjs';
-import { type IconType } from '../icon';
-import { C80TableColDef, ID } from './table.types';
+import { C80TableColDef, CustomTableAction } from './table.types';
+import { getActionTooltip } from './table.utils';
 import * as i0 from "@angular/core";
 /**
  * C80TableComponent - Componente de tabla avanzado con funcionalidades CRUD
@@ -51,142 +51,170 @@ import * as i0 from "@angular/core";
  * - 'password': Texto oculto (input type="password")
  * - 'enum': Lista de opciones predefinidas (select)
  *
- * EJEMPLOS:
+ * SISTEMA DE ACCIONES UNIFICADO (customActions):
+ * =============================================
+ *
+ * Input: `customActions: CustomTableAction[]` - Array de acciones dinámicas
+ * Output: `(actionClick)` - Evento unificado que emite { action: string, row: T }
+ *
+ * ACCIONES CRUD PREDEFINIDAS (TABLE_CRUD_ACTIONS):
+ * ------------------------------------------------
+ * - CREATE: Solo aparece como botón "+" en header (no en filas)
+ * - UPDATE: Activa modo edición (muestra inputs), botón "✓" guarda cambios
+ * - DELETE: Muestra confirmación y emite evento delete
+ * - CANCEL: Muestra confirmación y emite evento cancel (opcional)
+ *
+ * ACCIONES PERSONALIZADAS (Custom Actions):
+ * -----------------------------------------
+ * Interfaz: { name: string, icon: IconType, condition?: (row) => boolean, tooltip?: string }
+ * - name: ID único de la acción
+ * - icon: Icono del botón (ej: 'settings', 'upload', 'refresh')
+ * - condition: Función opcional para mostrar/ocultar según estado de fila
+ * - tooltip: Texto al hacer hover (default: name)
+ *
+ * MANEJO EN COMPONENTE:
+ * --------------------
+ * ```typescript
+ * // 1. Definir acciones en constants:
+ * export const ENTITY_TABLE_ACTIONS: CustomTableAction[] = [
+ *   TABLE_CRUD_ACTIONS.CREATE,
+ *   TABLE_CRUD_ACTIONS.UPDATE,
+ *   { name: 'custom-action', icon: 'settings', tooltip: 'Configurar' },
+ *   TABLE_CRUD_ACTIONS.DELETE
+ * ];
+ *
+ * // 2. En el componente:
+ * readonly tableActions = ENTITY_TABLE_ACTIONS;
+ *
+ * handleAction({ action, row }) {
+ *   const entity = row as unknown as EntityType;
+ *   switch (action) {
+ *     case 'create': this.onCreate(row); break;
+ *     case 'update': this.onUpdate(entity); break;
+ *     case 'delete': this.onDelete(entity.id); break;
+ *     case 'custom-action': this.onCustom(entity); break;
+ *   }
+ * }
+ * ```
+ *
+ * ACCIONES CON CONDICIÓN:
+ * ----------------------
+ * ```typescript
+ * {
+ *   name: 'enable',
+ *   icon: 'toggleOn',
+ *   tooltip: 'Habilitar',
+ *   condition: (row) => row['enabled'] === false
+ * }
+ * ```
+ *
+ * CONSTANTES REUTILIZABLES:
+ * ------------------------
+ * - TABLE_CRUD_ACTIONS: Objeto con CREATE, UPDATE, DELETE, CANCEL
+ * - BASIC_CRUD_ACTIONS: Array con [CREATE, UPDATE, DELETE]
+ * Importar desde: `@shared` o `@shared/constants`
+ *
+ * EJEMPLOS COMPLETOS:
+ * ------------------
  * - { accessor: 'id', visible: false } → NUNCA se muestra
  * - { accessor: 'motorPos', hideIfAllValuesAreNull: true, default: 0, type: 'integer' } → Entero (5.7 → 5)
  * - { accessor: 'weight', type: 'number', default: 2.5 } → Decimal preservado (5.7 → 5.7)
  * - { accessor: 'status', default: 'active' } → Se autorellena con 'active' en creación
  * - { accessor: 'name' } → Siempre visible, sin valor por defecto (cadena vacía)
  * - inputValues$ emite { motorPos: 5, weight: 2.3 } → actualiza inputs dinámicamente
+ * - customActions con CREATE → Muestra botón "+" en header
+ * - customActions con UPDATE → Botón "edit" activa modo edición
+ * - customActions con custom → Botón personalizado emite evento
  */ export declare class C80TableComponent<T extends Record<string, unknown>> implements OnInit, OnDestroy {
     private readonly modalService;
     private readonly visibilityService;
     private readonly dataUtils;
+    private readonly dataConverter;
     private readonly selectionService;
     private readonly crudService;
     data$: Observable<T[]>;
     columns: C80TableColDef[];
     inputValues$?: Observable<Partial<T>>;
+    customActions: CustomTableAction[];
     size: number;
     multiple: boolean;
+    searchable: boolean;
+    allowSelection: boolean;
     noConfirm: boolean;
-    customActionIcon: IconType;
-    customActionTooltip: string;
-    createAction: EventEmitter<{
-        row: Partial<T>;
-        done: (result: boolean) => void;
-    }>;
-    updateAction: EventEmitter<{
-        id: ID;
-        changes: Partial<T>;
-        done: (result: boolean) => void;
-    }>;
-    deleteAction: EventEmitter<{
-        id: ID;
-        done: (result: boolean) => void;
+    readonly actionClick: import("@angular/core").OutputEmitterRef<{
+        action: string;
+        row: T;
     }>;
-    cancelAction: EventEmitter<{
-        id: ID;
-        done: (result: boolean) => void;
-    }>;
-    viewAction: EventEmitter<T>;
-    uploadAction: EventEmitter<T>;
-    getRowButtonAction: EventEmitter<T>;
-    customAction: EventEmitter<T>;
-    moveUpAction: EventEmitter<{
-        id: ID;
-        done: (result: boolean) => void;
-    }>;
-    moveDownAction: EventEmitter<{
-        id: ID;
-        done: (result: boolean) => void;
-    }>;
-    enableAction: EventEmitter<{
-        id: ID;
-        enabled: boolean;
-        done: (result: boolean) => void;
-    }>;
-    searchTerm: EventEmitter<string>;
-    errorEvent: EventEmitter<string>;
-    selectable: EventEmitter<T[]>;
+    readonly searchTerm: import("@angular/core").OutputEmitterRef<string>;
+    readonly errorEvent: import("@angular/core").OutputEmitterRef<string>;
+    readonly selectable: import("@angular/core").OutputEmitterRef<T[]>;
     readonly data: import("@angular/core").WritableSignal<T[]>;
-    readonly keys: import("@angular/core").WritableSignal<string[]>;
     readonly searchValue: import("@angular/core").WritableSignal<string>;
     private readonly selectionState;
-    readonly selectedItems: import("@angular/core").Signal<Set<ID>>;
+    readonly selectedItems: import("@angular/core").Signal<Set<string>>;
     readonly selectAllChecked: import("@angular/core").Signal<boolean>;
     readonly selectAllIndeterminate: import("@angular/core").Signal<boolean>;
     private readonly crudState;
     readonly creating: import("@angular/core").Signal<boolean>;
     readonly newRow: import("@angular/core").Signal<Partial<T> | null>;
-    readonly editing: import("@angular/core").Signal<ID | null>;
+    readonly editing: import("@angular/core").Signal<string | null>;
     readonly editRow: import("@angular/core").Signal<Partial<T> | null>;
-    readonly hasCreateActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasUpdateActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasDeleteActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasCancelActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasViewActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasUploadActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasGetRowButtonListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasCustomActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasMoveUpActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasMoveDownActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasEnableActionListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasSearchTermListener: import("@angular/core").WritableSignal<boolean>;
-    readonly hasSelectableListener: import("@angular/core").WritableSignal<boolean>;
+    readonly keys: import("@angular/core").Signal<string[]>;
+    readonly hasAnyActions: import("@angular/core").Signal<boolean>;
+    readonly hasCrudCreate: import("@angular/core").Signal<boolean>;
+    readonly hasCrudUpdate: import("@angular/core").Signal<boolean>;
+    readonly hasCrudDelete: import("@angular/core").Signal<boolean>;
+    readonly hasCrudCancel: import("@angular/core").Signal<boolean>;
+    readonly tableMaxHeight: import("@angular/core").Signal<string | undefined>;
     private dataSub?;
     private inputValuesSub?;
-    private getErrorMessage;
     /**
-     * Actualiza las keys de columnas visibles basándose en el estado actual
+     * Maneja input de creación/edición de forma unificada
      */
-    private updateVisibleKeys;
+    private handleInput;
     /**
-     * Aplica valores parciales a los inputs en modo creación o edición.
-     * Solo actualiza si estamos en modo creación (creating = true) o edición (editing != null)
+     * Maneja confirmación modal de forma genérica
      */
-    private applyInputValues;
+    private handleConfirmAction;
     ngOnInit(): void;
     ngOnDestroy(): void;
     onInput(event: Event, key: string, col?: C80TableColDef): void;
+    onEditInput(event: Event, key: string, col?: C80TableColDef): void;
     onDelete(row: T): Promise<void>;
     onCancel(row: T): Promise<void>;
     startCreate(): void;
     cancelCreate(): void;
-    updateNewRow(key: string, value: unknown): void;
     saveCreate(): void;
     onEdit(row: T): void;
     cancelEdit(): void;
-    onEditInput(event: Event, key: string, col?: C80TableColDef): void;
     saveEdit(row: T): void;
     /**
-     * TrackBy function for ngFor to avoid DOM re-creation (NG0956 warning).
+     * 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.)
      */
-    trackById(index: number, row: T): number | string;
+    private convertRowTypes;
     /**
-     * Emits the view event with the entire row data
-     */
-    onView(row: T): void;
-    /**
-     * Emits the getRowButtonAction event with the entire row data
+     * TrackBy function for ngFor to avoid DOM re-creation (NG0956 warning).
      */
-    onGetRowButton(row: T): void;
+    readonly trackById: (index: number, row: T) => string | number;
     /**
-     * Emits the customAction event with the entire row data
+     * Verifica si una acción personalizada debe mostrarse para una fila específica
      */
-    onCustomAction(row: T): void;
+    readonly shouldShowAction: (action: CustomTableAction, row: T) => boolean;
     /**
-     * Emits the moveUpAction event with the row id
+     * Obtiene el tooltip de una acción
      */
-    onMoveUp(row: T): Promise<void>;
+    readonly getActionTooltip: typeof getActionTooltip;
     /**
-     * Emits the moveDownAction event with the row id
+     * Maneja el click en una acción personalizada dinámica
+     * UPDATE activa el modo edición, otras acciones emiten directamente
+     * Si la acción tiene configuración de confirmación, muestra modal antes de ejecutar
      */
-    onMoveDown(row: T): Promise<void>;
+    onDynamicAction(action: CustomTableAction, row: T): void;
     /**
-     * Emits the enableAction event with the row id and current enabled status
+     * Maneja acciones que requieren confirmación del usuario
      */
-    onEnable(row: T): Promise<void>;
+    private handleActionWithConfirmation;
     /**
      * Handles search input changes with debouncing
      */
@@ -195,15 +223,14 @@ import * as i0 from "@angular/core";
      * Clears the search input
      */
     clearSearch(): void;
-    getCellValue(row: T, accessor: string): unknown;
-    getDisplayValue(value: unknown): string;
-    getEnumDisplayValue(value: unknown, col: C80TableColDef): string;
-    getEnumOptions(col: C80TableColDef): {
+    readonly getCellValue: <T_1 extends Record<string, unknown>>(row: T_1, accessor: string) => unknown;
+    readonly getDisplayValue: (value: unknown, col?: C80TableColDef) => string;
+    readonly getEnumDisplayValue: (value: unknown, col: C80TableColDef) => string;
+    readonly getEnumOptions: (col: C80TableColDef) => {
         value: string | number;
         label: string;
     }[];
-    getCellColor(value: unknown, col: C80TableColDef): string | undefined;
-    getTableMaxHeight(): string | undefined;
+    readonly getCellColor: (value: unknown, col: C80TableColDef) => string | undefined;
     /**
      * Selection methods
      */
@@ -216,11 +243,12 @@ import * as i0 from "@angular/core";
     toggleSelectAll(): void;
     toggleItemSelection(item: T): void;
     isItemSelected(item: T): boolean;
-    isColumnVisible(column: C80TableColDef, forceShowInCreation?: boolean): boolean;
+    isColumnVisible(column: C80TableColDef): boolean;
     isColumnVisibleInHeader(column: C80TableColDef): boolean;
     isColumnVisibleForRow(column: C80TableColDef, row: T): boolean;
-    onUpload(row: T): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<C80TableComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<C80TableComponent<any>, "c80-table", never, { "data$": { "alias": "data$"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "inputValues$": { "alias": "inputValues$"; "required": false; }; "size": { "alias": "size"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "noConfirm": { "alias": "noConfirm"; "required": false; }; "customActionIcon": { "alias": "customActionIcon"; "required": false; }; "customActionTooltip": { "alias": "customActionTooltip"; "required": false; }; }, { "createAction": "createAction"; "updateAction": "updateAction"; "deleteAction": "deleteAction"; "cancelAction": "cancelAction"; "viewAction": "viewAction"; "uploadAction": "uploadAction"; "getRowButtonAction": "getRowButtonAction"; "customAction": "customAction"; "moveUpAction": "moveUpAction"; "moveDownAction": "moveDownAction"; "enableAction": "enableAction"; "searchTerm": "searchTerm"; "errorEvent": "errorEvent"; "selectable": "selectable"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C80TableComponent<any>, "c80-table", never, { "data$": { "alias": "data$"; "required": false; }; "columns": { "alias": "columns"; "required": false; }; "inputValues$": { "alias": "inputValues$"; "required": false; }; "customActions": { "alias": "customActions"; "required": false; }; "size": { "alias": "size"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "searchable": { "alias": "searchable"; "required": false; }; "allowSelection": { "alias": "allowSelection"; "required": false; }; "noConfirm": { "alias": "noConfirm"; "required": false; }; }, { "actionClick": "actionClick"; "searchTerm": "searchTerm"; "errorEvent": "errorEvent"; "selectable": "selectable"; }, never, never, true, never>;
+    static ngAcceptInputType_searchable: boolean | string;
+    static ngAcceptInputType_allowSelection: boolean | string;
     static ngAcceptInputType_noConfirm: boolean | string;
 }

package/lib/table/table.types.d.ts

@@ -1,16 +1,39 @@
 /**
  * Tipos comunes para las tablas C80
  */
-export type ID = number | string;
+import type { IconType } from '../icon';
 export interface C80TableColDef {
     accessor: string;
     label: string;
     visible?: boolean;
-    type?: 'string' | 'number' | 'integer' | 'boolean' | 'password' | 'enum';
+    type?: 'string' | 'number' | 'integer' | 'boolean' | 'password' | 'enum' | 'date';
     order?: 'ASC' | 'DESC';
     readOnly?: boolean;
     enum?: Record<string | number, string>;
     color?: Record<string | number, string>;
     hideIfAllValuesAreNull?: boolean;
     default?: unknown;
+    min?: number;
+    max?: number;
+}
+/**
+ * Configuración de confirmación para acciones de tabla
+ */
+export interface ActionConfirmation {
+    title: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+}
+/**
+ * Definición de acción personalizada para tabla
+ * Permite agregar acciones dinámicas sin modificar el componente
+ */
+export interface CustomTableAction {
+    name: string;
+    icon: IconType;
+    color?: string;
+    condition?: <T extends Record<string, unknown>>(row: T) => boolean;
+    tooltip?: string;
+    confirmation?: ActionConfirmation;
 }

package/lib/table/table.utils.d.ts

@@ -0,0 +1,42 @@
+import type { C80TableColDef, CustomTableAction } from './table.types';
+/**
+ * Transform function para convertir valores string/boolean a boolean
+ * Usado en @Input() con transform para habilitar sintaxis de atributos booleanos
+ * @example [searchable]="true" o simplemente searchable
+ */
+export declare function booleanAttribute(value: boolean | string): boolean;
+/**
+ * Extrae mensaje de error de forma segura desde un objeto unknown
+ * @param err - Error desconocido (puede ser Error, string, object, etc.)
+ * @returns Mensaje de error legible
+ */
+export declare function getErrorMessage(err: unknown): string;
+/**
+ * Obtiene el valor de un input HTML según el tipo de columna
+ * IMPORTANTE: Convierte el valor al tipo correcto antes de retornarlo
+ * @param event - Evento del input
+ * @param col - Definición de columna (opcional)
+ * @returns Valor extraído y convertido según el tipo de columna
+ */
+export declare function getInputValue(event: Event, col?: C80TableColDef): unknown;
+/**
+ * Extrae el ID de una fila para usar como trackBy en ngFor
+ * @param index - Índice de la fila
+ * @param row - Fila de datos
+ * @returns ID como string o índice como fallback
+ */
+export declare function trackById<T extends Record<string, unknown>>(index: number, row: T): string | number;
+/**
+ * Verifica si una acción debe mostrarse para una fila específica
+ * CREATE se excluye porque se maneja con el botón "+" en el header
+ * @param action - Acción a verificar
+ * @param row - Fila de datos
+ * @returns true si la acción debe mostrarse
+ */
+export declare function shouldShowAction<T extends Record<string, unknown>>(action: CustomTableAction, row: T): boolean;
+/**
+ * Obtiene el tooltip de una acción (usa tooltip personalizado o name por defecto)
+ * @param action - Acción
+ * @returns Texto del tooltip
+ */
+export declare function getActionTooltip(action: CustomTableAction): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c80/ui",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "peerDependencies": {
     "@angular/core": "^18.2.0",
     "rxjs": "~7.8.0",