sapenlinea-components 0.6.66 → 0.6.68

package/README.md

@@ -1195,4 +1195,77 @@ Toggle (interruptor on/off) estilizado con label integrado. Implementa `ControlV
 
 > Los campos `toggle` siempre ocupan la fila completa del formulario y nunca comparten fila con otros tipos de campo. Hasta 4 toggles consecutivos se distribuyen automáticamente en la misma fila (cada uno ocupa 1/4 del ancho).
 
----
+---
+### 33. `lib-option-card` (OptionCard)
+
+**Qué hace**  
+Tarjeta interactiva estilizada con ícono para presentar opciones seleccionables, utilizada típicamente en menús o modales. Permite personalizar el estado visual y colores.
+
+**Selector:** `lib-option-card`
+
+**Inputs:**
+- `label: string` (requerido) – Título principal de la opción.
+- `description: string` – Texto de acompañamiento secundario.
+- `buttonBg: string` – Color de fondo CSS del cuerpo general de la tarjeta.
+- `iconBg: string` – Color de fondo **sólido** del contenedor de ícono interno.
+
+**Outputs:**
+- `clickAction: EventEmitter<void>` – Invocado al presionar la tarjeta completa.
+
+**Proyección:**  
+Usa `<svg icon ...></svg>` (selector `[icon]`) para insertar un gráfico que adoptará de forma automática el color surface contrastante para una correcta legibilidad frente a `iconBg`.
+
+---
+
+### 34. `lib-kpi-card` (KpiCard)
+
+**Qué hace**  
+Tarjeta informativa destinada a exponer Indicadores de Rendimiento (KPI) con el título, descripción, icono y valor métrico destacado.
+
+**Selector:** `lib-kpi-card`
+
+**Inputs principales:**
+- `title: string` – Cabecera del KPI.
+- `description: string` – Metadato o guía visual inferior.
+- `value: string | number` – Indicador numérico/texto del KPI.
+- `iconColor: "primary" | "secondary" | "tertiary" | "quaternary"` – Asigna el esquema de colores/tonos automáticamente al ícono.
+
+**Proyección:**  
+Usa el contenedor de `<svg icon ...></svg>` para alojar el identificador visual genérico del KPI.
+
+---
+
+### 35. `lib-load-image` (LoadImage)
+
+**Qué hace**  
+Zona de arrastrar y soltar (Drag & Drop) para la **recepción de imágenes** de los usuarios, la cual permite la visualización in-place, borrado, carga manual y explorador interactivo modal en pantalla completa (lightbox estilo zoom).
+
+**Selector:** `lib-load-image`
+
+**Inputs principales:**
+- `title: string = "Cargar firma"` – Encabezado superior.
+- `description: string = "Formatos admitidos..."` – Helper text inferior.
+- `titleIcon: string = ""` – Renderiza una clase CSS particular de ícono sobre el título.
+- `iconUpload: boolean = false` – Ajuste de la gráfica in-caja que induce a la subida de un archivo.
+- `imageUrl: string = ""` – Permite inyectar y visualizar nativamente una imagen preexistente obtenida desde una URL externa (ideal para editar la entidad de un bucket).
+
+**Outputs:**
+- `imageLoaded: EventEmitter<File | null>` – Entrega el archivo File procesado para subidas directas del usuario o `null` si lo borró.
+
+---
+
+### 36. Gráficas y Visualización: ECharts (Charts)
+
+**Qué hacen**  
+Subsistema de envolturas especializadas (wrappers) cimentado sobre `apache/echarts` para habilitar representaciones informativas sólidas a tamaño responsivo y dinámico, tolerando cambios visuales e interacciones al ocultarse o scroll.
+
+**Componentes y Selectores disponibles:**
+- `lib-bar-chart` – Muestra gráficas de barras estandarizadas.
+- `lib-line-chart` – Muestra líneas analíticas en evolución.
+- `lib-donut-chart` – Gráfica de anillo jerarquizada.
+- `lib-heatmap` – Mapa de concentración de calor basado en coordenadas / categorías.
+- `lib-map-geo` – Gráfico de puntos de calor sobre mapa geofísico interactivo con tooltips nativos.
+
+**Inputs habituales:**
+Generalmente aceptan su interfaz representativa principal `[data]="..."` o su objeto de ajuste avanzado `[config]="..."`.
+