@telcomdev/ui 0.0.1 → 0.0.3

package/fesm2022/telcomdev-ui.mjs

@@ -1,5 +1,9 @@
 import * as i0 from '@angular/core';
-import { Component, EventEmitter, signal, Output, Input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener, signal } from '@angular/core';
+import * as i2 from '@angular/cdk/scrolling';
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { NgTemplateOutlet } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
@@ -358,6 +362,462 @@ class TdAlerta {
     }
 }
 
+const TD_ICONOS = {
+    home: {
+        path: 'M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V10.5Z',
+    },
+    dashboard: {
+        path: 'M4 3h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm10 0h6a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm0 8h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1ZM4 14h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z',
+    },
+    folder: {
+        path: 'M3 5a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Z',
+    },
+    settings: {
+        path: 'M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm8.5 3.5c0-.5-.05-.98-.14-1.45l2.02-1.57-2-3.46-2.47 1a8.7 8.7 0 0 0-2.5-1.45L15 2.5h-4l-.4 2.57a8.7 8.7 0 0 0-2.51 1.45l-2.47-1-2 3.46 2.02 1.57a7.7 7.7 0 0 0 0 2.9l-2.02 1.57 2 3.46 2.47-1a8.7 8.7 0 0 0 2.5 1.45L11 21.5h4l.4-2.57a8.7 8.7 0 0 0 2.51-1.45l2.47 1 2-3.46-2.02-1.57c.09-.47.14-.95.14-1.45Z',
+    },
+    people: {
+        path: 'M16 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM6.5 12a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM16 13c-4 0-7 2-7 4.5V21h14v-3.5C23 15 20 13 16 13ZM6.5 14C2.9 14 1 15.8 1 18v3h6v-3.5c0-1.2.48-2.28 1.3-3.16A9.3 9.3 0 0 0 6.5 14Z',
+    },
+    person: {
+        path: 'M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5Z',
+    },
+    security: {
+        path: 'M12 2 4 5v6c0 5.05 3.41 9.74 8 11 4.59-1.26 8-5.95 8-11V5l-8-3Zm-1 14-4-4 1.4-1.4 2.6 2.58 5.6-5.58L18 9l-7 7Z',
+    },
+    inventory: {
+        path: 'm12 2 9 5-9 5-9-5 9-5Zm-7 8.5 6 3.33V22l-6-3.33V10.5Zm8 11.5v-8.17l6-3.33v8.17L13 22Z',
+    },
+    shopping_cart: {
+        path: 'M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM6.2 6l.8 2h11.6l-1.9 5H8.1L4.3 3H1v2h2l3.6 9.6A2 2 0 0 0 8.5 16H19v-2H8.5l-.4-1H18a2 2 0 0 0 1.86-1.27L22 6H6.2Z',
+    },
+    receipt: {
+        path: 'M5 2v20l3-2 4 2 4-2 3 2V2l-3 2-4-2-4 2-3-2Zm3 6h8v2H8V8Zm0 4h8v2H8v-2Z',
+    },
+    assessment: {
+        path: 'M4 20h16v2H4a2 2 0 0 1-2-2V4h2v16Zm3-2H5v-6h2v6Zm4 0H9V7h2v11Zm4 0h-2V4h2v14Zm4 0h-2v-9h2v9Z',
+    },
+    description: {
+        path: 'M6 2h8l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm7 1.5V8h4.5L13 3.5ZM8 12v2h8v-2H8Zm0 4v2h8v-2H8Z',
+    },
+    business: {
+        path: 'M3 21V3h10v5h8v13h-7v-4h-2v4H3Zm3-14h2V5H6v2Zm4 0h2V5h-2v2Zm-4 4h2V9H6v2Zm4 0h2V9h-2v2Zm6 1h2v-2h-2v2Zm0 4h2v-2h-2v2Z',
+    },
+    chevron_left: {
+        path: 'M14.7 5.3a1 1 0 0 1 0 1.4L9.4 12l5.3 5.3a1 1 0 1 1-1.4 1.4l-6-6a1 1 0 0 1 0-1.4l6-6a1 1 0 0 1 1.4 0Z',
+    },
+    chevron_right: {
+        path: 'M9.3 5.3a1 1 0 0 0 0 1.4l5.3 5.3-5.3 5.3a1 1 0 1 0 1.4 1.4l6-6a1 1 0 0 0 0-1.4l-6-6a1 1 0 0 0-1.4 0Z',
+    },
+    sun: {
+        path: 'M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0-5a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm0 17a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1ZM2 12a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm17 0a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1ZM4.22 4.22a1 1 0 0 1 1.42 0l1.41 1.42a1 1 0 0 1-1.41 1.41L4.22 5.64a1 1 0 0 1 0-1.42Zm12.73 12.73a1 1 0 0 1 1.41 0l1.42 1.41a1 1 0 0 1-1.42 1.42l-1.41-1.42a1 1 0 0 1 0-1.41Zm2.83-12.73a1 1 0 0 1 0 1.42l-1.42 1.41a1 1 0 0 1-1.41-1.41l1.41-1.42a1 1 0 0 1 1.42 0ZM7.05 16.95a1 1 0 0 1 0 1.41l-1.41 1.42a1 1 0 0 1-1.42-1.42l1.42-1.41a1 1 0 0 1 1.41 0Z',
+    },
+    moon: {
+        path: 'M20.5 15.2A8.5 8.5 0 0 1 8.8 3.5 9 9 0 1 0 20.5 15.2Z',
+    },
+    alert: {
+        path: 'M12 2 1 21h22L12 2Zm-1 7h2v6h-2V9Zm0 8h2v2h-2v-2Z',
+    },
+    check: {
+        path: 'm9.2 16.2-4.4-4.4-1.6 1.6 6 6L21 7.6 19.4 6 9.2 16.2Z',
+    },
+    close: {
+        path: 'M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5Z',
+    },
+    menu: {
+        path: 'M3 6h18v2H3V6Zm0 5h18v2H3v-2Zm0 5h18v2H3v-2Z',
+    },
+    search: {
+        path: 'M10.5 3a7.5 7.5 0 1 0 4.73 13.32L20.91 22 22 20.91l-5.68-5.68A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z',
+    },
+    notifications: {
+        path: 'M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm7-6v-5a7 7 0 0 0-5.5-6.84V3a1.5 1.5 0 0 0-3 0v1.16A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2Z',
+    },
+    chevron_down: {
+        path: 'M5.3 8.3a1 1 0 0 1 1.4 0l5.3 5.3 5.3-5.3a1 1 0 1 1 1.4 1.4l-6 6a1 1 0 0 1-1.4 0l-6-6a1 1 0 0 1 0-1.4Z',
+    },
+    apps: {
+        path: 'M4 3h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm12 0h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1ZM4 15h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1Zm12 0h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1Z',
+    },
+    help: {
+        path: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-4.5a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5Zm.2-9.5c-2 0-3.37 1.03-3.7 2.75l1.95.4c.17-.84.77-1.3 1.67-1.3 1 0 1.63.52 1.63 1.35 0 .67-.33 1.03-1.27 1.58-1.12.65-1.48 1.27-1.48 2.47V14h2v-.55c0-.67.2-.94 1.12-1.5 1.18-.72 1.88-1.58 1.88-2.9C16 7.25 14.5 6 12.2 6Z',
+    },
+    add: {
+        path: 'M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5Z',
+    },
+    edit: {
+        path: 'm16.86 3.49 3.65 3.65L8.65 19H5v-3.65L16.86 3.49ZM19.73 2.27a1.75 1.75 0 0 0-2.47 0l-1.35 1.35 3.65 3.65 1.35-1.35a1.75 1.75 0 0 0 0-2.47l-1.18-1.18Z',
+    },
+    delete: {
+        path: 'M8 3h8l1 2h4v2H3V5h4l1-2Zm-2 6h12l-1 12H7L6 9Zm4 2v7h2v-7h-2Zm4 0v7h2v-7h-2Z',
+    },
+    toggle_on: {
+        path: 'M17 6H7a6 6 0 0 0 0 12h10a6 6 0 0 0 0-12Zm0 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z',
+    },
+    toggle_off: {
+        path: 'M17 6H7a6 6 0 0 0 0 12h10a6 6 0 0 0 0-12ZM7 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Z',
+    },
+    inbox: {
+        path: 'M4 3h16l3 11v7H1v-7L4 3Zm1.5 2L3 14h5l1 2h6l1-2h5l-2.5-9h-13Z',
+    },
+    pdf: {
+        path: 'M6 2h9l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.5V8h4.5L14 3.5ZM8 12v7h2v-2h1.2a2.5 2.5 0 0 0 0-5H8Zm2 2h1.2a.5.5 0 0 1 0 1H10v-1Zm4-2v7h2v-2h1v-2h-1v-1h2v-2h-4Z',
+    },
+};
+const TD_ICONOS_NOMBRES = Object.freeze(Object.keys(TD_ICONOS));
+
+class TdIconoRegistry {
+    iconos = new Map(Object.entries(TD_ICONOS));
+    registrar(iconos) {
+        for (const [nombre, definicion] of Object.entries(iconos)) {
+            const clave = this.normalizar(nombre);
+            if (!clave)
+                continue;
+            this.iconos.set(clave, typeof definicion === 'string' ? { path: definicion } : definicion);
+        }
+    }
+    obtener(nombre) {
+        return this.iconos.get(this.normalizar(nombre)) ?? this.iconos.get('folder');
+    }
+    existe(nombre) {
+        return this.iconos.has(this.normalizar(nombre));
+    }
+    nombres() {
+        return [...this.iconos.keys()];
+    }
+    normalizar(nombre) {
+        return (nombre ?? '').trim().toLowerCase();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdIconoRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdIconoRegistry, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdIconoRegistry, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TdIcon {
+    registry = inject(TdIconoRegistry);
+    nombre = 'folder';
+    titulo = '';
+    set tamano(value) {
+        this.tamanoCss = typeof value === 'number' ? `${value}px` : value;
+    }
+    tamanoCss = '1.25rem';
+    get tamanoHost() {
+        return this.tamanoCss;
+    }
+    definicion() {
+        return this.registry.obtener(this.nombre);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TdIcon, isStandalone: true, selector: "td-icon", inputs: { nombre: "nombre", titulo: "titulo", tamano: "tamano" }, host: { properties: { "style.--td-icon-size": "this.tamanoHost" } }, ngImport: i0, template: `
+    <svg
+      [attr.viewBox]="definicion().viewBox || '0 0 24 24'"
+      [attr.aria-hidden]="titulo ? null : 'true'"
+      [attr.aria-label]="titulo || null"
+      [attr.role]="titulo ? 'img' : null"
+      focusable="false"
+    >
+      <path [attr.d]="definicion().path" />
+    </svg>
+  `, isInline: true, styles: [":host{display:inline-flex;width:var(--td-icon-size, 1.25rem);height:var(--td-icon-size, 1.25rem);flex:0 0 auto;color:inherit;line-height:0;vertical-align:middle}svg{width:100%;height:100%;fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdIcon, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-icon', template: `
+    <svg
+      [attr.viewBox]="definicion().viewBox || '0 0 24 24'"
+      [attr.aria-hidden]="titulo ? null : 'true'"
+      [attr.aria-label]="titulo || null"
+      [attr.role]="titulo ? 'img' : null"
+      focusable="false"
+    >
+      <path [attr.d]="definicion().path" />
+    </svg>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;width:var(--td-icon-size, 1.25rem);height:var(--td-icon-size, 1.25rem);flex:0 0 auto;color:inherit;line-height:0;vertical-align:middle}svg{width:100%;height:100%;fill:currentColor}\n"] }]
+        }], propDecorators: { nombre: [{
+                type: Input
+            }], titulo: [{
+                type: Input
+            }], tamano: [{
+                type: Input
+            }], tamanoHost: [{
+                type: HostBinding,
+                args: ['style.--td-icon-size']
+            }] } });
+
+class TdDataTable {
+    viewport;
+    datos = [];
+    columnas = [];
+    acciones = [];
+    botones = [];
+    total = 0;
+    cargando = false;
+    puedeCargarMas = false;
+    itemSize = 65;
+    altura = 'min(620px, calc(100dvh - 18rem))';
+    campoId = 'id';
+    oscuro = false;
+    mostrarBusqueda = true;
+    mostrarAgregar = true;
+    placeholderBusqueda = 'Buscar...';
+    textoAgregar = 'Agregar';
+    textoVacio = 'No hay registros disponibles';
+    descripcionVacio = 'Comienza creando un nuevo registro.';
+    debounceBusqueda = 250;
+    busquedaChange = new EventEmitter();
+    agregar = new EventEmitter();
+    accion = new EventEmitter();
+    botonClick = new EventEmitter();
+    cargarMas = new EventEmitter();
+    busqueda = '';
+    timeoutBusqueda = null;
+    ultimaLongitudSolicitada = -1;
+    ngOnChanges(changes) {
+        if (changes['datos'] && this.datos.length !== this.ultimaLongitudSolicitada) {
+            this.ultimaLongitudSolicitada = -1;
+        }
+    }
+    ngOnDestroy() {
+        if (this.timeoutBusqueda)
+            clearTimeout(this.timeoutBusqueda);
+    }
+    columnasGrid() {
+        const columnas = this.columnas.map((columna) => columna.ancho ?? 'minmax(10rem, 1fr)');
+        if (this.acciones.length)
+            columnas.push('minmax(9rem, auto)');
+        return columnas.join(' ');
+    }
+    buscar() {
+        if (this.timeoutBusqueda)
+            clearTimeout(this.timeoutBusqueda);
+        this.timeoutBusqueda = setTimeout(() => this.busquedaChange.emit(this.busqueda.trim()), this.debounceBusqueda);
+    }
+    limpiarBusqueda() {
+        if (this.timeoutBusqueda)
+            clearTimeout(this.timeoutBusqueda);
+        this.busqueda = '';
+        this.busquedaChange.emit('');
+    }
+    valor(fila, clave) {
+        return fila[clave];
+    }
+    textoCelda(columna, fila, indice) {
+        const valor = this.valor(fila, columna.clave);
+        if (columna.formatear)
+            return columna.formatear(valor, fila, indice);
+        if (valor === null || valor === undefined || valor === '')
+            return '—';
+        if (columna.tipo === 'booleano')
+            return valor ? 'Sí' : 'No';
+        if (columna.tipo === 'estado')
+            return valor ? 'Activo' : 'Inactivo';
+        return String(valor);
+    }
+    tonoCelda(columna, fila) {
+        const valor = this.valor(fila, columna.clave);
+        if (columna.tono)
+            return columna.tono(valor, fila);
+        if (columna.tipo === 'estado')
+            return valor ? 'exito' : 'peligro';
+        if (columna.tipo === 'booleano')
+            return valor ? 'exito' : 'neutro';
+        return 'neutro';
+    }
+    accionesVisibles(fila) {
+        return this.acciones.filter((accion) => accion.visible?.(fila) ?? true);
+    }
+    botonesVisibles() {
+        return this.botones.filter((boton) => boton.visible ?? true);
+    }
+    ejecutarAccion(accion, fila, indice) {
+        if (accion.deshabilitada?.(fila))
+            return;
+        this.accion.emit({ accion, fila, indice });
+    }
+    alCambiarIndice() {
+        if (!this.viewport)
+            return;
+        const distanciaAlFinal = this.viewport.measureScrollOffset('bottom');
+        const umbralPx = this.itemSize * 2;
+        if (distanciaAlFinal <= umbralPx &&
+            this.datos.length > 0 &&
+            this.puedeCargarMas &&
+            !this.cargando &&
+            this.ultimaLongitudSolicitada !== this.datos.length) {
+            this.ultimaLongitudSolicitada = this.datos.length;
+            this.cargarMas.emit();
+        }
+    }
+    trackFila = (_indice, fila) => fila[this.campoId] ?? fila;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", itemSize: "itemSize", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", mostrarAgregar: "mostrarAgregar", placeholderBusqueda: "placeholderBusqueda", textoAgregar: "textoAgregar", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", agregar: "agregar", accion: "accion", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        @if (cargando) {\n          <span class=\"td-tabla__cargando-inline\"><i></i> Cargando...</span>\n        }\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n        @if (mostrarAgregar) {\n          <button class=\"td-tabla__agregar\" type=\"button\" (click)=\"agregar.emit()\">\n            <td-icon nombre=\"add\" />\n            <span>{{ textoAgregar }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                <button\n                  type=\"button\"\n                  [class]=\"'td-tabla__accion td-tabla__accion--' + (accionFila.tono || 'neutro')\"\n                  [title]=\"accionFila.etiqueta\"\n                  [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                  (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                >\n                  <td-icon [nombre]=\"accionFila.icono\" />\n                  <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__agregar,.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:#5746d8}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando-inline{display:flex;align-items:center;gap:.4rem}.td-tabla__cargando-inline i{width:.65rem;height:.65rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-data-table', imports: [FormsModule, ScrollingModule, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        @if (cargando) {\n          <span class=\"td-tabla__cargando-inline\"><i></i> Cargando...</span>\n        }\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n        @if (mostrarAgregar) {\n          <button class=\"td-tabla__agregar\" type=\"button\" (click)=\"agregar.emit()\">\n            <td-icon nombre=\"add\" />\n            <span>{{ textoAgregar }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                <button\n                  type=\"button\"\n                  [class]=\"'td-tabla__accion td-tabla__accion--' + (accionFila.tono || 'neutro')\"\n                  [title]=\"accionFila.etiqueta\"\n                  [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                  (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                >\n                  <td-icon [nombre]=\"accionFila.icono\" />\n                  <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__agregar,.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:#5746d8}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando-inline{display:flex;align-items:center;gap:.4rem}.td-tabla__cargando-inline i{width:.65rem;height:.65rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"] }]
+        }], propDecorators: { viewport: [{
+                type: ViewChild,
+                args: [CdkVirtualScrollViewport]
+            }], datos: [{
+                type: Input
+            }], columnas: [{
+                type: Input
+            }], acciones: [{
+                type: Input
+            }], botones: [{
+                type: Input
+            }], total: [{
+                type: Input
+            }], cargando: [{
+                type: Input
+            }], puedeCargarMas: [{
+                type: Input
+            }], itemSize: [{
+                type: Input
+            }], altura: [{
+                type: Input
+            }], campoId: [{
+                type: Input
+            }], oscuro: [{
+                type: Input
+            }], mostrarBusqueda: [{
+                type: Input
+            }], mostrarAgregar: [{
+                type: Input
+            }], placeholderBusqueda: [{
+                type: Input
+            }], textoAgregar: [{
+                type: Input
+            }], textoVacio: [{
+                type: Input
+            }], descripcionVacio: [{
+                type: Input
+            }], debounceBusqueda: [{
+                type: Input
+            }], busquedaChange: [{
+                type: Output
+            }], agregar: [{
+                type: Output
+            }], accion: [{
+                type: Output
+            }], botonClick: [{
+                type: Output
+            }], cargarMas: [{
+                type: Output
+            }] } });
+
+class TdFooter {
+    empresa = 'TelcomDev';
+    texto = 'Todos los derechos reservados.';
+    version = '';
+    oscuro = false;
+    compacto = false;
+    anio = new Date().getFullYear();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdFooter, isStandalone: true, selector: "td-footer", inputs: { empresa: "empresa", texto: "texto", version: "version", oscuro: "oscuro", compacto: "compacto", anio: "anio" }, ngImport: i0, template: "<footer\n  class=\"td-footer\"\n  [class.td-footer--oscuro]=\"oscuro\"\n  [class.td-footer--compacto]=\"compacto\"\n>\n  <div class=\"td-footer__identidad\">\n    <span>\u00A9 {{ anio }} {{ empresa }}</span>\n    @if (texto) {\n      <small>{{ texto }}</small>\n    }\n  </div>\n\n  <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n    <ng-content select=\"[tdFooterLinks]\" />\n  </nav>\n\n  <div class=\"td-footer__final\">\n    <ng-content select=\"[tdFooterActions]\" />\n    @if (version) {\n      <span class=\"td-footer__version\">v{{ version }}</span>\n    }\n  </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: #fff;--td-footer-borde: #e2e8f0;--td-footer-texto: #475569;--td-footer-suave: #94a3b8;display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem}.td-footer--oscuro{--td-footer-fondo: #111116;--td-footer-borde: #29292f;--td-footer-texto: #d4d4d8;--td-footer-suave: #71717a}.td-footer--compacto{min-height:3.25rem;padding-block:.65rem}.td-footer__identidad{display:flex;min-width:0;flex-wrap:wrap;gap:.3rem .75rem;align-items:center}.td-footer__identidad span{font-weight:700}.td-footer__identidad small{color:var(--td-footer-suave);font-size:inherit}.td-footer__enlaces{display:flex;align-items:center;justify-content:center;gap:1rem}.td-footer__final{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}.td-footer__version{border:1px solid var(--td-footer-borde);border-radius:999px;padding:.22rem .55rem;color:var(--td-footer-suave);font:700 .65rem/1 ui-monospace,monospace}@media(max-width:720px){.td-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.td-footer__identidad,.td-footer__final{justify-content:center}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdFooter, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer\n  class=\"td-footer\"\n  [class.td-footer--oscuro]=\"oscuro\"\n  [class.td-footer--compacto]=\"compacto\"\n>\n  <div class=\"td-footer__identidad\">\n    <span>\u00A9 {{ anio }} {{ empresa }}</span>\n    @if (texto) {\n      <small>{{ texto }}</small>\n    }\n  </div>\n\n  <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n    <ng-content select=\"[tdFooterLinks]\" />\n  </nav>\n\n  <div class=\"td-footer__final\">\n    <ng-content select=\"[tdFooterActions]\" />\n    @if (version) {\n      <span class=\"td-footer__version\">v{{ version }}</span>\n    }\n  </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: #fff;--td-footer-borde: #e2e8f0;--td-footer-texto: #475569;--td-footer-suave: #94a3b8;display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem}.td-footer--oscuro{--td-footer-fondo: #111116;--td-footer-borde: #29292f;--td-footer-texto: #d4d4d8;--td-footer-suave: #71717a}.td-footer--compacto{min-height:3.25rem;padding-block:.65rem}.td-footer__identidad{display:flex;min-width:0;flex-wrap:wrap;gap:.3rem .75rem;align-items:center}.td-footer__identidad span{font-weight:700}.td-footer__identidad small{color:var(--td-footer-suave);font-size:inherit}.td-footer__enlaces{display:flex;align-items:center;justify-content:center;gap:1rem}.td-footer__final{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}.td-footer__version{border:1px solid var(--td-footer-borde);border-radius:999px;padding:.22rem .55rem;color:var(--td-footer-suave);font:700 .65rem/1 ui-monospace,monospace}@media(max-width:720px){.td-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.td-footer__identidad,.td-footer__final{justify-content:center}}\n"] }]
+        }], propDecorators: { empresa: [{
+                type: Input
+            }], texto: [{
+                type: Input
+            }], version: [{
+                type: Input
+            }], oscuro: [{
+                type: Input
+            }], compacto: [{
+                type: Input
+            }], anio: [{
+                type: Input
+            }] } });
+
+class TdHeader {
+    menuAbierto = true;
+    mostrarMenu = true;
+    usuario = '';
+    cargo = '';
+    avatarUrl = '';
+    notificaciones = [];
+    oscuro = false;
+    fijo = true;
+    menuToggle = new EventEmitter();
+    notificacionSeleccionada = new EventEmitter();
+    verTodasNotificaciones = new EventEmitter();
+    accionPerfil = new EventEmitter();
+    panelNotificacionesAbierto = false;
+    panelPerfilAbierto = false;
+    alternarMenu() {
+        this.menuToggle.emit();
+    }
+    alternarNotificaciones() {
+        this.panelNotificacionesAbierto = !this.panelNotificacionesAbierto;
+        this.panelPerfilAbierto = false;
+    }
+    alternarPerfil() {
+        this.panelPerfilAbierto = !this.panelPerfilAbierto;
+        this.panelNotificacionesAbierto = false;
+    }
+    seleccionarNotificacion(notificacion) {
+        this.notificacionSeleccionada.emit(notificacion);
+        this.panelNotificacionesAbierto = false;
+    }
+    emitirAccionPerfil(accion) {
+        this.accionPerfil.emit(accion);
+        this.panelPerfilAbierto = false;
+    }
+    notificacionesNoLeidas() {
+        return this.notificaciones.filter((item) => !item.leida).length;
+    }
+    inicialesUsuario() {
+        const partes = this.usuario.trim().split(/\s+/).filter(Boolean);
+        return (partes
+            .slice(0, 2)
+            .map((parte) => parte.charAt(0))
+            .join('') || 'U').toUpperCase();
+    }
+    cerrarConEscape() {
+        this.panelNotificacionesAbierto = false;
+        this.panelPerfilAbierto = false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdHeader, isStandalone: true, selector: "td-header", inputs: { menuAbierto: "menuAbierto", mostrarMenu: "mostrarMenu", usuario: "usuario", cargo: "cargo", avatarUrl: "avatarUrl", notificaciones: "notificaciones", oscuro: "oscuro", fijo: "fijo" }, outputs: { menuToggle: "menuToggle", notificacionSeleccionada: "notificacionSeleccionada", verTodasNotificaciones: "verTodasNotificaciones", accionPerfil: "accionPerfil" }, host: { listeners: { "document:keydown.escape": "cerrarConEscape()" } }, ngImport: i0, template: "<header\n  class=\"td-header\"\n  [class.td-header--oscuro]=\"oscuro\"\n  [class.td-header--fijo]=\"fijo\"\n>\n  <div class=\"td-header__inicio\">\n    @if (mostrarMenu) {\n      <button\n        class=\"td-header__boton td-header__menu\"\n        type=\"button\"\n        [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n        [attr.aria-expanded]=\"menuAbierto\"\n        (click)=\"alternarMenu()\"\n      >\n        <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n      </button>\n    }\n\n    <ng-content select=\"[tdHeaderStart]\" />\n  </div>\n\n  <div class=\"td-header__centro\">\n    <ng-content select=\"[tdHeaderCenter]\" />\n  </div>\n\n  <div class=\"td-header__acciones\">\n    <ng-content select=\"[tdHeaderActions]\" />\n\n    <div class=\"td-header__desplegable\">\n      <button\n        class=\"td-header__boton td-header__notificaciones\"\n        type=\"button\"\n        aria-label=\"Notificaciones\"\n        [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n        (click)=\"alternarNotificaciones()\"\n      >\n        <td-icon nombre=\"notifications\" />\n        @if (notificacionesNoLeidas() > 0) {\n          <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n        }\n      </button>\n\n      @if (panelNotificacionesAbierto) {\n        <section class=\"td-header__panel td-header__panel--notificaciones\">\n          <header>\n            <div>\n              <strong>Notificaciones</strong>\n              <small>{{ notificacionesNoLeidas() }} sin leer</small>\n            </div>\n            <td-icon nombre=\"notifications\" />\n          </header>\n\n          <div class=\"td-header__lista-notificaciones\">\n            @for (notificacion of notificaciones; track notificacion.id) {\n              <button\n                type=\"button\"\n                [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n                (click)=\"seleccionarNotificacion(notificacion)\"\n              >\n                <span class=\"td-header__notificacion-icono\">\n                  <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n                </span>\n                <span>\n                  <strong>{{ notificacion.titulo }}</strong>\n                  @if (notificacion.descripcion) {\n                    <small>{{ notificacion.descripcion }}</small>\n                  }\n                  @if (notificacion.fecha) {\n                    <time>{{ notificacion.fecha }}</time>\n                  }\n                </span>\n              </button>\n            } @empty {\n              <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n            }\n          </div>\n\n          @if (notificaciones.length) {\n            <button\n              class=\"td-header__ver-todas\"\n              type=\"button\"\n              (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n            >\n              Ver todas las notificaciones\n            </button>\n          }\n        </section>\n      }\n    </div>\n\n    @if (usuario) {\n      <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__perfil\"\n          type=\"button\"\n          aria-label=\"Abrir perfil de usuario\"\n          [attr.aria-expanded]=\"panelPerfilAbierto\"\n          (click)=\"alternarPerfil()\"\n        >\n          <span class=\"td-header__avatar\">\n            @if (avatarUrl) {\n              <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n            } @else {\n              {{ inicialesUsuario() }}\n            }\n          </span>\n          <span class=\"td-header__usuario\">\n            <strong>{{ usuario }}</strong>\n            @if (cargo) {\n              <small>{{ cargo }}</small>\n            }\n          </span>\n          <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n        </button>\n\n        @if (panelPerfilAbierto) {\n          <section class=\"td-header__panel td-header__panel--perfil\">\n            <div class=\"td-header__perfil-resumen\">\n              <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n              <div>\n                <strong>{{ usuario }}</strong>\n                <small>{{ cargo || 'Usuario' }}</small>\n              </div>\n            </div>\n            <div class=\"td-header__perfil-opciones\">\n              <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n                <td-icon nombre=\"person\" /> Mi perfil\n              </button>\n              <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n                <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n              </button>\n              <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n                <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n              </button>\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: rgba(255, 255, 255, .92);--borde: #e5e9f1;--texto: #172036;--suave: #7b8498;--hover: #f3f5fa;--acento: #5746d8;position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:0 8px 30px #232a440d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: rgba(18, 18, 24, .94);--borde: #2b2c35;--texto: #f5f5f6;--suave: #92929f;--hover: #272730;--acento: #a89cf7}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:.75rem;padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:999px;padding:0 .15rem;color:#fff;background:#ef4444;font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:.8rem;padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:.7rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:1rem;color:var(--texto);background:var(--fondo);box-shadow:0 22px 55px #0f172a2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:#dc2626}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdHeader, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-header', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n  class=\"td-header\"\n  [class.td-header--oscuro]=\"oscuro\"\n  [class.td-header--fijo]=\"fijo\"\n>\n  <div class=\"td-header__inicio\">\n    @if (mostrarMenu) {\n      <button\n        class=\"td-header__boton td-header__menu\"\n        type=\"button\"\n        [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n        [attr.aria-expanded]=\"menuAbierto\"\n        (click)=\"alternarMenu()\"\n      >\n        <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n      </button>\n    }\n\n    <ng-content select=\"[tdHeaderStart]\" />\n  </div>\n\n  <div class=\"td-header__centro\">\n    <ng-content select=\"[tdHeaderCenter]\" />\n  </div>\n\n  <div class=\"td-header__acciones\">\n    <ng-content select=\"[tdHeaderActions]\" />\n\n    <div class=\"td-header__desplegable\">\n      <button\n        class=\"td-header__boton td-header__notificaciones\"\n        type=\"button\"\n        aria-label=\"Notificaciones\"\n        [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n        (click)=\"alternarNotificaciones()\"\n      >\n        <td-icon nombre=\"notifications\" />\n        @if (notificacionesNoLeidas() > 0) {\n          <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n        }\n      </button>\n\n      @if (panelNotificacionesAbierto) {\n        <section class=\"td-header__panel td-header__panel--notificaciones\">\n          <header>\n            <div>\n              <strong>Notificaciones</strong>\n              <small>{{ notificacionesNoLeidas() }} sin leer</small>\n            </div>\n            <td-icon nombre=\"notifications\" />\n          </header>\n\n          <div class=\"td-header__lista-notificaciones\">\n            @for (notificacion of notificaciones; track notificacion.id) {\n              <button\n                type=\"button\"\n                [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n                (click)=\"seleccionarNotificacion(notificacion)\"\n              >\n                <span class=\"td-header__notificacion-icono\">\n                  <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n                </span>\n                <span>\n                  <strong>{{ notificacion.titulo }}</strong>\n                  @if (notificacion.descripcion) {\n                    <small>{{ notificacion.descripcion }}</small>\n                  }\n                  @if (notificacion.fecha) {\n                    <time>{{ notificacion.fecha }}</time>\n                  }\n                </span>\n              </button>\n            } @empty {\n              <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n            }\n          </div>\n\n          @if (notificaciones.length) {\n            <button\n              class=\"td-header__ver-todas\"\n              type=\"button\"\n              (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n            >\n              Ver todas las notificaciones\n            </button>\n          }\n        </section>\n      }\n    </div>\n\n    @if (usuario) {\n      <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n      <div class=\"td-header__desplegable\">\n        <button\n          class=\"td-header__perfil\"\n          type=\"button\"\n          aria-label=\"Abrir perfil de usuario\"\n          [attr.aria-expanded]=\"panelPerfilAbierto\"\n          (click)=\"alternarPerfil()\"\n        >\n          <span class=\"td-header__avatar\">\n            @if (avatarUrl) {\n              <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n            } @else {\n              {{ inicialesUsuario() }}\n            }\n          </span>\n          <span class=\"td-header__usuario\">\n            <strong>{{ usuario }}</strong>\n            @if (cargo) {\n              <small>{{ cargo }}</small>\n            }\n          </span>\n          <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n        </button>\n\n        @if (panelPerfilAbierto) {\n          <section class=\"td-header__panel td-header__panel--perfil\">\n            <div class=\"td-header__perfil-resumen\">\n              <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n              <div>\n                <strong>{{ usuario }}</strong>\n                <small>{{ cargo || 'Usuario' }}</small>\n              </div>\n            </div>\n            <div class=\"td-header__perfil-opciones\">\n              <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n                <td-icon nombre=\"person\" /> Mi perfil\n              </button>\n              <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n                <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n              </button>\n              <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n                <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n              </button>\n            </div>\n          </section>\n        }\n      </div>\n    }\n  </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: rgba(255, 255, 255, .92);--borde: #e5e9f1;--texto: #172036;--suave: #7b8498;--hover: #f3f5fa;--acento: #5746d8;position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:0 8px 30px #232a440d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: rgba(18, 18, 24, .94);--borde: #2b2c35;--texto: #f5f5f6;--suave: #92929f;--hover: #272730;--acento: #a89cf7}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:.75rem;padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:999px;padding:0 .15rem;color:#fff;background:#ef4444;font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:.8rem;padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:.7rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:1rem;color:var(--texto);background:var(--fondo);box-shadow:0 22px 55px #0f172a2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:#dc2626}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"] }]
+        }], propDecorators: { menuAbierto: [{
+                type: Input
+            }], mostrarMenu: [{
+                type: Input
+            }], usuario: [{
+                type: Input
+            }], cargo: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], notificaciones: [{
+                type: Input
+            }], oscuro: [{
+                type: Input
+            }], fijo: [{
+                type: Input
+            }], menuToggle: [{
+                type: Output
+            }], notificacionSeleccionada: [{
+                type: Output
+            }], verTodasNotificaciones: [{
+                type: Output
+            }], accionPerfil: [{
+                type: Output
+            }], cerrarConEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }] } });
+
 class TdSidebar {
     titulo = 'Gestión Corporativa';
     subtitulo = 'Central Platform';
@@ -369,6 +829,7 @@ class TdSidebar {
     error = '';
     cargando = false;
     oscuro = false;
+    modoCerrado = 'compacto';
     set abierto(value) {
         this.abiertoInterno.set(value);
     }
@@ -386,11 +847,6 @@ class TdSidebar {
     abiertoInterno = signal(true, ...(ngDevMode ? [{ debugName: "abiertoInterno" }] : /* istanbul ignore next */ []));
     menuNormalizado = signal([], ...(ngDevMode ? [{ debugName: "menuNormalizado" }] : /* istanbul ignore next */ []));
     expandidos = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandidos" }] : /* istanbul ignore next */ []));
-    alternarSidebar() {
-        const siguiente = !this.abiertoInterno();
-        this.abiertoInterno.set(siguiente);
-        this.abiertoChange.emit(siguiente);
-    }
     alternarGrupo(clave) {
         if (!this.abiertoInterno()) {
             this.abiertoInterno.set(true);
@@ -414,10 +870,6 @@ class TdSidebar {
     inicialMarca() {
         return (this.titulo.trim().charAt(0) || 'T').toUpperCase();
     }
-    iconoPath(icono) {
-        const nombre = (icono ?? '').trim().toLowerCase();
-        return ICONOS[nombre] ?? ICONOS['folder'];
-    }
     normalizarMenu(items) {
         return [...items]
             .sort((a, b) => a.orden - b.orden)
@@ -428,11 +880,11 @@ class TdSidebar {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside class=\"td-sidebar\" [class.td-sidebar--compacto]=\"!abiertoInterno()\" [class.td-sidebar--oscuro]=\"oscuro\">\n  <header class=\"td-sidebar__marca\">\n    <div class=\"td-sidebar__logo\">\n      @if (logoUrl) {\n        <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      } @else {\n        <span>{{ inicialMarca() }}</span>\n      }\n    </div>\n\n    @if (abiertoInterno()) {\n      <div class=\"td-sidebar__marca-texto\">\n        <small>{{ subtitulo }}</small>\n        <strong>{{ titulo }}</strong>\n      </div>\n    }\n\n    <button\n      class=\"td-sidebar__alternador\"\n      type=\"button\"\n      [attr.aria-label]=\"abiertoInterno() ? 'Contraer men\u00FA' : 'Expandir men\u00FA'\"\n      [attr.title]=\"abiertoInterno() ? 'Contraer men\u00FA' : 'Expandir men\u00FA'\"\n      (click)=\"alternarSidebar()\"\n    >\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"m14.5 6-6 6 6 6\" />\n      </svg>\n    </button>\n  </header>\n\n  <div class=\"td-sidebar__encabezado\">\n    @if (abiertoInterno()) {\n      <span>{{ etiquetaNavegacion }}</span>\n    } @else {\n      <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n    }\n  </div>\n\n  <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n    @if (cargando) {\n      <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n    } @else if (error) {\n      <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n    } @else if (!menuNormalizado().length) {\n      <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"listaMenu\"\n        [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n      />\n    }\n  </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n  <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n    @for (item of items; track item) {\n      @let clave = claveItem(item, padre, $index);\n      @let tieneHijos = item.subMenus.length > 0;\n\n      <li class=\"td-sidebar__item\">\n        @if (tieneHijos) {\n          <button\n            class=\"td-sidebar__enlace\"\n            type=\"button\"\n            [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n            [attr.aria-expanded]=\"estaExpandido(clave)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"alternarGrupo(clave)\"\n          >\n            <svg class=\"td-sidebar__icono\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path [attr.d]=\"iconoPath(item.icono)\" />\n            </svg>\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n              <svg\n                class=\"td-sidebar__flecha\"\n                [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m9 6 6 6-6 6\" />\n              </svg>\n            }\n          </button>\n        } @else {\n          <a\n            class=\"td-sidebar__enlace\"\n            [routerLink]=\"item.ruta || '/'\"\n            routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n            [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"seleccionarItem(item, nivel)\"\n          >\n            <svg class=\"td-sidebar__icono\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path [attr.d]=\"iconoPath(item.icono)\" />\n            </svg>\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n            }\n          </a>\n        }\n\n        @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n          <ng-container\n            [ngTemplateOutlet]=\"listaMenu\"\n            [ngTemplateOutletContext]=\"{\n              items: item.subMenus,\n              nivel: nivel + 1,\n              padre: clave\n            }\"\n          />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: #fff;--td-borde: #e2e8f0;--td-texto: #334155;--td-texto-suave: #64748b;--td-hover: #f1f5f9;--td-activo: #e8efff;--td-acento: #2563eb;display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: #09090b;--td-borde: #27272a;--td-texto: #d4d4d8;--td-texto-suave: #71717a;--td-hover: #18181b;--td-activo: #172554;--td-acento: #60a5fa}.td-sidebar--compacto{width:5rem}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:.75rem;color:#fff;background:linear-gradient(135deg,#2563eb,#6d28d9);font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__alternador{display:grid;width:1.75rem;height:1.75rem;flex:0 0 1.75rem;place-items:center;border:0;border-radius:.45rem;color:var(--td-texto-suave);background:transparent;cursor:pointer}.td-sidebar__alternador:hover{color:var(--td-texto);background:var(--td-hover)}.td-sidebar__alternador svg{width:1rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;transition:transform .2s ease}.td-sidebar--compacto .td-sidebar__alternador{display:none}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:.55rem;padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem;fill:currentColor}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:#d97706}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n  class=\"td-sidebar\"\n  [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n  [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n  [class.td-sidebar--oscuro]=\"oscuro\"\n  [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n  <header class=\"td-sidebar__marca\">\n    <div class=\"td-sidebar__logo\">\n      @if (logoUrl) {\n        <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      } @else {\n        <span>{{ inicialMarca() }}</span>\n      }\n    </div>\n\n    @if (abiertoInterno()) {\n      <div class=\"td-sidebar__marca-texto\">\n        <small>{{ subtitulo }}</small>\n        <strong>{{ titulo }}</strong>\n      </div>\n    }\n\n  </header>\n\n  <div class=\"td-sidebar__encabezado\">\n    @if (abiertoInterno()) {\n      <span>{{ etiquetaNavegacion }}</span>\n    } @else {\n      <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n    }\n  </div>\n\n  <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n    @if (cargando) {\n      <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n    } @else if (error) {\n      <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n    } @else if (!menuNormalizado().length) {\n      <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"listaMenu\"\n        [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n      />\n    }\n  </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n  <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n    @for (item of items; track item) {\n      @let clave = claveItem(item, padre, $index);\n      @let tieneHijos = item.subMenus.length > 0;\n\n      <li class=\"td-sidebar__item\">\n        @if (tieneHijos) {\n          <button\n            class=\"td-sidebar__enlace\"\n            type=\"button\"\n            [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n            [attr.aria-expanded]=\"estaExpandido(clave)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"alternarGrupo(clave)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n              <td-icon\n                class=\"td-sidebar__flecha\"\n                [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n                nombre=\"chevron_right\"\n              />\n            }\n          </button>\n        } @else {\n          <a\n            class=\"td-sidebar__enlace\"\n            [routerLink]=\"item.ruta || '/'\"\n            routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n            [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"seleccionarItem(item, nivel)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n            }\n          </a>\n        }\n\n        @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n          <ng-container\n            [ngTemplateOutlet]=\"listaMenu\"\n            [ngTemplateOutletContext]=\"{\n              items: item.subMenus,\n              nivel: nivel + 1,\n              padre: clave\n            }\"\n          />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: #fff;--td-borde: #e2e8f0;--td-texto: #334155;--td-texto-suave: #64748b;--td-hover: #f1f5f9;--td-activo: #e8efff;--td-acento: #2563eb;display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: #09090b;--td-borde: #27272a;--td-texto: #d4d4d8;--td-texto-suave: #71717a;--td-hover: #18181b;--td-activo: #172554;--td-acento: #60a5fa}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:.75rem;color:#fff;background:linear-gradient(135deg,#2563eb,#6d28d9);font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:.55rem;padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:#d97706}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSidebar, decorators: [{
             type: Component,
-            args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, RouterLinkActive], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside class=\"td-sidebar\" [class.td-sidebar--compacto]=\"!abiertoInterno()\" [class.td-sidebar--oscuro]=\"oscuro\">\n  <header class=\"td-sidebar__marca\">\n    <div class=\"td-sidebar__logo\">\n      @if (logoUrl) {\n        <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      } @else {\n        <span>{{ inicialMarca() }}</span>\n      }\n    </div>\n\n    @if (abiertoInterno()) {\n      <div class=\"td-sidebar__marca-texto\">\n        <small>{{ subtitulo }}</small>\n        <strong>{{ titulo }}</strong>\n      </div>\n    }\n\n    <button\n      class=\"td-sidebar__alternador\"\n      type=\"button\"\n      [attr.aria-label]=\"abiertoInterno() ? 'Contraer men\u00FA' : 'Expandir men\u00FA'\"\n      [attr.title]=\"abiertoInterno() ? 'Contraer men\u00FA' : 'Expandir men\u00FA'\"\n      (click)=\"alternarSidebar()\"\n    >\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n        <path d=\"m14.5 6-6 6 6 6\" />\n      </svg>\n    </button>\n  </header>\n\n  <div class=\"td-sidebar__encabezado\">\n    @if (abiertoInterno()) {\n      <span>{{ etiquetaNavegacion }}</span>\n    } @else {\n      <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n    }\n  </div>\n\n  <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n    @if (cargando) {\n      <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n    } @else if (error) {\n      <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n    } @else if (!menuNormalizado().length) {\n      <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"listaMenu\"\n        [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n      />\n    }\n  </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n  <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n    @for (item of items; track item) {\n      @let clave = claveItem(item, padre, $index);\n      @let tieneHijos = item.subMenus.length > 0;\n\n      <li class=\"td-sidebar__item\">\n        @if (tieneHijos) {\n          <button\n            class=\"td-sidebar__enlace\"\n            type=\"button\"\n            [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n            [attr.aria-expanded]=\"estaExpandido(clave)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"alternarGrupo(clave)\"\n          >\n            <svg class=\"td-sidebar__icono\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path [attr.d]=\"iconoPath(item.icono)\" />\n            </svg>\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n              <svg\n                class=\"td-sidebar__flecha\"\n                [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n                viewBox=\"0 0 24 24\"\n                aria-hidden=\"true\"\n              >\n                <path d=\"m9 6 6 6-6 6\" />\n              </svg>\n            }\n          </button>\n        } @else {\n          <a\n            class=\"td-sidebar__enlace\"\n            [routerLink]=\"item.ruta || '/'\"\n            routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n            [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"seleccionarItem(item, nivel)\"\n          >\n            <svg class=\"td-sidebar__icono\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n              <path [attr.d]=\"iconoPath(item.icono)\" />\n            </svg>\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n            }\n          </a>\n        }\n\n        @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n          <ng-container\n            [ngTemplateOutlet]=\"listaMenu\"\n            [ngTemplateOutletContext]=\"{\n              items: item.subMenus,\n              nivel: nivel + 1,\n              padre: clave\n            }\"\n          />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: #fff;--td-borde: #e2e8f0;--td-texto: #334155;--td-texto-suave: #64748b;--td-hover: #f1f5f9;--td-activo: #e8efff;--td-acento: #2563eb;display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: #09090b;--td-borde: #27272a;--td-texto: #d4d4d8;--td-texto-suave: #71717a;--td-hover: #18181b;--td-activo: #172554;--td-acento: #60a5fa}.td-sidebar--compacto{width:5rem}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:.75rem;color:#fff;background:linear-gradient(135deg,#2563eb,#6d28d9);font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__alternador{display:grid;width:1.75rem;height:1.75rem;flex:0 0 1.75rem;place-items:center;border:0;border-radius:.45rem;color:var(--td-texto-suave);background:transparent;cursor:pointer}.td-sidebar__alternador:hover{color:var(--td-texto);background:var(--td-hover)}.td-sidebar__alternador svg{width:1rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;transition:transform .2s ease}.td-sidebar--compacto .td-sidebar__alternador{display:none}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:.55rem;padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem;fill:currentColor}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:#d97706}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"] }]
+            args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside\n  class=\"td-sidebar\"\n  [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n  [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n  [class.td-sidebar--oscuro]=\"oscuro\"\n  [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n  <header class=\"td-sidebar__marca\">\n    <div class=\"td-sidebar__logo\">\n      @if (logoUrl) {\n        <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n      } @else {\n        <span>{{ inicialMarca() }}</span>\n      }\n    </div>\n\n    @if (abiertoInterno()) {\n      <div class=\"td-sidebar__marca-texto\">\n        <small>{{ subtitulo }}</small>\n        <strong>{{ titulo }}</strong>\n      </div>\n    }\n\n  </header>\n\n  <div class=\"td-sidebar__encabezado\">\n    @if (abiertoInterno()) {\n      <span>{{ etiquetaNavegacion }}</span>\n    } @else {\n      <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n    }\n  </div>\n\n  <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n    @if (cargando) {\n      <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n    } @else if (error) {\n      <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n    } @else if (!menuNormalizado().length) {\n      <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n    } @else {\n      <ng-container\n        [ngTemplateOutlet]=\"listaMenu\"\n        [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n      />\n    }\n  </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n  <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n    @for (item of items; track item) {\n      @let clave = claveItem(item, padre, $index);\n      @let tieneHijos = item.subMenus.length > 0;\n\n      <li class=\"td-sidebar__item\">\n        @if (tieneHijos) {\n          <button\n            class=\"td-sidebar__enlace\"\n            type=\"button\"\n            [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n            [attr.aria-expanded]=\"estaExpandido(clave)\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"alternarGrupo(clave)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n              <td-icon\n                class=\"td-sidebar__flecha\"\n                [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n                nombre=\"chevron_right\"\n              />\n            }\n          </button>\n        } @else {\n          <a\n            class=\"td-sidebar__enlace\"\n            [routerLink]=\"item.ruta || '/'\"\n            routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n            [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n            [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n            (click)=\"seleccionarItem(item, nivel)\"\n          >\n            <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n            @if (abiertoInterno()) {\n              <span>{{ item.nombre }}</span>\n            }\n          </a>\n        }\n\n        @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n          <ng-container\n            [ngTemplateOutlet]=\"listaMenu\"\n            [ngTemplateOutletContext]=\"{\n              items: item.subMenus,\n              nivel: nivel + 1,\n              padre: clave\n            }\"\n          />\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: #fff;--td-borde: #e2e8f0;--td-texto: #334155;--td-texto-suave: #64748b;--td-hover: #f1f5f9;--td-activo: #e8efff;--td-acento: #2563eb;display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: #09090b;--td-borde: #27272a;--td-texto: #d4d4d8;--td-texto-suave: #71717a;--td-hover: #18181b;--td-activo: #172554;--td-acento: #60a5fa}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:.75rem;color:#fff;background:linear-gradient(135deg,#2563eb,#6d28d9);font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:.55rem;padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:#d97706}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"] }]
         }], propDecorators: { titulo: [{
                 type: Input
             }], subtitulo: [{
@@ -453,6 +905,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], oscuro: [{
                 type: Input
+            }], modoCerrado: [{
+                type: Input
             }], abierto: [{
                 type: Input
             }], menu: [{
@@ -462,21 +916,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             }], seleccionar: [{
                 type: Output
             }] } });
