@telcomdev/ui 0.0.3 → 0.0.5

package/fesm2022/telcomdev-ui.mjs

@@ -1,10 +1,12 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener, signal } from '@angular/core';
+import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, InjectionToken, HostListener, Directive, ChangeDetectorRef, forwardRef, DestroyRef, signal } from '@angular/core';
 import * as i2 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import { NgTemplateOutlet } from '@angular/common';
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
+import { NgComponentOutlet, DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { ScrollStrategyOptions, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 class TelcomdevUi {
@@ -429,6 +431,12 @@ const TD_ICONOS = {
     search: {
         path: 'M10.5 3a7.5 7.5 0 1 0 4.73 13.32L20.91 22 22 20.91l-5.68-5.68A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z',
     },
+    visibility: {
+        path: 'M12 4.5C6.5 4.5 2.1 8 1 12c1.1 4 5.5 7.5 11 7.5S21.9 16 23 12c-1.1-4-5.5-7.5-11-7.5Zm0 12a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z',
+    },
+    visibility_off: {
+        path: 'm3.3 2 18.7 18.7-1.3 1.3-3.15-3.15A12.2 12.2 0 0 1 12 20C6.5 20 2.1 16.5 1 12a11.6 11.6 0 0 1 3.4-5.2L2 4.3 3.3 2Zm4.42 7.02A4.5 4.5 0 0 0 14.98 16l-1.55-1.55a2.5 2.5 0 0 1-3.88-3.88L7.72 9.02ZM12 4c5.5 0 9.9 3.5 11 8a11.2 11.2 0 0 1-2.53 4.35l-3.3-3.3A5.5 5.5 0 0 0 10.95 6.83L8.58 4.46A13.4 13.4 0 0 1 12 4Z',
+    },
     notifications: {
         path: 'M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm7-6v-5a7 7 0 0 0-5.5-6.84V3a1.5 1.5 0 0 0-3 0v1.16A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2Z',
     },
@@ -556,18 +564,16 @@ class TdDataTable {
     cargando = false;
     puedeCargarMas = false;
     itemSize = 65;
+    filasAntesDeCargar = 2;
     altura = 'min(620px, calc(100dvh - 18rem))';
     campoId = 'id';
     oscuro = false;
     mostrarBusqueda = true;
-    mostrarAgregar = true;
     placeholderBusqueda = 'Buscar...';
-    textoAgregar = 'Agregar';
     textoVacio = 'No hay registros disponibles';
-    descripcionVacio = 'Comienza creando un nuevo registro.';
+    descripcionVacio = 'Prueba cambiando los filtros o vuelve más tarde.';
     debounceBusqueda = 250;
     busquedaChange = new EventEmitter();
-    agregar = new EventEmitter();
     accion = new EventEmitter();
     botonClick = new EventEmitter();
     cargarMas = new EventEmitter();
@@ -628,6 +634,14 @@ class TdDataTable {
     accionesVisibles(fila) {
         return this.acciones.filter((accion) => accion.visible?.(fila) ?? true);
     }
+    iconoAccion(accion, fila) {
+        return typeof accion.icono === 'function' ? accion.icono(fila) : accion.icono;
+    }
+    tonoAccion(accion, fila) {
+        if (typeof accion.tono === 'function')
+            return accion.tono(fila);
+        return accion.tono ?? 'neutro';
+    }
     botonesVisibles() {
         return this.botones.filter((boton) => boton.visible ?? true);
     }
@@ -640,7 +654,7 @@ class TdDataTable {
         if (!this.viewport)
             return;
         const distanciaAlFinal = this.viewport.measureScrollOffset('bottom');
-        const umbralPx = this.itemSize * 2;
+        const umbralPx = this.itemSize * Math.max(0, this.filasAntesDeCargar);
         if (distanciaAlFinal <= umbralPx &&
             this.datos.length > 0 &&
             this.puedeCargarMas &&
@@ -652,11 +666,11 @@ class TdDataTable {
     }
     trackFila = (_indice, fila) => fila[this.campoId] ?? fila;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", itemSize: "itemSize", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", mostrarAgregar: "mostrarAgregar", placeholderBusqueda: "placeholderBusqueda", textoAgregar: "textoAgregar", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", agregar: "agregar", accion: "accion", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        @if (cargando) {\n          <span class=\"td-tabla__cargando-inline\"><i></i> Cargando...</span>\n        }\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n        @if (mostrarAgregar) {\n          <button class=\"td-tabla__agregar\" type=\"button\" (click)=\"agregar.emit()\">\n            <td-icon nombre=\"add\" />\n            <span>{{ textoAgregar }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                <button\n                  type=\"button\"\n                  [class]=\"'td-tabla__accion td-tabla__accion--' + (accionFila.tono || 'neutro')\"\n                  [title]=\"accionFila.etiqueta\"\n                  [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                  (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                >\n                  <td-icon [nombre]=\"accionFila.icono\" />\n                  <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__agregar,.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:#5746d8}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando-inline{display:flex;align-items:center;gap:.4rem}.td-tabla__cargando-inline i{width:.65rem;height:.65rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        @if (cargando) {\n          <span class=\"td-tabla__cargando-inline\"><i></i> Cargando...</span>\n        }\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                  <button\n                    type=\"button\"\n                    [class]=\"'td-tabla__accion td-tabla__accion--' + 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            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando-inline{display:flex;align-items:center;gap:.4rem}.td-tabla__cargando-inline i{width:.65rem;height:.65rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, decorators: [{
             type: Component,
-            args: [{ selector: 'td-data-table', imports: [FormsModule, ScrollingModule, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        @if (cargando) {\n          <span class=\"td-tabla__cargando-inline\"><i></i> Cargando...</span>\n        }\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n        @if (mostrarAgregar) {\n          <button class=\"td-tabla__agregar\" type=\"button\" (click)=\"agregar.emit()\">\n            <td-icon nombre=\"add\" />\n            <span>{{ textoAgregar }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                <button\n                  type=\"button\"\n                  [class]=\"'td-tabla__accion td-tabla__accion--' + (accionFila.tono || 'neutro')\"\n                  [title]=\"accionFila.etiqueta\"\n                  [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                  (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                >\n                  <td-icon [nombre]=\"accionFila.icono\" />\n                  <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__agregar,.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:#5746d8}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando-inline{display:flex;align-items:center;gap:.4rem}.td-tabla__cargando-inline i{width:.65rem;height:.65rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"] }]
+            args: [{ selector: 'td-data-table', imports: [FormsModule, ScrollingModule, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        @if (cargando) {\n          <span class=\"td-tabla__cargando-inline\"><i></i> Cargando...</span>\n        }\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                  <button\n                    type=\"button\"\n                    [class]=\"'td-tabla__accion td-tabla__accion--' + 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            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando-inline{display:flex;align-items:center;gap:.4rem}.td-tabla__cargando-inline i{width:.65rem;height:.65rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"] }]
         }], propDecorators: { viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -676,6 +690,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], itemSize: [{
                 type: Input
+            }], filasAntesDeCargar: [{
+                type: Input
             }], altura: [{
                 type: Input
             }], campoId: [{
@@ -684,12 +700,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], mostrarBusqueda: [{
                 type: Input
-            }], mostrarAgregar: [{
-                type: Input
             }], placeholderBusqueda: [{
                 type: Input
-            }], textoAgregar: [{
-                type: Input
             }], textoVacio: [{
                 type: Input
             }], descripcionVacio: [{
@@ -698,8 +710,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], busquedaChange: [{
                 type: Output
-            }], agregar: [{
-                type: Output
             }], accion: [{
                 type: Output
             }], botonClick: [{
@@ -708,6 +718,240 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Output
             }] } });
 
+const TD_DIALOG_DATA = new InjectionToken('TD_DIALOG_DATA');
+const TD_DIALOG_CONFIG = new InjectionToken('TD_DIALOG_CONFIG');
+
+class TdDialogRef {
+    ref;
+    closed;
+    id;
+    constructor(ref) {
+        this.ref = ref;
+        this.closed = ref.closed;
+        this.id = ref.id;
+    }
+    close(result) {
+        this.ref.close(result);
+    }
+    updateSize(width, height) {
+        this.ref.updateSize(width, height);
+        return this;
+    }
+}
+
+class TdDialogPanel {
+    payload = inject(DIALOG_DATA);
+    dialogRef = inject(TdDialogRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDialogPanel, isStandalone: true, selector: "td-dialog-panel", ngImport: i0, template: `
+    <section
+      class="td-dialog"
+      [class.td-dialog--oscuro]="payload.config.oscuro"
+      [class.td-dialog--pantalla]="payload.fullscreen"
+      [attr.aria-label]="payload.config.ariaLabel || payload.config.titulo || 'Diálogo'"
+    >
+      @if (
+        payload.config.titulo ||
+        payload.config.subtitulo ||
+        payload.config.icono ||
+        payload.config.mostrarCerrar !== false
+      ) {
+        <header class="td-dialog__header">
+          @if (payload.config.icono) {
+            <span class="td-dialog__icono">
+              <td-icon [nombre]="payload.config.icono" tamano="1.25rem" />
+            </span>
+          }
+          <div class="td-dialog__titulos">
+            @if (payload.config.titulo) {
+              <h2>{{ payload.config.titulo }}</h2>
+            }
+            @if (payload.config.subtitulo) {
+              <p>{{ payload.config.subtitulo }}</p>
+            }
+          </div>
+          @if (payload.config.mostrarCerrar !== false) {
+            <button
+              type="button"
+              class="td-dialog__cerrar"
+              aria-label="Cerrar diálogo"
+              title="Cerrar"
+              (click)="dialogRef.close()"
+            >
+              <td-icon nombre="close" />
+            </button>
+          }
+        </header>
+      }
+
+      <div class="td-dialog__contenido">
+        <ng-container *ngComponentOutlet="payload.component" />
+      </div>
+    </section>
+  `, isInline: true, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px #0f172a3d,0 8px 24px #0f172a1f;animation:td-dialog-enter .18s cubic-bezier(.2,.8,.2,1)}:host-context(.td-dialog-overlay--fullscreen){height:100%;max-height:100%;border-radius:0}*{box-sizing:border-box}.td-dialog{--td-dialog-surface: #fff;--td-dialog-footer: #fafbfc;--td-dialog-border: #e6e9f0;--td-dialog-text: #263147;--td-dialog-muted: #748096;display:flex;width:100%;max-height:inherit;flex-direction:column;overflow:hidden;color:var(--td-dialog-text);background:var(--td-dialog-surface);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-dialog--oscuro{--td-dialog-surface: #19191f;--td-dialog-footer: #202028;--td-dialog-border: #303039;--td-dialog-text: #ededf0;--td-dialog-muted: #a1a1aa}.td-dialog__header{display:flex;min-height:4.4rem;flex:0 0 auto;align-items:center;gap:.85rem;border-bottom:1px solid var(--td-dialog-border);padding:1rem 1.25rem 1rem 1.5rem;background:var(--td-dialog-surface)}.td-dialog__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:.75rem;color:#5746d8;background:#eeecff}.td-dialog--oscuro .td-dialog__icono{color:#b9b0fa;background:#292540}.td-dialog__titulos{min-width:0;flex:1}.td-dialog__titulos h2{margin:0;font-size:1rem;line-height:1.3;letter-spacing:-.015em}.td-dialog__titulos p{margin:.2rem 0 0;color:var(--td-dialog-muted);font-size:.73rem;line-height:1.45}.td-dialog__cerrar{display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border:0;border-radius:.65rem;color:var(--td-dialog-muted);background:transparent;cursor:pointer}.td-dialog__cerrar:hover{color:#5746d8;background:#f2f0ff}.td-dialog--oscuro .td-dialog__cerrar:hover{color:#b9b0fa;background:#292931}.td-dialog__contenido{display:flex;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:1.5rem;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent) transparent;scrollbar-width:thin}.td-dialog__contenido ::ng-deep>*{display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido ::ng-deep :has(>td-dialog-actions){display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido::-webkit-scrollbar{width:.42rem}.td-dialog__contenido::-webkit-scrollbar-track{background:transparent}.td-dialog__contenido::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent)}.td-dialog__contenido::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--td-dialog-muted) 58%,transparent)}.td-dialog--pantalla{height:100%}@keyframes td-dialog-enter{0%{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}}@media(max-width:600px){:host{border-radius:1rem}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPanel, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-dialog-panel', imports: [NgComponentOutlet, TdIcon], template: `
+    <section
+      class="td-dialog"
+      [class.td-dialog--oscuro]="payload.config.oscuro"
+      [class.td-dialog--pantalla]="payload.fullscreen"
+      [attr.aria-label]="payload.config.ariaLabel || payload.config.titulo || 'Diálogo'"
+    >
+      @if (
+        payload.config.titulo ||
+        payload.config.subtitulo ||
+        payload.config.icono ||
+        payload.config.mostrarCerrar !== false
+      ) {
+        <header class="td-dialog__header">
+          @if (payload.config.icono) {
+            <span class="td-dialog__icono">
+              <td-icon [nombre]="payload.config.icono" tamano="1.25rem" />
+            </span>
+          }
+          <div class="td-dialog__titulos">
+            @if (payload.config.titulo) {
+              <h2>{{ payload.config.titulo }}</h2>
+            }
+            @if (payload.config.subtitulo) {
+              <p>{{ payload.config.subtitulo }}</p>
+            }
+          </div>
+          @if (payload.config.mostrarCerrar !== false) {
+            <button
+              type="button"
+              class="td-dialog__cerrar"
+              aria-label="Cerrar diálogo"
+              title="Cerrar"
+              (click)="dialogRef.close()"
+            >
+              <td-icon nombre="close" />
+            </button>
+          }
+        </header>
+      }
+
+      <div class="td-dialog__contenido">
+        <ng-container *ngComponentOutlet="payload.component" />
+      </div>
+    </section>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px #0f172a3d,0 8px 24px #0f172a1f;animation:td-dialog-enter .18s cubic-bezier(.2,.8,.2,1)}:host-context(.td-dialog-overlay--fullscreen){height:100%;max-height:100%;border-radius:0}*{box-sizing:border-box}.td-dialog{--td-dialog-surface: #fff;--td-dialog-footer: #fafbfc;--td-dialog-border: #e6e9f0;--td-dialog-text: #263147;--td-dialog-muted: #748096;display:flex;width:100%;max-height:inherit;flex-direction:column;overflow:hidden;color:var(--td-dialog-text);background:var(--td-dialog-surface);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-dialog--oscuro{--td-dialog-surface: #19191f;--td-dialog-footer: #202028;--td-dialog-border: #303039;--td-dialog-text: #ededf0;--td-dialog-muted: #a1a1aa}.td-dialog__header{display:flex;min-height:4.4rem;flex:0 0 auto;align-items:center;gap:.85rem;border-bottom:1px solid var(--td-dialog-border);padding:1rem 1.25rem 1rem 1.5rem;background:var(--td-dialog-surface)}.td-dialog__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:.75rem;color:#5746d8;background:#eeecff}.td-dialog--oscuro .td-dialog__icono{color:#b9b0fa;background:#292540}.td-dialog__titulos{min-width:0;flex:1}.td-dialog__titulos h2{margin:0;font-size:1rem;line-height:1.3;letter-spacing:-.015em}.td-dialog__titulos p{margin:.2rem 0 0;color:var(--td-dialog-muted);font-size:.73rem;line-height:1.45}.td-dialog__cerrar{display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border:0;border-radius:.65rem;color:var(--td-dialog-muted);background:transparent;cursor:pointer}.td-dialog__cerrar:hover{color:#5746d8;background:#f2f0ff}.td-dialog--oscuro .td-dialog__cerrar:hover{color:#b9b0fa;background:#292931}.td-dialog__contenido{display:flex;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:1.5rem;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent) transparent;scrollbar-width:thin}.td-dialog__contenido ::ng-deep>*{display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido ::ng-deep :has(>td-dialog-actions){display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido::-webkit-scrollbar{width:.42rem}.td-dialog__contenido::-webkit-scrollbar-track{background:transparent}.td-dialog__contenido::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent)}.td-dialog__contenido::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--td-dialog-muted) 58%,transparent)}.td-dialog--pantalla{height:100%}@keyframes td-dialog-enter{0%{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}}@media(max-width:600px){:host{border-radius:1rem}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"] }]
+        }] });
+
+class TdDialog {
+    dialog = inject(Dialog);
+    open(component, config = {}) {
+        const size = config.tamano ?? 'mediano';
+        const mobile = typeof window !== 'undefined' &&
+            typeof window.matchMedia === 'function' &&
+            window.matchMedia('(max-width: 600px)').matches;
+        const fullscreen = size === 'pantalla' || (mobile && size !== 'pequeno');
+        const width = fullscreen ? '100%' : config.ancho ?? this.widthFor(size);
+        const maxWidth = fullscreen ? '100%' : config.maxAncho ?? 'calc(100vw - 2rem)';
+        const maxHeight = fullscreen ? '100dvh' : config.maxAlto ?? 'calc(100dvh - 2rem)';
+        let publicRef;
+        const cdkRef = this.dialog.open(TdDialogPanel, {
+            data: { component, config, fullscreen },
+            width,
+            height: fullscreen ? '100dvh' : config.alto,
+            maxWidth,
+            maxHeight,
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-dark-backdrop',
+            panelClass: this.panelClasses(config, fullscreen),
+            disableClose: config.deshabilitarCierre ?? false,
+            closeOnNavigation: config.cerrarAlNavegar ?? true,
+            autoFocus: config.autoFocus ?? 'first-tabbable',
+            restoreFocus: config.restaurarFoco ?? true,
+            ariaLabel: config.ariaLabel ?? config.titulo,
+            ariaModal: true,
+            providers: (ref) => {
+                publicRef = new TdDialogRef(ref);
+                return [
+                    { provide: TD_DIALOG_DATA, useValue: config.data },
+                    { provide: TD_DIALOG_CONFIG, useValue: config },
+                    { provide: TdDialogRef, useValue: publicRef },
+                ];
+            },
+        });
+        return publicRef ?? new TdDialogRef(cdkRef);
+    }
+    closeAll() {
+        this.dialog.closeAll();
+    }
+    widthFor(size) {
+        const widths = {
+            pequeno: 'min(28rem, calc(100vw - 2rem))',
+            mediano: 'min(40rem, calc(100vw - 2rem))',
+            grande: 'min(64rem, calc(100vw - 2rem))',
+            pantalla: '100%',
+        };
+        return widths[size ?? 'mediano'];
+    }
+    panelClasses(config, fullscreen) {
+        const extra = Array.isArray(config.panelClass)
+            ? config.panelClass
+            : config.panelClass
+                ? [config.panelClass]
+                : [];
+        return [
+            'td-dialog-overlay',
+            `td-dialog-overlay--${config.tamano ?? 'mediano'}`,
+            ...(fullscreen ? ['td-dialog-overlay--fullscreen'] : []),
+            ...extra,
+        ];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialog, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialog, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+class TdDialogActions {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TdDialogActions, isStandalone: true, selector: "td-dialog-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{min-height:auto;align-items:stretch;flex-direction:column-reverse;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.7rem 1.1rem}:host ::ng-deep button{width:100%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogActions, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-dialog-actions', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{min-height:auto;align-items:stretch;flex-direction:column-reverse;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.7rem 1.1rem}:host ::ng-deep button{width:100%}}\n"] }]
+        }] });
+
+class TdDialogClose {
+    dialogRef = inject(TdDialogRef);
+    result;
+    close() {
+        this.dialogRef.close(this.result);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TdDialogClose, isStandalone: true, selector: "[tdDialogClose]", inputs: { result: ["tdDialogClose", "result"] }, host: { listeners: { "click": "close()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogClose, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdDialogClose]',
+                }]
+        }], propDecorators: { result: [{
+                type: Input,
+                args: ['tdDialogClose']
+            }], close: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+class TdDialogPrimary {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TdDialogPrimary, isStandalone: true, selector: "[tdDialogPrimary]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPrimary, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[tdDialogPrimary]',
+                }]
+        }] });
+
 class TdFooter {
     empresa = 'TelcomDev';
     texto = 'Todos los derechos reservados.';
@@ -818,6 +1062,1067 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 args: ['document:keydown.escape']
             }] } });
 
