@telcomdev/ui 0.1.15 → 0.1.17

package/README.md

@@ -76,8 +76,64 @@ el borde outline permanecen visibles en todos los estados.
 />
 ```
 
-Ambos controles usan `TdSelectOption<T>`, son compatibles con formularios
-Angular y muestran su panel mediante Angular CDK Overlay.
+Ambos controles son compatibles con formularios Angular y muestran su panel
+mediante Angular CDK Overlay.
+
+`td-autocomplete-select` soporta dos formas de trabajo:
+
+### Modo estándar
+
+Usa `TdSelectOption<T>` cuando ya tienes opciones normalizadas:
+
+```ts
+readonly proveedores = [
+  { value: 1, label: 'AMERICA MOVIL PERU S.A.C.', description: '20467534026' },
+];
+
+proveedorId: number | null = 1;
+```
+
+```html
+<td-autocomplete-select
+  label="Proveedor"
+  [options]="proveedores"
+  [(ngModel)]="proveedorId"
+/>
+```
+
+### Modo mapeado
+
+Usa `valueKey`, `labelKey` y, opcionalmente, `descriptionKey`, `iconKey` o
+`disabledKey` cuando quieres consumir DTOs reales sin mapearlos manualmente:
+
+```ts
+readonly proveedores = [
+  {
+    proveedorId: 1,
+    tipoDocumentoIdentidadId: 4,
+    numeroDocumento: '20467534026',
+    nombre: 'AMERICA MOVIL PERU S.A.C.',
+  },
+];
+
+proveedorId: number | null = 1;
+```
+
+```html
+<td-autocomplete-select
+  label="Proveedor"
+  [options]="proveedores"
+  valueKey="proveedorId"
+  labelKey="nombre"
+  descriptionKey="numeroDocumento"
+  [(ngModel)]="proveedorId"
+/>
+```
+
+Si el valor llega antes que las opciones, o las opciones llegan antes que el
+valor, el texto visible se sincroniza automáticamente. Esta sincronización no
+emite `selectionChange`; ese evento se reserva para selección o limpieza
+realizada por el usuario.
 
 El comportamiento predeterminado durante el scroll es `reposition`, por lo que
 el panel permanece unido al control. Puede cambiarse con

package/fesm2022/telcomdev-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, EventEmitter, booleanAttribute, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, HostListener, Directive, EnvironmentInjector, DestroyRef, TemplateRef, ViewChildren, ContentChildren, effect } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, EventEmitter, booleanAttribute, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, HostListener, Directive, EnvironmentInjector, DestroyRef, effect, TemplateRef, ViewChildren, ContentChildren } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { FORM_FIELD } from '@angular/forms/signals';
@@ -1528,11 +1528,11 @@ class TdDataTable {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], 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        <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      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\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          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.max-height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\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 (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else 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\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\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                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\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\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 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__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));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:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.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{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;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{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;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__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #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:var(--td-radius-xl, 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}}.td-tabla-imagen{width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@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}.td-tabla-imagen{padding:.75rem}.td-tabla-imagen{width:calc(100vw - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], 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        <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      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\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          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\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 (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else 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\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\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                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\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\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 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__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));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:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.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{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;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{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;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__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #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:var(--td-radius-xl, 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}}.td-tabla-imagen{width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@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}.td-tabla-imagen{padding:.75rem}.td-tabla-imagen{width:calc(100vw - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, decorators: [{
             type: Component,
-            args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], 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        <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      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\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          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.max-height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\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 (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else 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\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\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                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\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\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 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__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));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:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.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{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;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{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;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__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #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:var(--td-radius-xl, 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}}.td-tabla-imagen{width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@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}.td-tabla-imagen{padding:.75rem}.td-tabla-imagen{width:calc(100vw - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"] }]
+            args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], 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        <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      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\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          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\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 (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else 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\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\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                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\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\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 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__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));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:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.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{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;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{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;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__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #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:var(--td-radius-xl, 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}}.td-tabla-imagen{width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@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}.td-tabla-imagen{padding:.75rem}.td-tabla-imagen{width:calc(100vw - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"] }]
         }], propDecorators: { viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -4157,14 +4157,28 @@ class TdAutocompleteSelect {
     destroyRef = inject(DestroyRef);
     scrollStrategies = inject(ScrollStrategyOptions);
     generatedId = `td-autocomplete-${++autocompleteSequence}`;
+    rawOptions = [];
+    normalizedOptions = [];
     searchInput;
     connectedOverlay;
     panel;
     label = 'Buscar y seleccionar';
     placeholder = 'Escribe para buscar...';
-    options = [];
+    set options(value) {
+        this.rawOptions = value ?? [];
+        this.normalizedOptions = this.normalizeOptions(this.rawOptions);
+        this.syncSearchWithValue();
+    }
+    get options() {
+        return this.normalizedOptions;
+    }
     hint = '';
     hideLabel = false;
+    valueKey = null;
+    labelKey = null;
+    descriptionKey = null;
+    iconKey = null;
+    disabledKey = null;
     name = input('', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     disabled = input(false, /* @ts-ignore */
@@ -4277,11 +4291,31 @@ class TdAutocompleteSelect {
         };
         this.document.addEventListener('scroll', scrollListener, true);
         this.destroyRef.onDestroy(() => this.document.removeEventListener('scroll', scrollListener, true));
+        effect(() => {
+            this.value();
+            this.syncSearchWithValue();
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['valueKey'] ||
+            changes['labelKey'] ||
+            changes['descriptionKey'] ||
+            changes['iconKey'] ||
+            changes['disabledKey']) {
+            this.normalizedOptions = this.normalizeOptions(this.rawOptions);
+        }
+        if (changes['valueKey'] ||
+            changes['labelKey'] ||
+            changes['descriptionKey'] ||
+            changes['iconKey'] ||
+            changes['disabledKey'] ||
+            changes['compareWith']) {
+            this.syncSearchWithValue();
+        }
     }
     writeValue(value) {
         this.value.set(value ?? null);
-        this.search =
-            this.options.find((option) => this.compare(option.value, this.value()))?.label ?? '';
+        this.syncSearchWithValue();
         this.cdr.markForCheck();
     }
     registerOnChange(fn) {
@@ -4327,9 +4361,7 @@ class TdAutocompleteSelect {
         if (!this.open)
             return;
         this.open = false;
-        const selected = this.options.find((option) => this.compare(option.value, this.value()));
-        if (selected)
-            this.search = selected.label;
+        this.syncSearchWithValue();
         this.formBridge.markTouched(this.touched, this.touch);
         this.cdr.markForCheck();
     }
@@ -4417,6 +4449,82 @@ class TdAutocompleteSelect {
     firstEnabledIndex() {
         return this.filteredOptions.findIndex((option) => !option.disabled);
     }
+    syncSearchWithValue() {
+        const currentValue = this.value();
+        if (currentValue === null) {
+            if (!this.focused() && !this.open) {
+                this.search = '';
+            }
+            this.cdr.markForCheck();
+            return;
+        }
+        const selected = this.options.find((option) => this.compare(option.value, currentValue));
+        if (selected) {
+            this.search = selected.label;
+        }
+        this.cdr.markForCheck();
+    }
+    normalizeOptions(options) {
+        return options.map((option) => this.normalizeOption(option));
+    }
+    normalizeOption(option) {
+        if (this.isSelectOption(option) && !this.valueKey && !this.labelKey) {
+            return option;
+        }
+        const value = this.valueKey ? this.readOptionValue(option, this.valueKey) : this.readOptionValue(option, 'value');
+        const label = this.labelKey ? this.readOptionText(option, this.labelKey) : this.readOptionText(option, 'label');
+        const description = this.descriptionKey
+            ? this.readOptionText(option, this.descriptionKey)
+            : this.readOptionText(option, 'description');
+        const icon = this.iconKey ? this.readOptionText(option, this.iconKey) : this.readOptionText(option, 'icon');
+        const disabled = this.disabledKey
+            ? !!this.readOptionUnknown(option, this.disabledKey)
+            : !!this.readOptionUnknown(option, 'disabled');
+        return {
+            value,
+            label: label || this.fallbackOptionLabel(option, value),
+            ...(description ? { description } : {}),
+            ...(icon ? { icon } : {}),
+            ...(disabled ? { disabled } : {}),
+        };
+    }
+    isSelectOption(option) {
+        if (!option || typeof option !== 'object')
+            return false;
+        return 'value' in option && 'label' in option;
+    }
+    readOptionValue(option, accessor) {
+        if (typeof accessor === 'function') {
+            return accessor(option);
+        }
+        return this.readPath(option, accessor);
+    }
+    readOptionText(option, accessor) {
+        const value = typeof accessor === 'function' ? accessor(option) : this.readPath(option, accessor);
+        return value === null || value === undefined ? '' : String(value);
+    }
+    readOptionUnknown(option, accessor) {
+        return typeof accessor === 'function' ? accessor(option) : this.readPath(option, accessor);
+    }
+    readPath(source, path) {
+        if (!path.trim())
+            return undefined;
+        return path.split('.').reduce((current, key) => {
+            if (current === null || current === undefined || typeof current !== 'object') {
+                return undefined;
+            }
+            return current[key];
+        }, source);
+    }
+    fallbackOptionLabel(option, value) {
+        if (typeof option === 'string' || typeof option === 'number' || typeof option === 'boolean') {
+            return String(option);
+        }
+        if (value !== null && value !== undefined) {
+            return String(value);
+        }
+        return '';
+    }
     scrollActiveOptionIntoView() {
         const panel = this.panel?.nativeElement;
         if (!panel || this.activeIndex < 0)
@@ -4473,13 +4581,13 @@ class TdAutocompleteSelect {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", isSignal: false, isRequired: false, transformFunction: null }, iconKey: { classPropertyName: "iconKey", publicName: "iconKey", isSignal: false, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdAutocompleteSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div
       cdkOverlayOrigin
       #origin="cdkOverlayOrigin"
@@ -4734,6 +4842,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
                 type: Input
             }], hideLabel: [{
                 type: Input
+            }], valueKey: [{
+                type: Input
+            }], labelKey: [{
+                type: Input
+            }], descriptionKey: [{
+                type: Input
+            }], iconKey: [{
+                type: Input
+            }], disabledKey: [{
+                type: Input
             }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], emptyText: [{
                 type: Input
             }], clearable: [{