sapenlinea-components 0.11.94 → 0.12.96

package/README.md

@@ -5,6 +5,35 @@ A continuación se documenta **qué hace cada componente** y **cómo se utiliza*
 
 > Nota: todos los componentes son _standalone_ de Angular, por lo que se importan directamente en el `imports` del componente donde se usen.
 
+### Sistema de iconos
+
+La librería unifica dos fuentes de iconos con el **mismo formato de valor** en tabla, `module-card`, `icon-picker` y formularios:
+
+| Tipo | Formato | Ejemplo |
+|---|---|---|
+| CSS (`icons.css`) | clase `icon-*` | `icon-edit`, `icon-shield` |
+| Lucide (`lucide-angular`) | prefijo `lucide:` + nombre kebab-case | `lucide:share-2`, `lucide:users` |
+
+**Utilidades exportadas** desde `sapenlinea-components` (vía `IconPicker`):
+
+```ts
+import {
+  isLucideIconValue,
+  parseIconPickerValue,
+  resolveIconKind,
+  getLucideIconName,
+  getCssIconClass,
+  CSS_ICON_CATALOG,
+  DEFAULT_MODULE_ICONS,
+} from 'sapenlinea-components';
+```
+
+> `iconType: 'lucide'` en `TableAction` / columnas `icon-button` sigue funcionando por retrocompatibilidad, pero está **deprecado**. Usar siempre `lucide:nombre`.
+
+**Peer dependency:** `lucide-angular` (requerida para iconos Lucide).
+
+Los iconos de **acción** fijos de `module-card` (editar, eliminar, flechas) están en los templates del componente y usan clases de `icons.css`. Los iconos **identificadores** de módulo/submódulo/aplicativo se configuran por datos (`icon` en `ModuleData`).
+
 ### 1. `lib-date-time-filter` (DateTimeFilter)
 
 **Qué hace**  