+let inputSequence = 0;
+class TdInput {
+    cdr = inject(ChangeDetectorRef);
+    generatedId = `td-input-${++inputSequence}`;
+    id = '';
+    name = '';
+    label = 'Campo';
+    type = 'text';
+    placeholder = '';
+    autocomplete = 'off';
+    icon = '';
+    hint = '';
+    error = '';
+    readonly = false;
+    disabled = false;
+    required = false;
+    clearable = false;
+    dark = false;
+    min = null;
+    max = null;
+    step = null;
+    minlength = null;
+    maxlength = null;
+    valueChange = new EventEmitter();
+    value = '';
+    focused = false;
+    passwordVisible = false;
+    get inputId() {
+        return this.id || this.generatedId;
+    }
+    get descriptionId() {
+        return this.error || this.hint ? `${this.inputId}-description` : null;
+    }
+    get resolvedType() {
+        return this.type === 'password' && this.passwordVisible ? 'text' : this.type;
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    writeValue(value) {
+        this.value = value === null || value === undefined ? '' : String(value);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+        this.cdr.markForCheck();
+    }
+    handleInput(event) {
+        this.setValue(event.target.value);
+    }
+    handleBlur() {
+        this.focused = false;
+        this.onTouched();
+    }
+    clear() {
+        this.setValue('');
+    }
+    setValue(value) {
+        this.value = value;
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: "id", name: "name", label: "label", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", icon: "icon", hint: "hint", error: "error", readonly: "readonly", disabled: "disabled", required: "required", clearable: "clearable", dark: "dark", min: "min", max: "max", step: "step", minlength: "minlength", maxlength: "maxlength", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TdInput),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div
+      class="td-input"
+      [class.td-input--focused]="focused"
+      [class.td-input--error]="!!error"
+      [class.td-input--disabled]="disabled"
+      [class.td-input--dark]="dark"
+    >
+      <label [for]="inputId">{{ label }}</label>
+
+      <div class="td-input__control">
+        @if (icon) {
+          <td-icon class="td-input__icon" [nombre]="icon" />
+        }
+
+        <input
+          [id]="inputId"
+          [name]="name"
+          [type]="resolvedType"
+          [value]="value"
+          [placeholder]="placeholder"
+          [autocomplete]="autocomplete"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          [required]="required"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [attr.minlength]="minlength"
+          [attr.maxlength]="maxlength"
+          [attr.aria-describedby]="descriptionId"
+          [attr.aria-invalid]="!!error"
+          (input)="handleInput($event)"
+          (focus)="focused = true"
+          (blur)="handleBlur()"
+        />
+
+        @if (clearable && value && !disabled && !readonly) {
+          <button type="button" class="td-input__action" title="Limpiar" (click)="clear()">
+            <td-icon nombre="close" tamano=".95rem" />
+          </button>
+        }
+
+        @if (type === 'password') {
+          <button
+            type="button"
+            class="td-input__action"
+            [title]="passwordVisible ? 'Ocultar contraseña' : 'Mostrar contraseña'"
+            (click)="passwordVisible = !passwordVisible"
+          >
+            <td-icon [nombre]="passwordVisible ? 'visibility_off' : 'visibility'" />
+          </button>
+        }
+      </div>
+    </div>
+
+    @if (error || hint) {
+      <p
+        class="td-input__message"
+        [class.td-input__message--error]="!!error"
+        [id]="descriptionId"
+      >
+        {{ error || hint }}
+      </p>
+    }
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-input', imports: [TdIcon], template: `
+    <div
+      class="td-input"
+      [class.td-input--focused]="focused"
+      [class.td-input--error]="!!error"
+      [class.td-input--disabled]="disabled"
+      [class.td-input--dark]="dark"
+    >
+      <label [for]="inputId">{{ label }}</label>
+
+      <div class="td-input__control">
+        @if (icon) {
+          <td-icon class="td-input__icon" [nombre]="icon" />
+        }
+
+        <input
+          [id]="inputId"
+          [name]="name"
+          [type]="resolvedType"
+          [value]="value"
+          [placeholder]="placeholder"
+          [autocomplete]="autocomplete"
+          [disabled]="disabled"
+          [readonly]="readonly"
+          [required]="required"
+          [min]="min"
+          [max]="max"
+          [step]="step"
+          [attr.minlength]="minlength"
+          [attr.maxlength]="maxlength"
+          [attr.aria-describedby]="descriptionId"
+          [attr.aria-invalid]="!!error"
+          (input)="handleInput($event)"
+          (focus)="focused = true"
+          (blur)="handleBlur()"
+        />
+
+        @if (clearable && value && !disabled && !readonly) {
+          <button type="button" class="td-input__action" title="Limpiar" (click)="clear()">
+            <td-icon nombre="close" tamano=".95rem" />
+          </button>
+        }
+
+        @if (type === 'password') {
+          <button
+            type="button"
+            class="td-input__action"
+            [title]="passwordVisible ? 'Ocultar contraseña' : 'Mostrar contraseña'"
+            (click)="passwordVisible = !passwordVisible"
+          >
+            <td-icon [nombre]="passwordVisible ? 'visibility_off' : 'visibility'" />
+          </button>
+        }
+      </div>
+    </div>
+
+    @if (error || hint) {
+      <p
+        class="td-input__message"
+        [class.td-input__message--error]="!!error"
+        [id]="descriptionId"
+      >
+        {{ error || hint }}
+      </p>
+    }
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TdInput),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], required: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }], min: [{
+                type: Input
+            }], max: [{
+                type: Input
+            }], step: [{
+                type: Input
+            }], minlength: [{
+                type: Input
+            }], maxlength: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], value: [{
+                type: Input
+            }] } });
+
+let autocompleteSequence = 0;
+class TdAutocompleteSelect {
+    cdr = inject(ChangeDetectorRef);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    generatedId = `td-autocomplete-${++autocompleteSequence}`;
+    searchInput;
+    connectedOverlay;
+    label = 'Buscar y seleccionar';
+    placeholder = 'Escribe para buscar...';
+    options = [];
+    hint = '';
+    error = '';
+    emptyText = 'No se encontraron resultados';
+    clearable = true;
+    dark = false;
+    disabled = false;
+    scrollBehavior = 'reposition';
+    minimumCharacters = 0;
+    filterWith = (option, search) => `${option.label} ${option.description ?? ''}`.toLocaleLowerCase().includes(search);
+    compareWith = (first, second) => Object.is(first, second);
+    selectionChange = new EventEmitter();
+    searchChange = new EventEmitter();
+    value = null;
+    search = '';
+    open = false;
+    activeIndex = -1;
+    scrollStrategy = this.scrollStrategies.reposition();
+    get inputId() {
+        return `${this.generatedId}-input`;
+    }
+    get listId() {
+        return `${this.generatedId}-list`;
+    }
+    get filteredOptions() {
+        const normalized = this.search.trim().toLocaleLowerCase();
+        if (normalized.length < this.minimumCharacters)
+            return [];
+        return this.options.filter((option) => this.filterWith(option, normalized));
+    }
+    onTouched = () => {
+        this.touched();
+    };
+    changed = () => undefined;
+    touched = () => undefined;
+    constructor() {
+        const scrollListener = (event) => {
+            const target = event.target;
+            if (target instanceof Element && target.closest('.td-select-panel'))
+                return;
+            if (this.open) {
+                if (this.scrollBehavior === 'close') {
+                    this.close();
+                }
+                else {
+                    this.connectedOverlay?.overlayRef.updatePosition();
+                }
+                this.cdr.markForCheck();
+            }
+        };
+        this.document.addEventListener('scroll', scrollListener, true);
+        this.destroyRef.onDestroy(() => this.document.removeEventListener('scroll', scrollListener, true));
+    }
+    writeValue(value) {
+        this.value = value ?? null;
+        this.search = this.options.find((option) => this.compare(option.value, this.value))?.label ?? '';
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.changed = fn;
+    }
+    registerOnTouched(fn) {
+        this.touched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+        this.cdr.markForCheck();
+    }
+    compare(first, second) {
+        return this.compareWith(first, second);
+    }
+    openPanel() {
+        if (this.disabled)
+            return;
+        this.open = true;
+        this.activeIndex = this.firstEnabledIndex();
+    }
+    close() {
+        this.open = false;
+        const selected = this.options.find((option) => this.compare(option.value, this.value));
+        if (selected)
+            this.search = selected.label;
+        this.touched();
+    }
+    handleInput(event) {
+        this.search = event.target.value;
+        this.value = null;
+        this.changed(null);
+        this.searchChange.emit(this.search);
+        this.openPanel();
+        this.activeIndex = this.firstEnabledIndex();
+    }
+    select(option) {
+        if (option.disabled)
+            return;
+        this.value = option.value;
+        this.search = option.label;
+        this.changed(option.value);
+        this.selectionChange.emit(option.value);
+        this.close();
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.value = null;
+        this.search = '';
+        this.changed(null);
+        this.selectionChange.emit(null);
+        this.searchChange.emit('');
+        this.openPanel();
+        queueMicrotask(() => this.searchInput?.nativeElement.focus());
+    }
+    handleKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+        else if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.openPanel();
+            this.moveActive(1);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.openPanel();
+            this.moveActive(-1);
+        }
+        else if (event.key === 'Enter' && this.open && this.activeIndex >= 0) {
+            event.preventDefault();
+            const option = this.filteredOptions[this.activeIndex];
+            if (option)
+                this.select(option);
+        }
+    }
+    moveActive(direction) {
+        const options = this.filteredOptions;
+        if (!options.length)
+            return;
+        let next = this.activeIndex;
+        for (let index = 0; index < options.length; index++) {
+            next = (next + direction + options.length) % options.length;
+            if (!options[next]?.disabled) {
+                this.activeIndex = next;
+                return;
+            }
+        }
+    }
+    firstEnabledIndex() {
+        return this.filteredOptions.findIndex((option) => !option.disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: "label", placeholder: "placeholder", options: "options", hint: "hint", error: "error", emptyText: "emptyText", clearable: "clearable", dark: "dark", disabled: "disabled", scrollBehavior: "scrollBehavior", minimumCharacters: "minimumCharacters", filterWith: "filterWith", compareWith: "compareWith" }, outputs: { selectionChange: "selectionChange", searchChange: "searchChange" }, 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 }], ngImport: i0, template: `
+    <div
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      class="td-select td-select--autocomplete"
+      [class.td-select--open]="open"
+      [class.td-select--error]="!!error"
+      [class.td-select--disabled]="disabled"
+      [class.td-select--dark]="dark"
+    >
+      <label [for]="inputId">{{ label }}</label>
+      <div class="td-select__trigger">
+        <td-icon class="td-select__leading" nombre="search" />
+        <input
+          #searchInput
+          [id]="inputId"
+          type="search"
+          autocomplete="off"
+          role="combobox"
+          [value]="search"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [attr.aria-expanded]="open"
+          [attr.aria-controls]="listId"
+          (focus)="openPanel()"
+          (input)="handleInput($event)"
+          (keydown)="handleKeydown($event)"
+          (blur)="onTouched()"
+        />
+        @if (clearable && (value !== null || search) && !disabled) {
+          <button type="button" class="td-select__clear" title="Limpiar" (click)="clear($event)">
+            <td-icon nombre="close" tamano=".95rem" />
+          </button>
+        }
+        <td-icon
+          class="td-select__chevron"
+          [class.td-select__chevron--open]="open"
+          nombre="chevron_down"
+        />
+      </div>
+    </div>
+
+    @if (error || hint) {
+      <p class="td-select__message" [class.td-select__message--error]="!!error">
+        {{ error || hint }}
+      </p>
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      #connectedOverlay="cdkConnectedOverlay"
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open"
+      [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+      [cdkConnectedOverlayMatchWidth]="true"
+      [cdkConnectedOverlayViewportMargin]="8"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="close()"
+      (overlayKeydown)="handleKeydown($event)"
+      (detach)="close()"
+    >
+      <div
+        class="td-select-panel"
+        [class.td-select-panel--dark]="dark"
+        [id]="listId"
+        role="listbox"
+      >
+        @if (!filteredOptions.length) {
+          <p class="td-select-panel__empty">{{ emptyText }}</p>
+        }
+        @for (option of filteredOptions; track option.value; let index = $index) {
+          <button
+            type="button"
+            role="option"
+            [class.td-select-panel__option--active]="index === activeIndex"
+            [class.td-select-panel__option--selected]="compare(option.value, value)"
+            [disabled]="option.disabled"
+            (mousedown)="$event.preventDefault()"
+            (mouseenter)="activeIndex = index"
+            (click)="select(option)"
+          >
+            @if (option.icon) {
+              <td-icon [nombre]="option.icon" />
+            }
+            <span>
+              <strong>{{ option.label }}</strong>
+              @if (option.description) {
+                <small>{{ option.description }}</small>
+              }
+            </span>
+            @if (compare(option.value, value)) {
+              <td-icon class="td-select-panel__check" nombre="check" />
+            }
+          </button>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-autocomplete-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], template: `
+    <div
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      class="td-select td-select--autocomplete"
+      [class.td-select--open]="open"
+      [class.td-select--error]="!!error"
+      [class.td-select--disabled]="disabled"
+      [class.td-select--dark]="dark"
+    >
+      <label [for]="inputId">{{ label }}</label>
+      <div class="td-select__trigger">
+        <td-icon class="td-select__leading" nombre="search" />
+        <input
+          #searchInput
+          [id]="inputId"
+          type="search"
+          autocomplete="off"
+          role="combobox"
+          [value]="search"
+          [placeholder]="placeholder"
+          [disabled]="disabled"
+          [attr.aria-expanded]="open"
+          [attr.aria-controls]="listId"
+          (focus)="openPanel()"
+          (input)="handleInput($event)"
+          (keydown)="handleKeydown($event)"
+          (blur)="onTouched()"
+        />
+        @if (clearable && (value !== null || search) && !disabled) {
+          <button type="button" class="td-select__clear" title="Limpiar" (click)="clear($event)">
+            <td-icon nombre="close" tamano=".95rem" />
+          </button>
+        }
+        <td-icon
+          class="td-select__chevron"
+          [class.td-select__chevron--open]="open"
+          nombre="chevron_down"
+        />
+      </div>
+    </div>
+
+    @if (error || hint) {
+      <p class="td-select__message" [class.td-select__message--error]="!!error">
+        {{ error || hint }}
+      </p>
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      #connectedOverlay="cdkConnectedOverlay"
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open"
+      [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+      [cdkConnectedOverlayMatchWidth]="true"
+      [cdkConnectedOverlayViewportMargin]="8"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="close()"
+      (overlayKeydown)="handleKeydown($event)"
+      (detach)="close()"
+    >
+      <div
+        class="td-select-panel"
+        [class.td-select-panel--dark]="dark"
+        [id]="listId"
+        role="listbox"
+      >
+        @if (!filteredOptions.length) {
+          <p class="td-select-panel__empty">{{ emptyText }}</p>
+        }
+        @for (option of filteredOptions; track option.value; let index = $index) {
+          <button
+            type="button"
+            role="option"
+            [class.td-select-panel__option--active]="index === activeIndex"
+            [class.td-select-panel__option--selected]="compare(option.value, value)"
+            [disabled]="option.disabled"
+            (mousedown)="$event.preventDefault()"
+            (mouseenter)="activeIndex = index"
+            (click)="select(option)"
+          >
+            @if (option.icon) {
+              <td-icon [nombre]="option.icon" />
+            }
+            <span>
+              <strong>{{ option.label }}</strong>
+              @if (option.description) {
+                <small>{{ option.description }}</small>
+              }
+            </span>
+            @if (compare(option.value, value)) {
+              <td-icon class="td-select-panel__check" nombre="check" />
+            }
+          </button>
+        }
+      </div>
+    </ng-template>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TdAutocompleteSelect),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { searchInput: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }], connectedOverlay: [{
+                type: ViewChild,
+                args: [CdkConnectedOverlay]
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], emptyText: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], scrollBehavior: [{
+                type: Input
+            }], minimumCharacters: [{
+                type: Input
+            }], filterWith: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], searchChange: [{
+                type: Output
+            }] } });
+
+let selectSequence = 0;
+class TdSelect {
+    cdr = inject(ChangeDetectorRef);
+    document = inject(DOCUMENT);
+    destroyRef = inject(DestroyRef);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    generatedId = `td-select-${++selectSequence}`;
+    connectedOverlay;
+    label = 'Seleccionar';
+    placeholder = 'Selecciona una opción';
+    options = [];
+    hint = '';
+    error = '';
+    emptyText = 'No hay opciones disponibles';
+    clearable = false;
+    dark = false;
+    disabled = false;
+    scrollBehavior = 'reposition';
+    compareWith = (first, second) => Object.is(first, second);
+    selectionChange = new EventEmitter();
+    value = null;
+    open = false;
+    activeIndex = -1;
+    scrollStrategy = this.scrollStrategies.reposition();
+    get labelId() {
+        return `${this.generatedId}-label`;
+    }
+    get listId() {
+        return `${this.generatedId}-list`;
+    }
+    get selectedOption() {
+        return this.options.find((option) => this.compare(option.value, this.value));
+    }
+    onChange = () => undefined;
+    onTouched = () => undefined;
+    constructor() {
+        const scrollListener = (event) => {
+            const target = event.target;
+            if (target instanceof Element && target.closest('.td-select-panel'))
+                return;
+            if (this.open) {
+                if (this.scrollBehavior === 'close') {
+                    this.close();
+                }
+                else {
+                    this.connectedOverlay?.overlayRef.updatePosition();
+                }
+                this.cdr.markForCheck();
+            }
+        };
+        this.document.addEventListener('scroll', scrollListener, true);
+        this.destroyRef.onDestroy(() => this.document.removeEventListener('scroll', scrollListener, true));
+    }
+    writeValue(value) {
+        this.value = value ?? null;
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.disabled = disabled;
+        this.cdr.markForCheck();
+    }
+    compare(first, second) {
+        return this.compareWith(first, second);
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.open ? this.close() : this.openPanel();
+    }
+    close() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.onTouched();
+    }
+    select(option) {
+        if (option.disabled)
+            return;
+        this.setValue(option.value);
+        this.close();
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.setValue(null);
+    }
+    handleKeydown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.openPanel();
+        }
+    }
+    handleOverlayKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+            return;
+        }
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.moveActive(1);
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.moveActive(-1);
+        }
+        else if (event.key === 'Enter' && this.activeIndex >= 0) {
+            event.preventDefault();
+            const option = this.options[this.activeIndex];
+            if (option)
+                this.select(option);
+        }
+    }
+    openPanel() {
+        this.open = true;
+        const selectedIndex = this.options.findIndex((option) => this.compare(option.value, this.value));
+        this.activeIndex = selectedIndex >= 0 ? selectedIndex : this.firstEnabledIndex();
+    }
+    moveActive(direction) {
+        if (!this.options.length)
+            return;
+        let next = this.activeIndex;
+        for (let index = 0; index < this.options.length; index++) {
+            next = (next + direction + this.options.length) % this.options.length;
+            if (!this.options[next]?.disabled) {
+                this.activeIndex = next;
+                return;
+            }
+        }
+    }
+    firstEnabledIndex() {
+        return this.options.findIndex((option) => !option.disabled);
+    }
+    setValue(value) {
+        this.value = value;
+        this.onChange(value);
+        this.selectionChange.emit(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: "label", placeholder: "placeholder", options: "options", hint: "hint", error: "error", emptyText: "emptyText", clearable: "clearable", dark: "dark", disabled: "disabled", scrollBehavior: "scrollBehavior", compareWith: "compareWith" }, outputs: { selectionChange: "selectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TdSelect),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: `
+    <div
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      class="td-select"
+      [class.td-select--open]="open"
+      [class.td-select--error]="!!error"
+      [class.td-select--disabled]="disabled"
+      [class.td-select--dark]="dark"
+    >
+      <label [id]="labelId">{{ label }}</label>
+      <div
+        class="td-select__trigger"
+        role="combobox"
+        [attr.tabindex]="disabled ? -1 : 0"
+        [attr.aria-disabled]="disabled"
+        [attr.aria-labelledby]="labelId"
+        [attr.aria-expanded]="open"
+        [attr.aria-controls]="listId"
+        (click)="toggle()"
+        (keydown)="handleKeydown($event)"
+      >
+        @if (selectedOption?.icon) {
+          <td-icon class="td-select__leading" [nombre]="selectedOption!.icon!" />
+        }
+        <span [class.td-select__placeholder]="!selectedOption">
+          {{ selectedOption?.label || placeholder }}
+        </span>
+        @if (clearable && selectedOption && !disabled) {
+          <button
+            type="button"
+            class="td-select__clear"
+            title="Limpiar selección"
+            (click)="clear($event)"
+          >
+            <td-icon nombre="close" tamano=".95rem" />
+          </button>
+        }
+        <td-icon
+          class="td-select__chevron"
+          [class.td-select__chevron--open]="open"
+          nombre="chevron_down"
+        />
+      </div>
+    </div>
+
+    @if (error || hint) {
+      <p class="td-select__message" [class.td-select__message--error]="!!error">
+        {{ error || hint }}
+      </p>
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      #connectedOverlay="cdkConnectedOverlay"
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open"
+      [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+      [cdkConnectedOverlayMatchWidth]="true"
+      [cdkConnectedOverlayViewportMargin]="8"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="close()"
+      (overlayKeydown)="handleOverlayKeydown($event)"
+      (detach)="close()"
+    >
+      <div
+        class="td-select-panel"
+        [class.td-select-panel--dark]="dark"
+        [id]="listId"
+        role="listbox"
+      >
+        @if (!options.length) {
+          <p class="td-select-panel__empty">{{ emptyText }}</p>
+        }
+        @for (option of options; track option.value; let index = $index) {
+          <button
+            type="button"
+            role="option"
+            [class.td-select-panel__option--active]="index === activeIndex"
+            [class.td-select-panel__option--selected]="compare(option.value, value)"
+            [attr.aria-selected]="compare(option.value, value)"
+            [disabled]="option.disabled"
+            (mouseenter)="activeIndex = index"
+            (click)="select(option)"
+          >
+            @if (option.icon) {
+              <td-icon [nombre]="option.icon" />
+            }
+            <span>
+              <strong>{{ option.label }}</strong>
+              @if (option.description) {
+                <small>{{ option.description }}</small>
+              }
+            </span>
+            @if (compare(option.value, value)) {
+              <td-icon class="td-select-panel__check" nombre="check" />
+            }
+          </button>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], template: `
+    <div
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      class="td-select"
+      [class.td-select--open]="open"
+      [class.td-select--error]="!!error"
+      [class.td-select--disabled]="disabled"
+      [class.td-select--dark]="dark"
+    >
+      <label [id]="labelId">{{ label }}</label>
+      <div
+        class="td-select__trigger"
+        role="combobox"
+        [attr.tabindex]="disabled ? -1 : 0"
+        [attr.aria-disabled]="disabled"
+        [attr.aria-labelledby]="labelId"
+        [attr.aria-expanded]="open"
+        [attr.aria-controls]="listId"
+        (click)="toggle()"
+        (keydown)="handleKeydown($event)"
+      >
+        @if (selectedOption?.icon) {
+          <td-icon class="td-select__leading" [nombre]="selectedOption!.icon!" />
+        }
+        <span [class.td-select__placeholder]="!selectedOption">
+          {{ selectedOption?.label || placeholder }}
+        </span>
+        @if (clearable && selectedOption && !disabled) {
+          <button
+            type="button"
+            class="td-select__clear"
+            title="Limpiar selección"
+            (click)="clear($event)"
+          >
+            <td-icon nombre="close" tamano=".95rem" />
+          </button>
+        }
+        <td-icon
+          class="td-select__chevron"
+          [class.td-select__chevron--open]="open"
+          nombre="chevron_down"
+        />
+      </div>
+    </div>
+
+    @if (error || hint) {
+      <p class="td-select__message" [class.td-select__message--error]="!!error">
+        {{ error || hint }}
+      </p>
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      #connectedOverlay="cdkConnectedOverlay"
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open"
+      [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+      [cdkConnectedOverlayMatchWidth]="true"
+      [cdkConnectedOverlayViewportMargin]="8"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="close()"
+      (overlayKeydown)="handleOverlayKeydown($event)"
+      (detach)="close()"
+    >
+      <div
+        class="td-select-panel"
+        [class.td-select-panel--dark]="dark"
+        [id]="listId"
+        role="listbox"
+      >
+        @if (!options.length) {
+          <p class="td-select-panel__empty">{{ emptyText }}</p>
+        }
+        @for (option of options; track option.value; let index = $index) {
+          <button
+            type="button"
+            role="option"
+            [class.td-select-panel__option--active]="index === activeIndex"
+            [class.td-select-panel__option--selected]="compare(option.value, value)"
+            [attr.aria-selected]="compare(option.value, value)"
+            [disabled]="option.disabled"
+            (mouseenter)="activeIndex = index"
+            (click)="select(option)"
+          >
+            @if (option.icon) {
+              <td-icon [nombre]="option.icon" />
+            }
+            <span>
+              <strong>{{ option.label }}</strong>
+              @if (option.description) {
+                <small>{{ option.description }}</small>
+              }
+            </span>
+            @if (compare(option.value, value)) {
+              <td-icon class="td-select-panel__check" nombre="check" />
+            }
+          </button>
+        }
+      </div>
+    </ng-template>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TdSelect),
+                            multi: true,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
+                type: ViewChild,
+                args: [CdkConnectedOverlay]
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], emptyText: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], scrollBehavior: [{
+                type: Input
+            }], compareWith: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
 class TdSidebar {
     titulo = 'Gestión Corporativa';
     subtitulo = 'Central Platform';
@@ -925,5 +2230,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdDataTable, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdSidebar, TelcomdevUi };
+export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdAutocompleteSelect, TdDataTable, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TelcomdevUi };
 //# sourceMappingURL=telcomdev-ui.mjs.map