sapenlinea-components 0.10.86 → 0.11.88

package/README.md

@@ -14,35 +14,36 @@ Componente para gestionar **filtros de fecha y fecha/hora** a partir de una list
 
 **Inputs:**
 
-- `filters: FilterItem[]` (requerido)
-  - Cada `FilterItem` define un filtro disponible:
+- `filters: FilterItem[]` (requerido) – Filtros disponibles. Cada `FilterItem`:
   - `label: string` – Texto visible en el chip/botón.
   - `value: string` – Identificador interno del filtro.
   - `type: 'date' | 'datetime'` – Tipo de filtro.
   - `placeholder?: string` – Placeholder específico.
   - `minDate?: Date` / `maxDate?: Date` – Rango permitido.
+- `clearTrigger: number = 0` – Al incrementar este valor desde el padre se limpia el filtro.
+- `initialValue: Date | string | null = null` – Fecha a restaurar al inicializar (útil para volver a una pantalla con filtros previos). Al hacer clic en el botón de limpiar del chip, el valor inicial queda descartado y no se restaura automáticamente.
+- `initialFilterType: string | null = null` – Key (`FilterItem.value`) del filtro activo a restaurar junto con `initialValue`.
 
 **Outputs:**
 
 - `dateSelected: EventEmitter<DateFilterSelection>` – Emite `{ filter: string; value: Date }` con el filtro activo y la fecha seleccionada.
 - `dateChange: EventEmitter<Date | null>` – Emite la fecha seleccionada al cambiar (o `null` si se limpia).
+- `enterPressed: EventEmitter<void>` – Emite al presionar Enter.
 
 **Uso con formularios reactivos:**
 
 ```html
 <lib-date-time-filter
   [filters]="dateFilters"
+  [clearTrigger]="clearVersion"
+  [initialValue]="savedFilters.date"
+  [initialFilterType]="'date'"
   (dateSelected)="onDateSelected($event)"
   (dateChange)="onDateChange($event)"
-  formControlName="fechaFiltro"
 ></lib-date-time-filter>
 ```
 
 ```ts
-const form = this.fb.group({
-  fechaFiltro: [null],
-});
-
 dateFilters: FilterItem[] = [
   { label: 'Fecha inicio', value: 'startDate', type: 'date', placeholder: 'Seleccionar fecha inicio' },
   { label: 'Fecha fin', value: 'endDate', type: 'date', placeholder: 'Seleccionar fecha fin' },
@@ -293,11 +294,13 @@ Componente de **filtro por texto** con chips de filtros configurables (por ejemp
 
 - `filters: FilterItem[]` (requerido) – Filtros disponibles de texto.
 - `clearTrigger: number = 0` – Al incrementar este valor desde el padre se limpian todos los filtros.
+- `initialValues: Record<string, string> = {}` – Valores a restaurar al inicializar, donde la clave es el `FilterItem.value` y el valor es el texto. Al limpiar un chip individualmente el valor inicial queda descartado y no se restaura automáticamente.
 
 **Outputs:**
 
 - `filterSelected: EventEmitter<{ filter: string; value: string }>` – Emite el filtro y el valor aplicado.
 - `valueChange: EventEmitter<string | null>` – Emite el valor actual del filtro de texto.
+- `enterPressed: EventEmitter<void>` – Emite al presionar Enter.
 
 **Ejemplo de uso:**
 
@@ -305,6 +308,7 @@ Componente de **filtro por texto** con chips de filtros configurables (por ejemp
 <lib-input-text-filter
   [filters]="textFilters"
   [clearTrigger]="clearVersion"
+  [initialValues]="{ name: 'Juan', email: 'juan@example.com' }"
   (filterSelected)="onTextFilter($event)"
   (valueChange)="onTextValueChange($event)"
 ></lib-input-text-filter>
@@ -322,18 +326,22 @@ Componente de **filtro numérico** con múltiples chips (ej. "monto mínimo", "m
 **Inputs:**
 
 - `filters: FilterItem[]` (requerido) – Filtros numéricos.
-- `clearTrigger: number = 0` – Limpia filtros al cambiar.
+- `clearTrigger: number = 0` – Limpia todos los filtros al incrementar.
+- `initialValues: Record<string, string> = {}` – Valores numéricos a restaurar al inicializar, donde la clave es el `FilterItem.value`. Al limpiar un chip individualmente el valor inicial queda descartado y no se restaura automáticamente.
 
 **Outputs:**
 
 - `filterSelected: EventEmitter<{ filter: string; value: string }>` – Filtro seleccionado y valor.
 - `valueChange: EventEmitter<string | null>` – Valor numérico aplicado.
+- `enterPressed: EventEmitter<void>` – Emite al presionar Enter.
 
 **Ejemplo de uso:**
 
 ```html
 <lib-input-number-filter
   [filters]="numberFilters"
