sapenlinea-components 0.10.84 → 0.10.86

package/README.md

@@ -1226,209 +1226,531 @@ 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. Incluye soporte para interactividad, visualizaciones jerárquicas, tablas expandibles y una paleta de 20 colores.
-
-**Componentes disponibles:**
-
-#### `lib-bar-chart`
-Gráfica de barras estandarizada con soporte para una o múltiples series.
-- **Inputs:**
-  - `data: ChartItem[]` – Datos para gráfica de barra simple.
-  - `multiSeries: BarSeries[]` – (Opcional) Permite mostrar grupos de barras por cada sección.
-- **Interfaces:**
-  ```ts
-  export interface BarSeries {
-    name: string;   // Nombre de la serie (aparece en la leyenda)
-    data: number[]; // Valores numéricos
-    color?: string; // Color personalizado opcional
-  }
-  ```
-
-#### `lib-donut-chart`
-Gráfica de anillo con capacidad de **Drill-down**, navegación interna y leyenda automática.
-- **Inputs:**
-  - `data: ChartItem[]` – Datos granulares (ej. códigos de infracción `D01`, `D02`, `C01`).
-  - `drillDown: boolean = false` – Activa el modo de exploración jerárquica.
-  - `groupByPrefix: number = 0` – Agrupa los datos por los primeros N caracteres de la etiqueta (ej. `1` para agrupar por letras iniciales).
-- **Comportamiento:**
-  - Al activar el drill-down, el componente muestra inicialmente los totales agrupados y permite al usuario pulsar una sección para "abrirla" y ver su desglose, con un botón de "Volver" integrado.
-  - Cuando hay **más de 10 ítems**, los labels de las porciones se ocultan automáticamente y se muestra una **leyenda horizontal scrollable** en la parte inferior.
-
-#### `lib-table-chart`
-Tabla expandible integrada en el dashboard de gráficas, con paginación y estado "sin datos".
-- **Inputs:**
-  - `title: string = 'Table Chart'` – Título del encabezado.
-  - `columns: TableColumn[]` – Definición de columnas (misma interfaz que `lib-table`).
-  - `data: TableRow[]` – Datos de la tabla.
-  - `totalItems: number = 0` – Total de registros (para la paginación).
-  - `itemsPerPage: number = 10` – Registros por página en modo expandido.
-- **Comportamiento:**
-  - **Colapsado**: Muestra los primeros **8 registros** sin paginación.
-  - **Expandido**: Ocupa pantalla completa (90vw × 90vh) con overlay, muestra **10 registros** por página con `lib-pagination`.
-  - Si `data` está vacío muestra `lib-not-found-section` centrado.
-
-**Ejemplo:**
-
-```html
-<lib-table-chart
-  title="Tabla de Comparendos"
-  [columns]="columns"
-  [data]="comparendosData"
-  [totalItems]="comparendosData.length" />
-```
-
-#### Otros:
-- `lib-line-chart` – Líneas analíticas en evolución.
-- `lib-heatmap` – Mapa de concentración de calor basado en coordenadas / categorías.
-- `lib-map-geo` – Puntos de calor sobre mapa geofísico interactivo.
-
-**Paleta de colores (20 colores):**
-La paleta compartida por todas las gráficas incluye: olive green, lime soft, burgundy, deep teal, sage, chartreuse, sky blue, light steel blue, warm amber, terracotta, dusty purple, jade green, coral clay, charcoal slate, sand gold, mint sage, rose mauve, navy steel, peach y spring green.
-
-**Eventos Globales:**
-Todos los componentes de gráficas emiten el evento `chartClick`, permitiendo capturar clics en secciones específicas para lógicas personalizadas en el padre.
-
----
-
-### 37. `lib-quick-access-cards` (QuickAccessCards)
-
-**Qué hace**  
-Componente de **accesos rápidos** que renderiza un grid de tarjetas (`lib-option-card` en modo `quick-access`) con hasta **4 columnas** por fila. Si hay más de 4 items, los restantes se posicionan en la siguiente fila. Los íconos se definen mediante un **nombre de clase CSS** en lugar de SVG inline, simplificando la configuración significativamente.
-
-**Selector:** `lib-quick-access-cards`
-
-**Inputs:**
-
-| Input | Tipo | Default | Descripción |
-|---|---|---|---|
-| `title` | `string` | `'Accesos Rápidos'` | Título visible sobre el grid de tarjetas |
-| `items` | `QuickAccessItem[]` | `[]` | Lista de accesos rápidos a renderizar |
-
-**Outputs:**
-
-- `clickAction: EventEmitter<QuickAccessItem>` – Emite el item completo al hacer clic en una tarjeta.
-
-**Interfaz:**
-
-```ts
-export interface QuickAccessItem {
-  id: string;
-  label: string;
-  description: string;
-  icon: string;       // Nombre de clase CSS del ícono, ej. 'icon-building'
-  iconBg?: string;    // Color de fondo del contenedor del ícono
-}
-```
-
-**Íconos disponibles:**
-
-| Clase | Descripción |
-|---|---|
-| `icon-settings` | Configuración / engranaje |
-| `icon-check` | Check / verificado |
-| `icon-close` | Cerrar / X |
-| `icon-info` | Información |
-| `icon-alert` | Alerta / triángulo |
-| `icon-star` | Estrella |
-| `icon-users` | Usuarios / personas |
-| `icon-building` | Edificio / organismo |
-| `icon-car` | Vehículo |
-| `icon-shield` | Escudo / seguridad |
-| `icon-clipboard` | Portapapeles |
-| `icon-map-pin` | Ubicación / mapa |
-| `icon-chart` | Gráfica de barras |
-| `icon-file` | Documento / archivo |
-| `icon-refresh` | Refrescar / recargar |
-| `icon-edit` | Editar / lápiz |
-| `icon-search` | Buscar / lupa |
-
-**Ejemplo de uso:**
-
-```ts
-import { QuickAccessCards, QuickAccessItem } from 'sapenlinea-components';
-
-quickAccessItems: QuickAccessItem[] = [
-  { id: '1', label: 'Organismo de tránsito', description: 'Información del organismo', icon: 'icon-building', iconBg: '#00695c' },
-  { id: '2', label: 'Usuarios', description: 'Administración de usuarios', icon: 'icon-users', iconBg: '#0d47a1' },
-  { id: '3', label: 'Roles', description: 'Administración de roles', icon: 'icon-shield', iconBg: '#f57f17' },
-  { id: '4', label: 'Reportes', description: 'Generación de reportes', icon: 'icon-chart', iconBg: '#b71c1c' },
-];
-```
-
-```html
-<lib-quick-access-cards
-  [title]="'Accesos Rápidos'"
-  [items]="quickAccessItems"
-  (clickAction)="onQuickAccess($event)" />
-```
-
-**Comportamiento responsive:**
-
-| Ancho de pantalla | Columnas |
-|---|---|
-| > 1200px | 4 columnas |
-| 900px – 1200px | 3 columnas |
-| 600px – 900px | 2 columnas |
-| < 600px | 1 columna |
+---
+### 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. Incluye soporte para interactividad, visualizaciones jerárquicas, tablas expandibles y una paleta de 20 colores.
+
+**Componentes disponibles:**
+
+#### `lib-bar-chart`
+Gráfica de barras estandarizada con soporte para una o múltiples series.
+- **Inputs:**
+  - `data: ChartItem[]` – Datos para gráfica de barra simple.
+  - `multiSeries: BarSeries[]` – (Opcional) Permite mostrar grupos de barras por cada sección.
+- **Interfaces:**
+  ```ts
+  export interface BarSeries {
+    name: string;   // Nombre de la serie (aparece en la leyenda)
+    data: number[]; // Valores numéricos
+    color?: string; // Color personalizado opcional
+  }
+  ```
+
+#### `lib-donut-chart`
+Gráfica de anillo con capacidad de **Drill-down**, navegación interna y leyenda automática.
+- **Inputs:**
+  - `data: ChartItem[]` – Datos granulares (ej. códigos de infracción `D01`, `D02`, `C01`).
+  - `drillDown: boolean = false` – Activa el modo de exploración jerárquica.
+  - `groupByPrefix: number = 0` – Agrupa los datos por los primeros N caracteres de la etiqueta (ej. `1` para agrupar por letras iniciales).
+- **Comportamiento:**
+  - Al activar el drill-down, el componente muestra inicialmente los totales agrupados y permite al usuario pulsar una sección para "abrirla" y ver su desglose, con un botón de "Volver" integrado.
+  - Cuando hay **más de 10 ítems**, los labels de las porciones se ocultan automáticamente y se muestra una **leyenda horizontal scrollable** en la parte inferior.
+
+#### `lib-table-chart`
+Tabla expandible integrada en el dashboard de gráficas, con paginación y estado "sin datos".
+- **Inputs:**
+  - `title: string = 'Table Chart'` – Título del encabezado.
+  - `columns: TableColumn[]` – Definición de columnas (misma interfaz que `lib-table`).
+  - `data: TableRow[]` – Datos de la tabla.
+  - `totalItems: number = 0` – Total de registros (para la paginación).
+  - `itemsPerPage: number = 10` – Registros por página en modo expandido.
+- **Comportamiento:**
+  - **Colapsado**: Muestra los primeros **8 registros** sin paginación.
+  - **Expandido**: Ocupa pantalla completa (90vw × 90vh) con overlay, muestra **10 registros** por página con `lib-pagination`.
+  - Si `data` está vacío muestra `lib-not-found-section` centrado.
+
+**Ejemplo:**
+
+```html
+<lib-table-chart
+  title="Tabla de Comparendos"
+  [columns]="columns"
+  [data]="comparendosData"
+  [totalItems]="comparendosData.length" />
+```
+
+#### Otros:
+- `lib-line-chart` – Líneas analíticas en evolución.
+- `lib-heatmap` – Mapa de concentración de calor basado en coordenadas / categorías.
+- `lib-map-geo` – Puntos de calor sobre mapa geofísico interactivo.
+
+**Paleta de colores (20 colores):**
+La paleta compartida por todas las gráficas incluye: olive green, lime soft, burgundy, deep teal, sage, chartreuse, sky blue, light steel blue, warm amber, terracotta, dusty purple, jade green, coral clay, charcoal slate, sand gold, mint sage, rose mauve, navy steel, peach y spring green.
+
+**Eventos Globales:**
+Todos los componentes de gráficas emiten el evento `chartClick`, permitiendo capturar clics en secciones específicas para lógicas personalizadas en el padre.
+
+---
+
+### 37. `lib-quick-access-cards` (QuickAccessCards)
+
+**Qué hace**  
+Componente de **accesos rápidos** que renderiza un grid de tarjetas (`lib-option-card` en modo `quick-access`) con hasta **4 columnas** por fila. Si hay más de 4 items, los restantes se posicionan en la siguiente fila. Los íconos se definen mediante un **nombre de clase CSS** en lugar de SVG inline, simplificando la configuración significativamente.
+
+**Selector:** `lib-quick-access-cards`
+
+**Inputs:**
+
+| Input | Tipo | Default | Descripción |
+|---|---|---|---|
+| `title` | `string` | `'Accesos Rápidos'` | Título visible sobre el grid de tarjetas |
+| `items` | `QuickAccessItem[]` | `[]` | Lista de accesos rápidos a renderizar |
+
+**Outputs:**
+
+- `clickAction: EventEmitter<QuickAccessItem>` – Emite el item completo al hacer clic en una tarjeta.
+
+**Interfaz:**
+
+```ts
+export interface QuickAccessItem {
+  id: string;
+  label: string;
+  description: string;
+  icon: string;       // Nombre de clase CSS del ícono, ej. 'icon-building'
+  iconBg?: string;    // Color de fondo del contenedor del ícono
+}
+```
+
+**Íconos disponibles:**
+
+| Clase | Descripción |
+|---|---|
+| `icon-settings` | Configuración / engranaje |
+| `icon-check` | Check / verificado |
+| `icon-close` | Cerrar / X |
+| `icon-info` | Información |
+| `icon-alert` | Alerta / triángulo |
+| `icon-star` | Estrella |
+| `icon-users` | Usuarios / personas |
+| `icon-building` | Edificio / organismo |
+| `icon-car` | Vehículo |
+| `icon-shield` | Escudo / seguridad |
+| `icon-clipboard` | Portapapeles |
+| `icon-map-pin` | Ubicación / mapa |
+| `icon-chart` | Gráfica de barras |
+| `icon-file` | Documento / archivo |
+| `icon-refresh` | Refrescar / recargar |
+| `icon-edit` | Editar / lápiz |
+| `icon-search` | Buscar / lupa |
+
+**Ejemplo de uso:**
+
+```ts
+import { QuickAccessCards, QuickAccessItem } from 'sapenlinea-components';
+
+quickAccessItems: QuickAccessItem[] = [
+  { id: '1', label: 'Organismo de tránsito', description: 'Información del organismo', icon: 'icon-building', iconBg: '#00695c' },
+  { id: '2', label: 'Usuarios', description: 'Administración de usuarios', icon: 'icon-users', iconBg: '#0d47a1' },
+  { id: '3', label: 'Roles', description: 'Administración de roles', icon: 'icon-shield', iconBg: '#f57f17' },
+  { id: '4', label: 'Reportes', description: 'Generación de reportes', icon: 'icon-chart', iconBg: '#b71c1c' },
+];
+```
+
+```html
+<lib-quick-access-cards
+  [title]="'Accesos Rápidos'"
+  [items]="quickAccessItems"
+  (clickAction)="onQuickAccess($event)" />
+```
+
+**Comportamiento responsive:**
+
+| Ancho de pantalla | Columnas |
+|---|---|
+| > 1200px | 4 columnas |
+| 900px – 1200px | 3 columnas |
+| 600px – 900px | 2 columnas |
+| < 600px | 1 columna |
+
+---
+
+### 38. `lib-input-time-filter` (InputTimeFilter)
+
+**Qué hace**
+Componente de **filtro de hora** con chips configurables y selector AM/PM desplegable. Implementa `ControlValueAccessor`.
+
+**Selector:** `lib-input-time-filter`
+
+**Inputs:**
+
+- `filters: FilterItem[]` (requerido) – Filtros de hora disponibles.
+- `clearTrigger: number = 0` – Al incrementar este valor desde el padre se limpian todos los filtros.
+
+**Outputs:**
+
+- `filterSelected: EventEmitter<{ filter: string; value: string }>` – Emite el filtro activo y el valor en formato `HH:mm` (24 h).
+- `valueChange: EventEmitter<string | null>` – Emite la hora seleccionada o `null` al limpiar.
+- `enterPressed: EventEmitter<void>` – Emite al presionar Enter con el dropdown abierto.
+
+**Ejemplo de uso:**
+
+```html
+<lib-input-time-filter
+  [filters]="timeFilters"
+  [clearTrigger]="clearVersion"
+  (filterSelected)="onTimeFilter($event)"
+  (valueChange)="onTimeChange($event)"
+></lib-input-time-filter>
+```
+
+```ts
+timeFilters: FilterItem[] = [
+  { label: 'Hora inicio', value: 'startTime', type: 'time' },
+  { label: 'Hora fin',    value: 'endTime',   type: 'time' },
+];
+```
+
+---
+
+### 39. `lib-pdf-viewer` (PdfViewer) y `PdfViewerService`
+
+**Qué hacen**
+Sistema de **visualización de documentos** (PDF e imágenes) en modal:
+
+- `lib-pdf-viewer`: componente de modal que renderiza el documento activo según el servicio. Soporta múltiples URLs con navegación anterior/siguiente.
+- `PdfViewerService`: servicio singleton para abrir el visor y establecer el documento desde cualquier parte de la aplicación.
+
+**Selector:** `lib-pdf-viewer`
+
+Declarar `<lib-pdf-viewer></lib-pdf-viewer>` **una sola vez** (por ejemplo en `AppComponent`).
+
+**`PdfViewerService` — API:**
+
+| Método | Descripción |
+|---|---|
+| `open(doc: FileViewerDoc)` | Abre el visor con el documento indicado (recomendado) |
+| `openModal()` | Muestra el modal sin cambiar el documento |
+| `closeModal()` | Cierra el modal |
+| `setSelectedPdf(doc \| null)` | Establece el documento sin abrir el modal |
+
+**`FileViewerDoc`:**
+
+```ts
+export interface FileViewerDoc {
+  name: string;
+  urls: string[];          // Una o varias URLs
+  type?: 'pdf' | 'image'; // Si no se indica, se detecta por extensión
+}
+```
+
+**Ejemplo de uso:**
+
+```ts
+import { PdfViewerService } from 'sapenlinea-components';
+
+constructor(private pdfViewer: PdfViewerService) {}
+
+verDocumento(url: string) {
+  this.pdfViewer.open({ name: 'Comparendo', urls: [url] });
+}
+
+verImagenes(urls: string[]) {
+  this.pdfViewer.open({ name: 'Evidencias', urls, type: 'image' });
+}
+```
+
+---
+
+### 40. `lib-document-upload` (DocumentUpload)
+
+**Qué hace**
+Zona de **arrastrar y soltar archivos** (Drag & Drop) con validación de tipo, tamaño máximo y lista de archivos adjuntados. Permite selección manual y eliminación individual.
+
+**Selector:** `lib-document-upload`
+
+**Inputs:**
+
+- `label: string = 'Arrastra los archivos aquí o haz clic para seleccionar'`
+- `helperText: string = 'Máximo 25 MB por archivo'`
+- `accept: string = '.pdf,application/pdf'` – Valor para el atributo `accept` del input de archivo (ej. `"image/*"`, `".pdf,.png"`).
+- `maxSizeMB: number = 25` – Tamaño máximo permitido por archivo en MB.
+- `multiple: boolean = true` – Permite adjuntar varios archivos.
+
+**Outputs:**
+
+- `filesChanged: OutputEmitterRef<File[]>` – Emite el arreglo completo de archivos válidos cada vez que cambia.
+
+**Ejemplo de uso:**
+
+```html
+<lib-document-upload
+  label="Arrastra los soportes aquí"
+  helperText="Solo PDF, máximo 10 MB"
+  accept=".pdf"
+  [maxSizeMB]="10"
+  (filesChanged)="onFilesChanged($event)"
+/>
+```
+
+```ts
+onFilesChanged(files: File[]) {
+  this.archivos = files;
+}
+```
+
+---
+
+### 41. `lib-document-item` (DocumentItem)
+
+**Qué hace**
+Elemento de lista que representa un **documento adjunto** (PDF, imagen o video) con fecha, nombre, folio opcional y botón de visualización.
+
+**Selector:** `lib-document-item`
+
+**Input:**
+
+- `data: DocumentInfo` – Información del documento:
+
+```ts
+export interface DocumentInfo {
+  folio?: string;
+  name: string;
+  creation_date: string; // ISO 8601
+  type: 'document' | 'image' | 'video';
+  actionKey: string;
+  url?: string;          // URL para previsualización o descarga
+}
+```
+
+**Output:**
+
+- `view: OutputEmitterRef<DocumentInfo>` – Emite el documento al pulsar la acción de ver.
+
+**Ejemplo de uso:**
+
+```html
+<lib-document-item
+  [data]="doc"
+  (view)="onViewDocument($event)"
+/>
+```
+
+```ts
+onViewDocument(doc: DocumentInfo) {
+  this.pdfViewer.open({ name: doc.name, urls: [doc.url!] });
+}
+```
+
+---
+
+### 42. `lib-card-history` (CardHistory)
+
+**Qué hace**
+Tarjeta de **línea de tiempo / historial** con información de cambio de estado, fecha/hora y descripción expandible. Muestra `previousStatus` → `currentStatus` con badges de color semántico.
+
+**Selector:** `lib-card-history`
+
+**Inputs:**
+
+- `DataCard: DataCard` – Datos de la entrada de historial:
+
+```ts
+export interface DataCard {
+  title: string;
+  time: string;
+  date: string;         // ISO 8601
+  previousStatus?: any;
+  currentStatus?: any;
+  type: string;
+  responsible?: string;
+  description?: string;
+  actionType?: 'create' | 'update' | 'delete';
+}
+```
+
+- `withResponsible: boolean = true` – Muestra u oculta el nombre del responsable.
+
+**Badges de estado disponibles:**
+
+| Valor normalizado | Badge |
+|---|---|
+| `activo` | Verde (badge-active) |
+| `inactivo` | Gris (badge-inactive) |
+| `eliminado` | Rojo oscuro (badge-retired) |
+| `obsoleto` | Amarillo (badge-obsolete) |
+| `operativo` | Verde (badge-operativo) |
+| `mantenimiento` | Naranja (badge-maintenance) |
+| `fallas` | Rojo (badge-failures) |
+| `baja` | Marrón (badge-deactivated) |
+
+**Ejemplo de uso:**
+
+```html
+@for (entry of historial; track entry.date) {
+  <lib-card-history [DataCard]="entry" [withResponsible]="true" />
+}
+```
+
+---
+
+### 43. `lib-signature` (Signature)
+
+**Qué hace**
+Componente de **bloc de firma manuscrita** basado en canvas (`signature_pad`). Permite dibujar, limpiar y guardar la firma como PNG en base64.
+
+**Selector:** `lib-signature`
+
+**Output:**
+
+- `firmaSaved: OutputEmitterRef<string>` – Emite la firma como `data:image/png;base64,...` al llamar a "Guardar".
+
+**API pública (acceso vía `@ViewChild`):**
+
+| Método | Descripción |
+|---|---|
+| `limpiarFirma()` | Borra el canvas |
+| `guardarFirma()` | Emite `firmaSaved` si el canvas no está vacío |
+| `obtenerFirmaBase64(): string` | Retorna el PNG en base64 directamente |
+| `firmaVacia(): boolean` | Verifica si el canvas está vacío |
+
+**Ejemplo de uso:**
+
+```html
+<lib-signature (firmaSaved)="onFirmaSaved($event)" />
+```
+
+```ts
+onFirmaSaved(base64: string) {
+  this.firmaBase64 = base64;
+}
+```
+
+---
+
+### 44. `lib-geo-api-maps` (GeoAPIMaps)
+
+**Qué hace**
+Mapa interactivo de **Google Maps** con soporte para dos tipos de marcadores: puntos de infracción/comparendo y cámaras de video. Muestra info-windows al hover y al clic, y hace auto-zoom para encuadrar todos los marcadores.
+
+**Selector:** `lib-geo-api-maps`
+
+**Requisito:** El script de Google Maps API debe estar cargado globalmente en el `index.html` del proyecto consumidor.
+
+**Inputs:**
+
+- `points: GeoPoint[] = []` – Puntos de infracción/comparendo.
+- `cameras: GeoPointCameras[] = []` – Cámaras con conteo de infracciones.
+
+**Interfaces:**
+
+```ts
+export interface GeoPoint {
+  subpoenaNumber: string;
+  latitude: number;
+  longitude: number;
+  locationLabel: string;
+  dateTime: string;       // ISO 8601
+  infractionCode: string;
+  plate: string;
+  immobilized: boolean;   // Azul si false, rojo si true
+}
+
+export interface GeoPointCameras {
+  id: number;
+  name: string;
+  latitude: number;
+  longitude: number;
+  locationLabel: string;
+  total: number;
+  by_code: Record<string, number>; // { 'C01': 5, 'D02': 3 }
+}
+```
+
+**API pública (acceso vía `@ViewChild`):**
+
+- `goToLocation(lat: number, lng: number)` – Mueve el mapa a la posición indicada con zoom 18.
+
+**Ejemplo de uso:**
+
+```html
+<lib-geo-api-maps
+  [points]="infracciones"
+  [cameras]="camaras"
+/>
+```
+
+```ts
+infracciones: GeoPoint[] = [
+  {
+    subpoenaNumber: 'C-001',
+    latitude: 10.9685,
+    longitude: -74.7813,
+    locationLabel: 'Cra 46 # 72-30',
+    dateTime: '2025-05-20T10:30:00',
+    infractionCode: 'C01',
+    plate: 'ABC123',
+    immobilized: false,
+  }
+];
+```