@@ -70,6 +99,12 @@ Componente de **selector de fecha o fecha/hora** independiente (sin lista de fil
 
 - `dateChange: EventEmitter<Date | null>` – Emite la fecha seleccionada.
 
+**Comportamiento del calendario:**
+
+- El panel se renderiza con `position: fixed` y se adjunta a `document.body` para quedar por encima de modales y contenedores con scroll.
+- Se posiciona preferentemente **hacia abajo** si hay espacio; solo abre hacia arriba cuando no cabe abajo.
+- Se reposiciona automáticamente en scroll y resize.
+
 **Ejemplo de uso:**
 
 ```html
@@ -165,7 +200,7 @@ export interface FieldConfig {
   minDate?: Date;
   maxDate?: Date;
   variant?: 'cards';       // Variante visual del checkbox
-  uppercase?: boolean;     // Texto de opciones en mayúsculas. Default: true (solo checkbox)
+  uppercase?: boolean;     // false desactiva mayúsculas automáticas en text/number/time y en labels de checkbox
   radioGroup?: string;     // Ver sección "Checkbox — comportamientos de selección"
   atLeastOneGroup?: string;
 }
@@ -188,18 +223,16 @@ export interface SectionConfig {
 **Checkbox — subtítulo y mayúsculas:**
 
 ```ts
+// Checkbox: uppercase controla las etiquetas de las opciones (default: mayúsculas)
 {
   key: 'acepta',
   type: 'checkbox',
-  uppercase: false,        // opcional, default true
-  options: [
-    {
-      label: 'Evidencia fotográfica',
-      value: 'foto',
-      subtitle: 'Adjunta imágenes del incidente'  // opcional
-    }
-  ]
+  uppercase: false,
+  options: [{ label: 'Evidencia fotográfica', value: 'foto', subtitle: 'Adjunta imágenes' }]
 }
+
+// Text / number / time: uppercase: false evita convertir el valor a mayúsculas al escribir
+{ key: 'placa', type: 'text', uppercase: false, placeholder: 'ABC123' }
 ```
 
 **Checkbox — `disabled` vs `readonly`**
@@ -455,22 +488,13 @@ Componente de **tabla dinámica** con soporte de ordenamiento, acciones por fila
 
 **Inputs:**
 
-- `columns: TableColumn[]` (requerido) – Definición de columnas.
-- `data: TableRow[]` (requerido) – Datos a mostrar.
-- `actions: TableAction[] | ((row: TableRow) => TableAction[])` – Acciones por fila.
-- `showActions: boolean = true` – Muestra/oculta columna de acciones.
-- `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.
+- `subActions: TableAction[] | ((row: TableRow) => TableAction[])` – Acciones por sub-fila.
+- `showSubActions: boolean = false` – Muestra/oculta 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.
 
@@ -489,25 +513,77 @@ Componente de **tabla dinámica** con soporte de ordenamiento, acciones por fila
 | `icon-button` | Botón con ícono clicable |
 | `email` | Email en minúsculas. Aplica `autoWidth` automáticamente. |
 
-**Propiedades de ancho por columna:**
+**Anchos de columna (automático + overrides):**
 
-| 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. |
+La tabla calcula `minWidth`, `maxWidth` y perfil (`compact` | `fixed` | `flex`) según el **tipo de columna** y la longitud del **label**. Si el ancho mínimo total supera el contenedor, aparece **scroll horizontal** con barra personalizada (sin colapsar títulos).
+
+| Tipo | Perfil por defecto | Comportamiento |
+|---|---|---|
+| `icon-button`, `grade` | `compact` | Ancho mínimo fijo |
+| `status`, `number`, `money`, `date`, … | `fixed` | Rango min/max acotado |
+| `text`, `email` | `flex` | Crece si hay espacio; ellipsis si no |
+
+**Overrides manuales** (columnas principales y `subColumns`):
+
+| Propiedad | Descripción |
+|---|---|
+| `widthProfile` | `'compact' \| 'fixed' \| 'flex'` — fuerza el perfil |
+| `minWidth` | Ancho mínimo en px |
+| `maxWidth` | Ancho máximo en px |
+| `compact` | Atajo a perfil compacto |
+| `autoWidth: false` | Columna flexible principal (absorbe espacio libre) |
+| `headerMultiline` | Fuerza salto de línea en el título del encabezado (`white-space: pre-line`) |
+
+**Encabezados multilínea:** incluye `\n` en `label` (p. ej. `'N°\nCOMPARENDO'`) o define `headerMultiline: true`. La librería aplica el estilo sin `::ng-deep` externo. El ancho mínimo se calcula con la línea más larga del título.
 
 ```ts
-// Columna que no crece más de 150px
-{ key: 'placa', label: 'PLACA', type: 'text', maxWidth: 150 }
+{ key: 'numero', label: 'N°\nCOMPARENDO', align: 'center' }
+// o explícito:
+{ key: 'fecha', label: 'Fecha de\nexpedición', headerMultiline: true }
 
-// Columna de tipo text que NO usa autoWidth (ocupa todo el espacio disponible)
+// Columna principal de descripción
 { key: 'descripcion', label: 'DESCRIPCIÓN', type: 'text', autoWidth: false }
 
-// Columna compacta: se ajusta exactamente al contenido
-{ key: 'grado', label: 'GRADO', type: 'grade', compact: true }
+// Subcolumna con la misma lógica automática
+subColumns: SubColumn[] = [
+  { key: 'evento', label: 'Evento', type: 'text' },
+  { key: 'hora', label: 'Hora', type: 'datetime' },
+];
+
+// Override manual
+{ key: 'placa', label: 'PLACA', type: 'text', widthProfile: 'fixed', maxWidth: 120 }
+```
+
+`columnGroups` (anexos/checkbox) mantienen celdas estrechas fijas (~56px) sin configuración adicional.
+
+Helpers exportados: `resolveTableColumnLayout`, `getTableMinWidth`, `buildChildGridTemplateColumns`.
+
+**Iconos en acciones y columnas `icon-button`:**
+
+Usar clases CSS o prefijo `lucide:` (ver sección **Sistema de iconos** al inicio del documento):
+
+```ts
+// Acción del menú contextual
+actions: TableAction[] = [
+  { key: 'edit', icon: 'icon-edit', label: 'Editar' },
+  { key: 'share', icon: 'lucide:share-2', label: 'Compartir', color: '#006D2F' },
+];
+
+// Columna icon-button con estado alterno
+{
+  key: 'download',
+  label: 'Documento',
+  type: 'icon-button',
+  icon: 'icon-file',
+  iconAlternate: 'icon-check',
+  iconActiveKey: 'downloadComplete',
+  iconAlternateColor: '#006D2F',
+  disabledKey: 'locked',
+}
 ```
 
+Propiedades de columna `icon-button`: `icon`, `iconAlternate`, `iconActiveKey`, `isIconActive`, `disabledKey`, `isIconDisabled`, `iconColor`, `iconAlternateColor`. También aplican en `columnGroups` con `type: 'icon-button'`.
+
 **Outputs:**
 
 - `optionSelected: EventEmitter<{ action: string; row: TableRow }>` – Emite la acción seleccionada y la fila principal.
@@ -996,10 +1072,33 @@ Modal de notificación tipo “toast grande” centrado, para mensajes important
 ### 25. `lib-footer` (Footer)
 
 **Qué hace**  
-Footer reutilizable para modales o pantallas, con información de marca / texto legal.
+Footer compacto para pantallas o modales. Se ancla al borde inferior del layout flex (no usa `position: fixed`).
 
 **Selector:** `lib-footer`
 
+**Inputs:**
+
+| Input | Tipo | Default | Descripción |
+|---|---|---|---|
+| `backgroundColor` | `string` | `'#F0F0DB'` | Fondo del footer |
+| `textColor` | `string` | `'#787861'` | Color del texto |
+| `highlightColor` | `string` | — | Color de marca/texto destacado |
+| `year` | `number` | año actual | Año del copyright |
+
+**Layout recomendado** — importar `footer-layout.css` y colocar el footer **fuera** del área con scroll:
+
+```html
+<div class="footer-layout">
+  <main class="footer-layout__content">...</main>
+  <lib-footer [highlightColor]="'#596300'" />
+</div>
+```
+
+```ts
+// En styles del proyecto o global
+@import 'sapenlinea-components/lib/components/footer/footer-layout.css';
+```
+
 ---
 
 ### 26. `lib-button-cards` (ButtonCards)
@@ -1869,11 +1968,13 @@ Tarjeta resumen de un **rol de usuario**, con nombre, descripción, color identi
 | `description` | `string` | `''` | Descripción breve |
 | `color` | `string` | `'#596300'` | Color de acento (borde / badge) |
 | `userCount` | `number` | `0` | Cantidad de usuarios con ese rol |
+| `showDelete` | `boolean` | `true` | Muestra botón eliminar (esquina superior derecha) |
 
 **Outputs:**
 
 - `edit: void` – Al pulsar editar rol.
 - `permissions: void` – Al pulsar gestionar permisos.
+- `delete: void` – Al pulsar eliminar (solo si `showDelete` es `true`).
 
 **Ejemplo de uso:**
 
@@ -1883,10 +1984,14 @@ Tarjeta resumen de un **rol de usuario**, con nombre, descripción, color identi
   [description]="'Acceso completo al sistema'"
   [color]="'#596300'"
   [userCount]="12"
+  [showDelete]="true"
   (edit)="onEditRol()"
-  (permissions)="onManagePermissions()" />
+  (permissions)="onManagePermissions()"
+  (delete)="onDeleteRol()" />
 ```
 
+> Combinar con `lib-color-picker` para elegir el color del rol en formularios de alta/edición.
+
 ---
 
 ### 46. `lib-module-card` y `lib-module-card-list` (ModuleCard / ModuleCardList)
@@ -1921,7 +2026,7 @@ export interface ModuleCardAction {
 export interface ModuleApplicativo {
   id: string | number;
   name: string;
-  icon?: string;           // SVG inline como string
+  icon?: string;           // CSS: icon-* | Lucide: lucide:nombre
   visible: boolean;
   actions: ModuleCardAction[];
 }
@@ -1929,7 +2034,7 @@ export interface ModuleApplicativo {
 export interface ModuleSubmodule {
   id: string | number;
   name: string;
-  icon?: string;
+  icon?: string;           // CSS: icon-* | Lucide: lucide:nombre
   visible: boolean;
   aplicativos: ModuleApplicativo[];
 }
@@ -1944,7 +2049,7 @@ export interface ModuleChildRef {
 export interface ModuleData {
   id: string | number;
   name: string;
-  icon?: string;
+  icon?: string;           // CSS: icon-* | Lucide: lucide:nombre
   visible: boolean;
   submodules: ModuleSubmodule[];
   aplicativos: ModuleApplicativo[];
@@ -2008,20 +2113,21 @@ menuModules = signal<ModuleData[]>([
   {
     id: 'mod1',
     name: 'Administración',
-    icon: '<svg>...</svg>',
+    icon: 'lucide:shield-check',
     visible: true,
     submodules: [
       {
         id: 'sub1',
         name: 'Usuarios',
+        icon: 'lucide:users',
         visible: true,
         aplicativos: [
-          { id: 'app1', name: 'Crear Usuario', visible: true, actions: [{ key: 'bulk', label: 'Creación masiva' }] },
+          { id: 'app1', name: 'Crear Usuario', icon: 'lucide:user-plus', visible: true, actions: [{ key: 'bulk', label: 'Creación masiva' }] },
         ],
       },
     ],
     aplicativos: [
-      { id: 'app2', name: 'Panel General', visible: true, actions: [] },
+      { id: 'app2', name: 'Panel General', icon: 'lucide:layout-grid', visible: true, actions: [] },
     ],
     childOrder: [
       { type: 'aplicativo', id: 'app2' },   // aplicativo directo primero
@@ -2041,7 +2147,7 @@ Usar directamente cuando solo se necesita un módulo, o dejar que `lib-module-ca
 |---|---|---|
 | `moduleId` | `string \| number` | Id del módulo |
 | `moduleName` | `string` | Nombre visible |
-| `moduleIcon` | `string` | SVG inline (opcional) |
+| `moduleIcon` | `string` | Icono del módulo: `icon-*` o `lucide:nombre` |
 | `visible` | `boolean` | Visible en sidebar |
 | `submodules` | `ModuleSubmodule[]` | Submódulos |
 | `aplicativos` | `ModuleApplicativo[]` | Aplicativos directos |
@@ -2151,7 +2257,87 @@ Al reordenar módulos (`lib-module-card-list`) o hijos de un módulo (`lib-modul
 
 1. **Persistencia:** escuchar eventos y/o `childOrderChange` / `modulesChange` para guardar en API.
 2. **Alta de ítems:** al crear submódulo o aplicativo, agregar también su entrada en `childOrder` si ya existe uno definido.
-3. **Iconos:** pasar SVG como string en `icon`; el componente lo sanitiza con `DomSanitizer`.
+3. **Iconos identificadores:** usar `icon-*` o `lucide:nombre` en `ModuleData`; compatible con el valor que devuelve `lib-icon-picker`.
 4. **Separación de responsabilidades:** `visible` controla visibilidad en menú; la autorización real por rol la define el módulo contenedor.
 
 ---
+
+### 47. `lib-icon-picker` (IconPicker)
+
+**Qué hace**  
+Selector visual de iconos para formularios (módulos, menús, etc.). Implementa `ControlValueAccessor`. Soporta iconos CSS (`icons.css`) y Lucide.
+
+**Selector:** `lib-icon-picker`
+
+**Valor almacenado:** clase CSS (`icon-layers`) o Lucide (`lucide:file-text`).
+
+**Inputs:**
+
+| Input | Tipo | Default | Descripción |
+|---|---|---|---|
+| `label` | `string` | `'Icono'` | Etiqueta del campo |
+| `icons` | `IconPickerOption[]` | `DEFAULT_MODULE_ICONS` | Catálogo a mostrar |
+| `columns` | `number` | `8` | Columnas de la grilla |
+| `disabled` / `readonly` | `boolean` | `false` | Bloquea selección |
+
+**Outputs:** `selectionChange: string`
+
+**Catálogos exportados:** `CSS_ICON_CATALOG`, `LUCIDE_ICON_CATALOG`, `DEFAULT_ICON_PICKER_ICONS`, `DEFAULT_MODULE_ICONS`
+
+**Ejemplo:**
+
+```html
+<lib-icon-picker formControlName="icon" label="Icono del módulo" />
+```
+
+```ts
+import { DEFAULT_MODULE_ICONS } from 'sapenlinea-components';
+
+// Catálogo personalizado
+customIcons = [
+  { value: 'icon-shield', label: 'Seguridad' },
+  { value: 'lucide:puzzle', label: 'Puzzle' },
+];
+```
+
+```html
+<lib-icon-picker [icons]="customIcons" formControlName="icon" />
+```
+
+---
+
+### 48. `lib-color-picker` (ColorPicker)
+
+**Qué hace**  
+Selector de color en grilla para roles u otros formularios. Implementa `ControlValueAccessor`.
+
+**Selector:** `lib-color-picker`
+
+**Inputs:**
+
+| Input | Tipo | Default | Descripción |
+|---|---|---|---|
+| `label` | `string` | `'Color del rol'` | Etiqueta |
+| `colors` | `string[]` | `DEFAULT_ROLE_COLORS` | Paleta (25 colores vivos por defecto) |
+| `columns` | `number` | `10` | Columnas de la grilla |
+| `disabled` / `readonly` | `boolean` | `false` | Bloquea selección |
+
+**Outputs:** `selectionChange: string` (hex)
+
+**Ejemplo:**
+
+```html
+<lib-color-picker formControlName="color" label="Color" />
+```
+
+```ts
+import { DEFAULT_ROLE_COLORS } from 'sapenlinea-components';
+
+readonly brandColors = ['#596300', '#006D2F', '#CF0707', ...];
+```
+
+```html
+<lib-color-picker [colors]="brandColors" formControlName="color" />
+```
+
+---