sapenlinea-components 0.10.87 → 0.11.88

package/README.md

@@ -462,11 +462,23 @@ Componente de **tabla dinámica** con soporte de ordenamiento, acciones por fila
 - `statusToneMap: StatusToneMap` – Mapa de estado normalizado → tono visual (`success`, `error`, `warning`, `info`, `neutral`).
 - `statusEnumMap: Record<string, string>` – Traduce el valor crudo del estado (ej. `'ACTIVE'`) a la etiqueta que se muestra (ej. `'Activo'`). La resolución del tono usa la etiqueta traducida.
 
+**Inputs:**
+
+- `columns: TableColumn[]` (requerido) – Definición de columnas.
+- `data: TableRow[]` (requerido) – Datos a mostrar.
+- `actions: TableAction[] | ((row: TableRow) => TableAction[])` – Acciones por fila principal.
+- `showActions: boolean = true` – Muestra/oculta columna de acciones en filas principales.
+- `subColumns: SubColumn[]` – Columnas de las sub-filas expandibles.
+- `subActions: TableAction[] | ((row: TableRow) => TableAction[])` – Acciones por sub-fila. Se muestran con el mismo menú contextual que las filas principales.
+- `showSubActions: boolean = false` – Muestra/oculta la columna de acciones en sub-filas.
+- `statusToneMap: StatusToneMap` – Mapa de estado normalizado → tono visual.
+- `statusEnumMap: Record<string, string>` – Traduce el valor crudo del estado a la etiqueta visible.
+
 **Tipos de columna (`type`):**
 
 | Tipo | Descripción |
 |---|---|
-| `text` | Texto plano (default) |
+| `text` | Texto plano (default). Aplica `autoWidth` automáticamente. |
 | `number` | Número formateado |
 | `money` | Valor monetario con formato |
 | `date` | Fecha formateada |
@@ -475,11 +487,52 @@ Componente de **tabla dinámica** con soporte de ordenamiento, acciones por fila
 | `status` | Chip de estado con color basado en `statusToneMap` |
 | `grade` | Chip de grado con color semáforo automático (verde ≤0.9, naranja ≤2.9, rojo ≤4, gris >4). Muestra el valor con sufijo `°` |
 | `icon-button` | Botón con ícono clicable |
-| `email` | Email en minúsculas |
+| `email` | Email en minúsculas. Aplica `autoWidth` automáticamente. |
+
+**Propiedades de ancho por columna:**
+
+| Propiedad | Tipo | Default | Descripción |
+|---|---|---|---|
+| `autoWidth` | `boolean` | `true` para `text`/`email` | Ajusta el ancho al contenido hasta `maxWidth`. Pasar `false` para desactivarlo en tipos `text`/`email`. |
+| `maxWidth` | `number` | `200` | Ancho máximo en px cuando `autoWidth` está activo. |
+| `compact` | `boolean` | `false` | Comprime la columna al mínimo posible, ajustándose exactamente al contenido sin límite de ancho. Útil para columnas de ícono o estado corto. |
+
+```ts
+// Columna que no crece más de 150px
+{ key: 'placa', label: 'PLACA', type: 'text', maxWidth: 150 }
+
+// Columna de tipo text que NO usa autoWidth (ocupa todo el espacio disponible)
+{ key: 'descripcion', label: 'DESCRIPCIÓN', type: 'text', autoWidth: false }
+
+// Columna compacta: se ajusta exactamente al contenido
+{ key: 'grado', label: 'GRADO', type: 'grade', compact: true }
+```
 
 **Outputs:**
 
-- `optionSelected: EventEmitter<{ action: string; row: TableRow }>` – Emite la acción seleccionada y la fila.
+- `optionSelected: EventEmitter<{ action: string; row: TableRow }>` – Emite la acción seleccionada y la fila principal.
+- `subOptionSelected: EventEmitter<{ action: string; row: TableRow }>` – Emite la acción seleccionada y la sub-fila.
+- `iconAction: EventEmitter<{ action: string; row: TableRow }>` – Emite al hacer clic en un `icon-button`.
+
+**Sub-filas con acciones (`subActions` + `showSubActions`):**
+
+```ts
+subActions: TableAction[] = [
+  { key: 'view', icon: 'icon-view', label: 'Ver detalle' },
+  { key: 'edit', icon: 'icon-edit', label: 'Editar' },
+];
+```
+
+```html
+<lib-table
+  [columns]="columns"
+  [data]="rows"
+  [subColumns]="subColumns"
+  [subActions]="subActions"
+  [showSubActions]="true"
+  (subOptionSelected)="onSubAction($event)"
+/>
+```
 
 **Ejemplo con columna `grade`:**
 
@@ -898,7 +951,8 @@ onFiltersChange(filters: Record<string, string | number | Date | null>) {
 |---|---|
 | `icon-download` | Descargar |
 | `icon-upload` | Cargar / subir |
-| `icon-export` | Exportar tabla |
+| `icon-export` | Exportar tabla / exportar CSV |
+| `icon-add` | Agregar / nuevo registro |
 
 **Ejemplo — con botón secundario y botón de exportar:**