+  [clearTrigger]="clearVersion"
+  [initialValues]="{ id: '42' }"
   (filterSelected)="onNumberFilter($event)"
 ></lib-input-number-filter>
 ```
@@ -350,22 +358,28 @@ Componente de **filtro basado en select** con chips. Permite seleccionar una opc
 **Inputs:**
 
 - `filters: FilterItem[]` (requerido) – Deben incluir `options` con `{ label, value }`.
-- `clearTrigger: number = 0` – Limpia filtros.
+- `clearTrigger: number = 0` – Limpia todos los filtros al incrementar.
+- `initialValues: Record<string, string> = {}` – Valores a restaurar al inicializar, donde la clave es el `FilterItem.value` y el valor es el **value** de la opción (no el label). El componente busca automáticamente el label correspondiente para mostrarlo en el chip. Al limpiar un chip individualmente el valor inicial queda descartado y no se restaura automáticamente.
 
 **Outputs:**
 
 - `filterSelected: EventEmitter<{ filter: string; value: string }>` – Filtro e identificador de opción seleccionada.
 - `valueChange: EventEmitter<string | null>` – Valor del select actual.
+- `enterPressed: EventEmitter<void>` – Emite al presionar Enter.
 
 **Ejemplo de uso:**
 
 ```html
 <lib-input-select-filter
   [filters]="statusFilters"
+  [clearTrigger]="clearVersion"
+  [initialValues]="{ status: 'ACTIVE' }"
   (filterSelected)="onStatusFilter($event)"
 ></lib-input-select-filter>
 ```
 
+> `initialValues` recibe el value de la opción (ej. `'ACTIVE'`), no el label (`'Activo'`). El componente resuelve el label buscando en las `options` del filtro correspondiente.
+
 ---
 
 ### 8. `lib-select-custom-search` (SelectCustomSearch)
@@ -448,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 |
@@ -461,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`:**
 
@@ -838,9 +905,36 @@ Encabezado de sección con título, botones de acción configurables y grupo de
 - `exportButtonLabel: string = 'Exportar CSV'`
 - `exportButtonIcon: string = 'icon-export'`
 - `showButtonBack: boolean = false`
+- `initialFilters: Record<string, string | number | Date | null> = {}` — estado previo de filtros para restaurar al volver a la pantalla. La estructura es la misma que emite `filtersChange`. Soporta todos los tipos de filtro: texto, número, select (por value) y fecha.
 
 > Los botones secundario y de exportación se agrupan automáticamente al final de la fila del título.
 
+**Restaurar filtros previos (`initialFilters`):**
+
+Patrón típico para preservar filtros al navegar entre pantallas:
+
+```ts
+// En el componente padre
+savedFilters = signal<Record<string, string | number | Date | null>>({});
+
+onFiltersChange(filters: Record<string, string | number | Date | null>) {
+  this.savedFilters.set(filters);
+}
+```
+
+```html
+<lib-title-filters
+  title="Comparendos"
+  [filtersConfig]="filtersConfig"
+  [initialFilters]="savedFilters()"
+  (filtersChange)="onFiltersChange($event)"
+  (applyFilters)="onApply()"
+  (clearFilters)="savedFilters.set({})"
+/>
+```
+
+> Al hacer clic en "Borrar Filtros" todos los filtros se limpian, incluyendo los valores iniciales. Al limpiar un chip individual el valor inicial de ese filtro también queda descartado.
+
 **Outputs:**
 
 - `filtersChange: Record<string, string | number | Date | null>`
@@ -857,7 +951,8 @@ Encabezado de sección con título, botones de acción configurables y grupo de
 |---|---|
 | `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:**
 
@@ -1446,6 +1541,7 @@ Componente de **filtro de hora** con chips configurables y selector AM/PM desple
 
 - `filters: FilterItem[]` (requerido) – Filtros de hora disponibles.
 - `clearTrigger: number = 0` – Al incrementar este valor desde el padre se limpian todos los filtros.
+- `initialValues: Record<string, string> = {}` – Horas a restaurar al inicializar en formato `HH:mm` (24 h), donde la clave es el `FilterItem.value`. Al limpiar un chip individualmente el valor inicial queda descartado y no se restaura automáticamente.
 
 **Outputs:**
 
@@ -1459,6 +1555,7 @@ Componente de **filtro de hora** con chips configurables y selector AM/PM desple
 <lib-input-time-filter
   [filters]="timeFilters"
   [clearTrigger]="clearVersion"
+  [initialValues]="{ startTime: '08:00', endTime: '17:00' }"
   (filterSelected)="onTimeFilter($event)"
   (valueChange)="onTimeChange($event)"
 ></lib-input-time-filter>
@@ -1466,8 +1563,8 @@ Componente de **filtro de hora** con chips configurables y selector AM/PM desple
 
 ```ts
 timeFilters: FilterItem[] = [
-  { label: 'Hora inicio', value: 'startTime', type: 'time' },
-  { label: 'Hora fin',    value: 'endTime',   type: 'time' },
+  { label: 'Hora inicio', value: 'startTime', type: 'time', placeholder: 'Hora inicio' },
+  { label: 'Hora fin',    value: 'endTime',   type: 'time', placeholder: 'Hora fin' },
 ];
 ```