-const ICONOS = {
-    home: 'M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V10.5Z',
-    dashboard: 'M4 3h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm10 0h6a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm0 8h6a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1ZM4 14h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-5a1 1 0 0 1 1-1Z',
-    folder: 'M3 5a2 2 0 0 1 2-2h5l2 2h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Z',
-    settings: 'M12 8.5a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7Zm8.5 3.5c0-.5-.05-.98-.14-1.45l2.02-1.57-2-3.46-2.47 1a8.7 8.7 0 0 0-2.5-1.45L15 2.5h-4l-.4 2.57a8.7 8.7 0 0 0-2.51 1.45l-2.47-1-2 3.46 2.02 1.57a7.7 7.7 0 0 0 0 2.9l-2.02 1.57 2 3.46 2.47-1a8.7 8.7 0 0 0 2.5 1.45L11 21.5h4l.4-2.57a8.7 8.7 0 0 0 2.51-1.45l2.47 1 2-3.46-2.02-1.57c.09-.47.14-.95.14-1.45Z',
-    people: 'M16 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM6.5 12a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM16 13c-4 0-7 2-7 4.5V21h14v-3.5C23 15 20 13 16 13ZM6.5 14C2.9 14 1 15.8 1 18v3h6v-3.5c0-1.2.48-2.28 1.3-3.16A9.3 9.3 0 0 0 6.5 14Z',
-    person: 'M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5c0-3-4-5.5-9-5.5Z',
-    security: 'M12 2 4 5v6c0 5.05 3.41 9.74 8 11 4.59-1.26 8-5.95 8-11V5l-8-3Zm-1 14-4-4 1.4-1.4 2.6 2.58 5.6-5.58L18 9l-7 7Z',
-    inventory: 'm12 2 9 5-9 5-9-5 9-5Zm-7 8.5 6 3.33V22l-6-3.33V10.5Zm8 11.5v-8.17l6-3.33v8.17L13 22Z',
-    shopping_cart: 'M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM6.2 6l.8 2h11.6l-1.9 5H8.1L4.3 3H1v2h2l3.6 9.6A2 2 0 0 0 8.5 16H19v-2H8.5l-.4-1H18a2 2 0 0 0 1.86-1.27L22 6H6.2Z',
-    receipt: 'M5 2v20l3-2 4 2 4-2 3 2V2l-3 2-4-2-4 2-3-2Zm3 6h8v2H8V8Zm0 4h8v2H8v-2Z',
-    assessment: 'M4 20h16v2H4a2 2 0 0 1-2-2V4h2v16Zm3-2H5v-6h2v6Zm4 0H9V7h2v11Zm4 0h-2V4h2v14Zm4 0h-2v-9h2v9Z',
-    description: 'M6 2h8l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm7 1.5V8h4.5L13 3.5ZM8 12v2h8v-2H8Zm0 4v2h8v-2H8Z',
-    business: 'M3 21V3h10v5h8v13h-7v-4h-2v4H3Zm3-14h2V5H6v2Zm4 0h2V5h-2v2Zm-4 4h2V9H6v2Zm4 0h2V9h-2v2Zm6 1h2v-2h-2v2Zm0 4h2v-2h-2v2Z',
-};
 
 /*
  * Public API Surface of telcomdev-ui
@@ -486,5 +925,5 @@ const ICONOS = {
  * Generated bundle index. Do not edit.
  */
 
-export { TdAlerta, TdSidebar, TelcomdevUi };
+export { TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdDataTable, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdSidebar, TelcomdevUi };
 //# sourceMappingURL=telcomdev-ui.mjs.map