sapenlinea-components 0.7.71 → 0.8.73

package/README.md

@@ -1349,3 +1349,86 @@ La paleta compartida por todas las gráficas incluye: olive green, lime soft, bu
 
 **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 |