@telcomdev/ui 0.1.24 → 0.1.25

package/fesm2022/telcomdev-ui.mjs

@@ -23,352 +23,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
             args: [{ selector: 'td-telcomdev-ui', imports: [], template: ` <p>telcomdev-ui works!</p> `, changeDetection: ChangeDetectionStrategy.Eager }]
         }] });
 
-class TdAlerta {
-    static estiloId = 'td-alerta-estilos';
-    static exito(mensaje, titulo = '¡Operación exitosa!') {
-        return this.mostrar({
-            titulo,
-            mensaje,
-            tipo: 'exito',
-            textoConfirmar: 'Aceptar',
-        });
-    }
-    static error(mensaje, titulo = '¡Error!') {
-        return this.mostrar({
-            titulo,
-            mensaje,
-            tipo: 'error',
-            textoConfirmar: 'Cerrar',
-        });
-    }
-    static errorSistema(mensaje, titulo = '¡Error de Sistema!') {
-        return this.mostrar({
-            titulo,
-            mensaje,
-            tipo: 'error',
-            textoConfirmar: 'Cerrar',
-        });
-    }
-    static advertencia(mensaje, titulo = '¡Advertencia!') {
-        return this.mostrar({
-            titulo,
-            mensaje,
-            tipo: 'advertencia',
-            textoConfirmar: 'Aceptar',
-        });
-    }
-    static info(mensaje, titulo = 'Información') {
-        return this.mostrar({
-            titulo,
-            mensaje,
-            tipo: 'info',
-            textoConfirmar: 'Aceptar',
-        });
-    }
-    static confirmar(mensaje, titulo = '¿Estás seguro?', textoConfirmar = 'Sí, continuar', textoCancelar = 'Cancelar') {
-        return this.mostrar({
-            titulo,
-            mensaje,
-            tipo: 'pregunta',
-            textoConfirmar,
-            textoCancelar,
-            mostrarCancelar: true,
-        });
-    }
-    static confirmarEliminar(mensaje = 'Esta acción no se puede deshacer.', titulo = '¿Eliminar registro?') {
-        return this.mostrar({
-            titulo,
-            mensaje,
-            tipo: 'advertencia',
-            textoConfirmar: 'Sí, eliminar',
-            textoCancelar: 'Cancelar',
-            mostrarCancelar: true,
-        });
-    }
-    static mostrar(opciones) {
-        if (typeof document === 'undefined') {
-            return Promise.resolve(false);
-        }
-        this.inyectarEstilos();
-        const config = {
-            titulo: opciones.titulo ?? '',
-            mensaje: opciones.mensaje ?? '',
-            tipo: opciones.tipo ?? 'info',
-            textoConfirmar: opciones.textoConfirmar ?? 'Aceptar',
-            textoCancelar: opciones.textoCancelar ?? 'Cancelar',
-            mostrarCancelar: opciones.mostrarCancelar ?? false,
-            cerrarConEscape: opciones.cerrarConEscape ?? true,
-            cerrarConFondo: opciones.cerrarConFondo ?? false,
-        };
-        return new Promise((resolve) => {
-            const fondo = document.createElement('div');
-            fondo.className = 'td-alerta-fondo';
-            const modal = document.createElement('div');
-            modal.className = 'td-alerta-modal';
-            modal.setAttribute('role', 'dialog');
-            modal.setAttribute('aria-modal', 'true');
-            const icono = document.createElement('div');
-            icono.className = `td-alerta-icono td-alerta-icono--${config.tipo}`;
-            icono.textContent = this.obtenerIcono(config.tipo);
-            const titulo = document.createElement('h2');
-            titulo.className = 'td-alerta-titulo';
-            titulo.textContent = config.titulo;
-            const mensaje = document.createElement('p');
-            mensaje.className = 'td-alerta-mensaje';
-            mensaje.textContent = config.mensaje;
-            const acciones = document.createElement('div');
-            acciones.className = 'td-alerta-acciones';
-            const botonConfirmar = document.createElement('button');
-            botonConfirmar.type = 'button';
-            botonConfirmar.className = `td-alerta-boton td-alerta-boton--${config.tipo}`;
-            botonConfirmar.textContent = config.textoConfirmar;
-            const botonCancelar = document.createElement('button');
-            botonCancelar.type = 'button';
-            botonCancelar.className = 'td-alerta-boton td-alerta-boton--cancelar';
-            botonCancelar.textContent = config.textoCancelar;
-            const cerrar = (resultado) => {
-                document.removeEventListener('keydown', onKeyDown);
-                fondo.classList.add('td-alerta-saliendo');
-                window.setTimeout(() => {
-                    fondo.remove();
-                    resolve(resultado);
-                }, 140);
-            };
-            const onKeyDown = (event) => {
-                if (event.key === 'Escape' && config.cerrarConEscape) {
-                    cerrar(false);
-                }
-            };
-            botonConfirmar.addEventListener('click', () => cerrar(true));
-            botonCancelar.addEventListener('click', () => cerrar(false));
-            if (config.cerrarConFondo) {
-                fondo.addEventListener('click', (event) => {
-                    if (event.target === fondo) {
-                        cerrar(false);
-                    }
-                });
-            }
-            document.addEventListener('keydown', onKeyDown);
-            if (config.mostrarCancelar) {
-                acciones.appendChild(botonCancelar);
-            }
-            acciones.appendChild(botonConfirmar);
-            modal.appendChild(icono);
-            modal.appendChild(titulo);
-            if (config.mensaje) {
-                modal.appendChild(mensaje);
-            }
-            modal.appendChild(acciones);
-            fondo.appendChild(modal);
-            document.body.appendChild(fondo);
-            botonConfirmar.focus();
-        });
-    }
-    static obtenerIcono(tipo) {
-        const iconos = {
-            exito: '✓',
-            error: '!',
-            advertencia: '!',
-            info: 'i',
-            pregunta: '?',
-        };
-        return iconos[tipo];
-    }
-    static inyectarEstilos() {
-        if (document.getElementById(this.estiloId))
-            return;
-        const style = document.createElement('style');
-        style.id = this.estiloId;
-        style.textContent = `
-      .td-alerta-fondo {
-        position: fixed;
-        inset: 0;
-        z-index: 99999;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 1rem;
-        background: rgba(15, 23, 42, 0.52);
-        animation: td-alerta-fondo-entrada 160ms ease-out;
-      }
-
-      .td-alerta-modal {
-        width: min(100%, 430px);
-        border-radius: 18px;
-        background: #ffffff;
-        padding: 1.75rem;
-        text-align: center;
-        box-shadow: 0 22px 70px rgba(15, 23, 42, 0.28);
-        animation: td-alerta-modal-entrada 180ms ease-out;
-        font-family: var(--td-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
-      }
-
-      .td-alerta-icono {
-        width: 4.25rem;
-        height: 4.25rem;
-        margin: 0 auto 1rem;
-        border-radius: 999px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 2.1rem;
-        font-weight: 800;
-      }
-
-      .td-alerta-icono--exito {
-        color: #16a34a;
-        background: #dcfce7;
-      }
-
-      .td-alerta-icono--error {
-        color: #ef4444;
-        background: #fee2e2;
-      }
-
-      .td-alerta-icono--advertencia {
-        color: #f59e0b;
-        background: #fef3c7;
-      }
-
-      .td-alerta-icono--info {
-        color: #2563eb;
-        background: #dbeafe;
-      }
-
-      .td-alerta-icono--pregunta {
-        color: #7c3aed;
-        background: #ede9fe;
-      }
-
-      .td-alerta-titulo {
-        margin: 0;
-        color: #111827;
-        font-size: 1.35rem;
-        line-height: 1.25;
-        font-weight: 800;
-      }
-
-      .td-alerta-mensaje {
-        margin: 0.75rem 0 0;
-        color: #4b5563;
-        font-size: 0.96rem;
-        line-height: 1.55;
-      }
-
-      .td-alerta-acciones {
-        display: flex;
-        justify-content: center;
-        gap: 0.75rem;
-        margin-top: 1.5rem;
-      }
-
-      .td-alerta-boton {
-        border: 0;
-        border-radius: 10px;
-        padding: 0.7rem 1.2rem;
-        color: #ffffff;
-        font-size: 0.93rem;
-        font-weight: 700;
-        cursor: pointer;
-        transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
-      }
-
-      .td-alerta-boton:hover {
-        filter: brightness(0.96);
-      }
-
-      .td-alerta-boton:active {
-        transform: scale(0.98);
-      }
-
-      .td-alerta-boton:focus {
-        outline: 3px solid rgba(37, 99, 235, 0.25);
-        outline-offset: 2px;
-      }
-
-      .td-alerta-boton--exito {
-        background: #22c55e;
-      }
-
-      .td-alerta-boton--error {
-        background: #ef4444;
-      }
-
-      .td-alerta-boton--advertencia {
-        background: #f59e0b;
-      }
-
-      .td-alerta-boton--info {
-        background: #2563eb;
-      }
-
-      .td-alerta-boton--pregunta {
-        background: #7c3aed;
-      }
-
-      .td-alerta-boton--cancelar {
-        background: #6b7280;
-      }
-
-      .td-alerta-saliendo {
-        animation: td-alerta-fondo-salida 140ms ease-in forwards;
-      }
-
-      .td-alerta-saliendo .td-alerta-modal {
-        animation: td-alerta-modal-salida 140ms ease-in forwards;
-      }
-
-      @keyframes td-alerta-fondo-entrada {
-        from { opacity: 0; }
-        to { opacity: 1; }
-      }
-
-      @keyframes td-alerta-modal-entrada {
-        from {
-          opacity: 0;
-          transform: translateY(12px) scale(0.96);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0) scale(1);
-        }
-      }
-
-      @keyframes td-alerta-fondo-salida {
-        from { opacity: 1; }
-        to { opacity: 0; }
-      }
-
-      @keyframes td-alerta-modal-salida {
-        from {
-          opacity: 1;
-          transform: translateY(0) scale(1);
-        }
-        to {
-          opacity: 0;
-          transform: translateY(8px) scale(0.97);
-        }
-      }
-
-      @media (max-width: 480px) {
-        .td-alerta-modal {
-          padding: 1.4rem;
-          border-radius: 16px;
-        }
-
-        .td-alerta-acciones {
-          flex-direction: column-reverse;
-        }
-
-        .td-alerta-boton {
-          width: 100%;
-        }
-      }
-    `;
-        document.head.appendChild(style);
-    }
-}
-
 const TD_ICONOS = {
     home: {
         path: 'M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V10.5Z',
@@ -609,6 +263,1025 @@ const TD_ICONOS = {
 };
 const TD_ICONOS_NOMBRES = Object.freeze(Object.keys(TD_ICONOS));
 
+class TdAlert {
+    static styleId = 'td-alert-styles';
+    static toastRootPrefix = 'td-toast-root';
+    static scrollLockCount = 0;
+    static previousBodyOverflow = '';
+    static success(message, title = 'Operación exitosa') {
+        return this.show({
+            title,
+            message,
+            type: 'success',
+            confirmText: 'Aceptar',
+        });
+    }
+    static error(message, title = 'Error') {
+        return this.show({
+            title,
+            message,
+            type: 'error',
+            confirmText: 'Cerrar',
+        });
+    }
+    static systemError(message, title = 'Error de sistema') {
+        return this.error(message, title);
+    }
+    static warning(message, title = 'Advertencia') {
+        return this.show({
+            title,
+            message,
+            type: 'warning',
+            confirmText: 'Aceptar',
+        });
+    }
+    static info(message, title = 'Información') {
+        return this.show({
+            title,
+            message,
+            type: 'info',
+            confirmText: 'Aceptar',
+        });
+    }
+    static confirm(message, title = '¿Estás seguro?', confirmText = 'Sí, continuar', cancelText = 'Cancelar') {
+        return this.show({
+            title,
+            message,
+            type: 'question',
+            confirmText,
+            cancelText,
+            showCancel: true,
+        });
+    }
+    static confirmDelete(message = 'Esta acción no se puede deshacer.', title = '¿Eliminar registro?') {
+        return this.show({
+            title,
+            message,
+            type: 'warning',
+            confirmText: 'Sí, eliminar',
+            cancelText: 'Cancelar',
+            showCancel: true,
+        });
+    }
+    static show(options) {
+        if (typeof document === 'undefined') {
+            return Promise.resolve(false);
+        }
+        this.injectStyles();
+        const config = this.normalizeAlertOptions(options);
+        const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+        return new Promise((resolve) => {
+            this.lockBodyScroll();
+            const backdrop = document.createElement('div');
+            backdrop.className = 'td-alert-backdrop';
+            const modal = document.createElement('div');
+            modal.className = `td-alert-modal td-alert-modal--${config.type}`;
+            modal.setAttribute('role', 'dialog');
+            modal.setAttribute('aria-modal', 'true');
+            modal.setAttribute('aria-labelledby', 'td-alert-title');
+            const accent = document.createElement('span');
+            accent.className = 'td-alert-accent';
+            accent.setAttribute('aria-hidden', 'true');
+            const icon = document.createElement('div');
+            icon.className = `td-alert-icon td-alert-icon--${config.type}`;
+            icon.appendChild(this.createIcon(this.getAlertIcon(config.type)));
+            const title = document.createElement('h2');
+            title.id = 'td-alert-title';
+            title.className = 'td-alert-title';
+            title.textContent = config.title;
+            const message = document.createElement('p');
+            message.className = 'td-alert-message';
+            message.textContent = config.message;
+            const actions = document.createElement('div');
+            actions.className = 'td-alert-actions';
+            const confirmButton = document.createElement('button');
+            confirmButton.type = 'button';
+            confirmButton.className = `td-alert-button td-alert-button--${config.type}`;
+            confirmButton.textContent = config.confirmText;
+            const cancelButton = document.createElement('button');
+            cancelButton.type = 'button';
+            cancelButton.className = 'td-alert-button td-alert-button--cancel';
+            cancelButton.textContent = config.cancelText;
+            let closed = false;
+            const close = (result) => {
+                if (closed)
+                    return;
+                closed = true;
+                document.removeEventListener('keydown', onKeyDown);
+                backdrop.classList.add('td-alert-backdrop--leaving');
+                window.setTimeout(() => {
+                    backdrop.remove();
+                    this.unlockBodyScroll();
+                    previouslyFocused?.focus?.();
+                    resolve(result);
+                }, 150);
+            };
+            const onKeyDown = (event) => {
+                if (event.key === 'Escape' && config.closeOnEscape) {
+                    close(false);
+                }
+                if (event.key === 'Tab') {
+                    this.keepFocusInside(event, modal);
+                }
+            };
+            confirmButton.addEventListener('click', () => close(true));
+            cancelButton.addEventListener('click', () => close(false));
+            if (config.closeOnBackdrop) {
+                backdrop.addEventListener('click', (event) => {
+                    if (event.target === backdrop) {
+                        close(false);
+                    }
+                });
+            }
+            document.addEventListener('keydown', onKeyDown);
+            if (config.showCancel) {
+                actions.appendChild(cancelButton);
+            }
+            actions.appendChild(confirmButton);
+            const content = document.createElement('div');
+            content.className = 'td-alert-content';
+            content.appendChild(title);
+            if (config.message) {
+                content.appendChild(message);
+            }
+            content.appendChild(actions);
+            modal.appendChild(accent);
+            modal.appendChild(icon);
+            modal.appendChild(content);
+            backdrop.appendChild(modal);
+            document.body.appendChild(backdrop);
+            if (config.autoFocus) {
+                confirmButton.focus();
+            }
+        });
+    }
+    static notify(message, options = {}) {
+        return this.toast(message, options);
+    }
+    static toast(message, options = {}) {
+        if (typeof document === 'undefined') {
+            return Promise.resolve(false);
+        }
+        this.injectStyles();
+        const config = this.normalizeToastOptions({ ...options, message });
+        return new Promise((resolve) => {
+            const root = this.getToastRoot(config.position);
+            this.trimVisibleToasts(root, config.maxVisible);
+            const toast = document.createElement('section');
+            toast.className = `td-toast td-toast--${config.type}`;
+            toast.setAttribute('role', config.type === 'error' ? 'alert' : 'status');
+            toast.setAttribute('aria-live', config.type === 'error' ? 'assertive' : 'polite');
+            const icon = document.createElement('span');
+            icon.className = 'td-toast-icon';
+            icon.appendChild(this.createIcon(this.getToastIcon(config.type)));
+            const content = document.createElement('span');
+            content.className = 'td-toast-content';
+            if (config.title) {
+                const title = document.createElement('strong');
+                title.textContent = config.title;
+                content.appendChild(title);
+            }
+            const messageElement = document.createElement('small');
+            messageElement.textContent = config.message;
+            content.appendChild(messageElement);
+            const actions = document.createElement('span');
+            actions.className = 'td-toast-actions';
+            let timeoutId;
+            let remainingDuration = config.duration;
+            let timerStartedAt = 0;
+            let closed = false;
+            const close = (result) => {
+                if (closed)
+                    return;
+                closed = true;
+                if (timeoutId !== undefined) {
+                    window.clearTimeout(timeoutId);
+                }
+                toast.classList.add('td-toast--leaving');
+                window.setTimeout(() => {
+                    toast.remove();
+                    if (!root.childElementCount) {
+                        root.remove();
+                    }
+                    resolve(result);
+                }, 160);
+            };
+            const pauseTimer = () => {
+                if (closed || config.duration <= 0 || timeoutId === undefined) {
+                    return;
+                }
+                window.clearTimeout(timeoutId);
+                timeoutId = undefined;
+                remainingDuration = Math.max(0, remainingDuration - (Date.now() - timerStartedAt));
+                toast.classList.add('td-toast--paused');
+            };
+            const resumeTimer = () => {
+                if (closed || config.duration <= 0 || timeoutId !== undefined || remainingDuration <= 0) {
+                    return;
+                }
+                timerStartedAt = Date.now();
+                timeoutId = window.setTimeout(() => close(false), remainingDuration);
+                toast.classList.remove('td-toast--paused');
+            };
+            if (config.actionText) {
+                const action = document.createElement('button');
+                action.type = 'button';
+                action.className = 'td-toast-action';
+                action.textContent = config.actionText;
+                action.addEventListener('click', () => close(true));
+                actions.appendChild(action);
+            }
+            if (config.dismissible) {
+                const dismiss = document.createElement('button');
+                dismiss.type = 'button';
+                dismiss.className = 'td-toast-dismiss';
+                dismiss.setAttribute('aria-label', 'Cerrar notificación');
+                dismiss.appendChild(this.createIcon('close'));
+                dismiss.addEventListener('click', () => close(false));
+                actions.appendChild(dismiss);
+            }
+            toast.appendChild(icon);
+            toast.appendChild(content);
+            toast.appendChild(actions);
+            if (config.showProgress && config.duration > 0) {
+                const progress = document.createElement('span');
+                progress.className = 'td-toast-progress';
+                progress.style.animationDuration = `${config.duration}ms`;
+                toast.appendChild(progress);
+            }
+            root.appendChild(toast);
+            if (config.duration > 0) {
+                toast.addEventListener('pointerenter', pauseTimer);
+                toast.addEventListener('pointerleave', resumeTimer);
+                toast.addEventListener('focusin', pauseTimer);
+                toast.addEventListener('focusout', resumeTimer);
+                resumeTimer();
+            }
+        });
+    }
+    static toastSuccess(message, title = 'Guardado') {
+        return this.toast(message, { title, type: 'success' });
+    }
+    static toastError(message, title = 'No se pudo completar') {
+        return this.toast(message, { title, type: 'error', duration: 6500 });
+    }
+    static toastWarning(message, title = 'Atención') {
+        return this.toast(message, { title, type: 'warning', duration: 5600 });
+    }
+    static toastInfo(message, title = 'Información') {
+        return this.toast(message, { title, type: 'info' });
+    }
+    static snackbar(message, options = {}) {
+        return this.toast(message, options);
+    }
+    static snackbarExito(message, titulo = 'Listo') {
+        return this.toastSuccess(message, titulo);
+    }
+    static snackbarError(message, titulo = 'No se pudo completar') {
+        return this.toastError(message, titulo);
+    }
+    static snackbarAdvertencia(message, titulo = 'Atención') {
+        return this.toastWarning(message, titulo);
+    }
+    static snackbarInfo(message, titulo = 'Información') {
+        return this.toastInfo(message, titulo);
+    }
+    static exito(mensaje, titulo = 'Operación exitosa') {
+        return this.success(mensaje, titulo);
+    }
+    static errorSistema(mensaje, titulo = 'Error de sistema') {
+        return this.systemError(mensaje, titulo);
+    }
+    static advertencia(mensaje, titulo = 'Advertencia') {
+        return this.warning(mensaje, titulo);
+    }
+    static confirmar(mensaje, titulo = '¿Estás seguro?', textoConfirmar = 'Sí, continuar', textoCancelar = 'Cancelar') {
+        return this.confirm(mensaje, titulo, textoConfirmar, textoCancelar);
+    }
+    static confirmarEliminar(mensaje = 'Esta acción no se puede deshacer.', titulo = '¿Eliminar registro?') {
+        return this.show({
+            title: titulo,
+            message: mensaje,
+            type: 'warning',
+            confirmText: 'Sí, eliminar',
+            cancelText: 'Cancelar',
+            showCancel: true,
+        });
+    }
+    static notificar(options) {
+        return this.toast(options.mensaje ?? '', options);
+    }
+    static normalizeAlertOptions(options) {
+        const legacy = options;
+        const modern = options;
+        return {
+            title: modern.title ?? legacy.titulo ?? '',
+            message: modern.message ?? legacy.mensaje ?? '',
+            type: this.normalizeAlertType(modern.type ?? legacy.tipo ?? 'info'),
+            confirmText: modern.confirmText ?? legacy.textoConfirmar ?? 'Aceptar',
+            cancelText: modern.cancelText ?? legacy.textoCancelar ?? 'Cancelar',
+            showCancel: modern.showCancel ?? legacy.mostrarCancelar ?? false,
+            closeOnEscape: modern.closeOnEscape ?? legacy.cerrarConEscape ?? true,
+            closeOnBackdrop: modern.closeOnBackdrop ?? legacy.cerrarConFondo ?? false,
+            autoFocus: modern.autoFocus ?? legacy.autoFocus ?? true,
+        };
+    }
+    static normalizeToastOptions(options) {
+        const legacy = options;
+        const modern = options;
+        return {
+            title: modern.title ?? legacy.titulo ?? '',
+            message: modern.message ?? legacy.mensaje ?? '',
+            type: this.normalizeToastType(modern.type ?? legacy.tipo ?? 'neutral'),
+            position: this.normalizeToastPosition(modern.position ?? legacy.posicion ?? 'bottom-left'),
+            duration: modern.duration ?? legacy.duracion ?? 4200,
+            actionText: modern.actionText ?? legacy.textoAccion ?? '',
+            dismissible: modern.dismissible ?? legacy.cerrable ?? true,
+            showProgress: modern.showProgress ?? legacy.mostrarProgreso ?? true,
+            maxVisible: modern.maxVisible ?? legacy.maximoVisible ?? 4,
+        };
+    }
+    static normalizeAlertType(type) {
+        const map = {
+            exito: 'success',
+            advertencia: 'warning',
+            pregunta: 'question',
+            success: 'success',
+            error: 'error',
+            warning: 'warning',
+            info: 'info',
+            question: 'question',
+        };
+        return map[type] ?? 'info';
+    }
+    static normalizeToastType(type) {
+        const map = {
+            exito: 'success',
+            advertencia: 'warning',
+            success: 'success',
+            error: 'error',
+            warning: 'warning',
+            info: 'info',
+            neutral: 'neutral',
+        };
+        return map[type] ?? 'neutral';
+    }
+    static normalizeToastPosition(position) {
+        const map = {
+            'inferior-izquierda': 'bottom-left',
+            'inferior-derecha': 'bottom-right',
+            'superior-izquierda': 'top-left',
+            'superior-derecha': 'top-right',
+            'inferior-centro': 'bottom-center',
+            'superior-centro': 'top-center',
+            'bottom-left': 'bottom-left',
+            'bottom-right': 'bottom-right',
+            'top-left': 'top-left',
+            'top-right': 'top-right',
+            'bottom-center': 'bottom-center',
+            'top-center': 'top-center',
+        };
+        return map[position] ?? 'bottom-left';
+    }
+    static getToastRoot(position) {
+        const id = `${this.toastRootPrefix}-${position}`;
+        const existing = document.getElementById(id);
+        if (existing)
+            return existing;
+        const root = document.createElement('div');
+        root.id = id;
+        root.className = `td-toast-root td-toast-root--${position}`;
+        document.body.appendChild(root);
+        return root;
+    }
+    static trimVisibleToasts(root, maxVisible) {
+        const max = Math.max(1, maxVisible);
+        while (root.childElementCount >= max) {
+            root.firstElementChild?.remove();
+        }
+    }
+    static getAlertIcon(type) {
+        const icons = {
+            success: 'check_circle',
+            error: 'error',
+            warning: 'warning',
+            info: 'info',
+            question: 'help',
+        };
+        return icons[type];
+    }
+    static getToastIcon(type) {
+        const icons = {
+            success: 'check_circle',
+            error: 'error',
+            warning: 'warning',
+            info: 'info',
+            neutral: 'notifications',
+        };
+        return icons[type];
+    }
+    static createIcon(name) {
+        const definition = TD_ICONOS[name];
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        svg.setAttribute('viewBox', definition.viewBox || '0 0 24 24');
+        svg.setAttribute('aria-hidden', 'true');
+        svg.setAttribute('focusable', 'false');
+        path.setAttribute('d', definition.path);
+        if (definition.estilo === 'linea') {
+            path.setAttribute('fill', 'none');
+            path.setAttribute('stroke', 'currentColor');
+            path.setAttribute('stroke-width', `${definition.grosor || 1.75}`);
+            path.setAttribute('stroke-linecap', 'round');
+            path.setAttribute('stroke-linejoin', 'round');
+        }
+        else {
+            path.setAttribute('fill', 'currentColor');
+        }
+        svg.appendChild(path);
+        return svg;
+    }
+    static keepFocusInside(event, container) {
+        const focusables = Array.from(container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter((element) => !element.hasAttribute('disabled'));
+        if (!focusables.length)
+            return;
+        const first = focusables[0];
+        const last = focusables[focusables.length - 1];
+        const active = document.activeElement;
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    static lockBodyScroll() {
+        if (this.scrollLockCount === 0) {
+            this.previousBodyOverflow = document.body.style.overflow;
+            document.body.style.overflow = 'hidden';
+        }
+        this.scrollLockCount += 1;
+    }
+    static unlockBodyScroll() {
+        this.scrollLockCount = Math.max(0, this.scrollLockCount - 1);
+        if (this.scrollLockCount === 0) {
+            document.body.style.overflow = this.previousBodyOverflow;
+        }
+    }
+    static injectStyles() {
+        if (document.getElementById(this.styleId))
+            return;
+        const style = document.createElement('style');
+        style.id = this.styleId;
+        style.textContent = `
+      .td-alert-backdrop,
+      .td-toast-root {
+        --td-alert-z-index: var(--td-z-alert, 2147483000);
+        box-sizing: border-box;
+        font-family: var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
+      }
+
+      .td-alert-backdrop *,
+      .td-toast-root * {
+        box-sizing: border-box;
+      }
+
+      .td-alert-backdrop {
+        position: fixed;
+        inset: 0;
+        z-index: var(--td-alert-z-index);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+        background: transparent;
+        backdrop-filter: none;
+        animation: td-alert-backdrop-in 160ms ease-out;
+      }
+
+      .td-alert-modal {
+        position: relative;
+        display: grid;
+        width: min(100%, 455px);
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--td-alert-glow, var(--td-color-primary, #3157a4)) 18%, rgba(255, 255, 255, 0.82));
+        border-radius: 1.45rem;
+        padding: 1.35rem;
+        color: var(--td-color-text, #202b3d);
+        background:
+          linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)),
+          color-mix(in srgb, var(--td-color-surface, #fff) 60%, transparent);
+        text-align: center;
+        box-shadow:
+          0 22px 58px rgba(15, 23, 42, 0.15),
+          0 0 0 1px rgba(255, 255, 255, 0.76) inset;
+        backdrop-filter: blur(28px) saturate(155%);
+        -webkit-backdrop-filter: blur(28px) saturate(155%);
+        animation: td-alert-modal-in 210ms cubic-bezier(.16,1,.3,1);
+      }
+
+      .td-alert-modal::before {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
+        border-radius: inherit;
+        background:
+          linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 58%, rgba(255, 255, 255, 0.14));
+        opacity: 0.58;
+        pointer-events: none;
+        content: "";
+      }
+
+      .td-theme-dark .td-alert-modal {
+        border-color: color-mix(in srgb, var(--td-alert-glow, var(--td-color-primary, #8aa7e6)) 22%, rgba(255, 255, 255, 0.16));
+        background:
+          linear-gradient(145deg, rgba(32, 36, 45, 0.78), rgba(17, 20, 26, 0.54)),
+          color-mix(in srgb, var(--td-color-surface, #181b22) 66%, transparent);
+        box-shadow:
+          0 24px 66px rgba(0, 0, 0, 0.34),
+          0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+      }
+
+      .td-theme-dark .td-alert-modal::before {
+        background:
+          linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018) 58%, rgba(255, 255, 255, 0.035));
+      }
+
+      .td-alert-modal::after {
+        position: absolute;
+        inset: 1px;
+        z-index: 0;
+        border-radius: calc(1.45rem - 1px);
+        background:
+          linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 46%);
+        opacity: 0.36;
+        pointer-events: none;
+        content: "";
+      }
+
+      .td-alert-accent {
+        display: none;
+      }
+
+      .td-alert-modal--success { --td-alert-glow: var(--td-color-success, #16784a); }
+      .td-alert-modal--error { --td-alert-glow: var(--td-color-danger, #b93a3a); }
+      .td-alert-modal--warning { --td-alert-glow: var(--td-color-warning, #a8660b); }
+      .td-alert-modal--info { --td-alert-glow: var(--td-color-info, #2563a8); }
+      .td-alert-modal--question { --td-alert-glow: var(--td-color-primary, #3157a4); }
+
+      .td-alert-content {
+        min-width: 0;
+        position: relative;
+        z-index: 1;
+      }
+
+      .td-alert-icon {
+        z-index: 1;
+        display: grid;
+        width: 3.45rem;
+        height: 3.45rem;
+        margin: 0 auto 0.9rem;
+        place-items: center;
+        border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
+        border-radius: 1rem;
+        font-size: 1.45rem;
+        font-weight: 900;
+        box-shadow: none;
+      }
+
+      .td-alert-icon svg,
+      .td-toast-icon svg,
+      .td-toast-dismiss svg {
+        width: 1em;
+        height: 1em;
+        display: block;
+      }
+
+      .td-alert-icon--success {
+        color: var(--td-color-success, #16784a);
+        background: var(--td-color-success-soft, #e2f5eb);
+      }
+
+      .td-alert-icon--error {
+        color: var(--td-color-danger, #b93a3a);
+        background: var(--td-color-danger-soft, #fde7e7);
+      }
+
+      .td-alert-icon--warning {
+        color: var(--td-color-warning, #a8660b);
+        background: var(--td-color-warning-soft, #fff2d8);
+      }
+
+      .td-alert-icon--info {
+        color: var(--td-color-info, #2563a8);
+        background: var(--td-color-info-soft, #e4effb);
+      }
+
+      .td-alert-icon--question {
+        color: var(--td-color-primary, #3157a4);
+        background: var(--td-color-primary-soft, #eaf0fb);
+      }
+
+      .td-alert-title {
+        margin: 0;
+        color: var(--td-color-text, #202b3d);
+        font-size: 1.18rem;
+        line-height: 1.25;
+        font-weight: 850;
+        letter-spacing: -0.02em;
+      }
+
+      .td-alert-message {
+        max-width: 23rem;
+        margin: 0.55rem auto 0;
+        color: var(--td-color-text-muted, #66758b);
+        font-size: 0.88rem;
+        line-height: 1.55;
+      }
+
+      .td-alert-actions {
+        display: flex;
+        justify-content: center;
+        gap: 0.65rem;
+        margin-top: 1.45rem;
+      }
+
+      .td-alert-button {
+        min-height: 2.55rem;
+        border: 1px solid transparent;
+        border-radius: 0.9rem;
+        padding: 0.68rem 1.08rem;
+        color: var(--td-color-on-primary, #ffffff);
+        background: var(--td-color-primary, #3157a4);
+        font-size: 0.8rem;
+        font-weight: 800;
+        cursor: pointer;
+        box-shadow: 0 12px 24px color-mix(in srgb, var(--td-color-primary, #3157a4) 22%, transparent);
+        transition: transform 150ms ease, filter 150ms ease, background 150ms ease, box-shadow 150ms ease;
+      }
+
+      .td-alert-button:hover {
+        filter: brightness(1.02);
+        transform: translateY(-2px);
+      }
+
+      .td-alert-button:active {
+        transform: scale(0.98);
+      }
+
+      .td-alert-button:focus-visible {
+        outline: 0;
+        box-shadow: var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, 0.18));
+      }
+
+      .td-alert-button--success { background: var(--td-color-success, #16784a); }
+      .td-alert-button--error { background: var(--td-color-danger, #b93a3a); }
+      .td-alert-button--warning { background: var(--td-color-warning, #a8660b); }
+      .td-alert-button--info { background: var(--td-color-info, #2563a8); }
+      .td-alert-button--question { background: var(--td-color-primary, #3157a4); }
+
+      .td-alert-button--cancel {
+        border-color: var(--td-color-border, #dde3ee);
+        color: var(--td-color-text, #202b3d);
+        background: var(--td-color-surface-soft, #f6f8fb);
+        box-shadow: none;
+      }
+
+      .td-alert-backdrop--leaving {
+        animation: td-alert-backdrop-out 150ms ease-in forwards;
+      }
+
+      .td-alert-backdrop--leaving .td-alert-modal {
+        animation: td-alert-modal-out 150ms ease-in forwards;
+      }
+
+      .td-toast-root {
+        position: fixed;
+        z-index: calc(var(--td-alert-z-index) + 1);
+        display: grid;
+        width: min(26rem, calc(100vw - 1.5rem));
+        gap: 0.65rem;
+        pointer-events: none;
+      }
+
+      .td-toast-root--bottom-left {
+        bottom: max(1rem, env(safe-area-inset-bottom));
+        left: max(1rem, env(safe-area-inset-left));
+      }
+
+      .td-toast-root--bottom-right {
+        right: max(1rem, env(safe-area-inset-right));
+        bottom: max(1rem, env(safe-area-inset-bottom));
+      }
+
+      .td-toast-root--top-left {
+        top: max(1rem, env(safe-area-inset-top));
+        left: max(1rem, env(safe-area-inset-left));
+      }
+
+      .td-toast-root--top-right {
+        top: max(1rem, env(safe-area-inset-top));
+        right: max(1rem, env(safe-area-inset-right));
+      }
+
+      .td-toast-root--bottom-center {
+        bottom: max(1rem, env(safe-area-inset-bottom));
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .td-toast-root--top-center {
+        top: max(1rem, env(safe-area-inset-top));
+        left: 50%;
+        transform: translateX(-50%);
+      }
+
+      .td-toast {
+        --td-toast-glow: var(--td-color-primary, #3157a4);
+        position: relative;
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr) auto;
+        align-items: start;
+        gap: 0.72rem;
+        width: 100%;
+        overflow: hidden;
+        border: 1px solid color-mix(in srgb, var(--td-toast-glow) 16%, rgba(255, 255, 255, 0.76));
+        border-radius: 1.05rem;
+        padding: 0.82rem 0.85rem;
+        color: var(--td-color-text, #202b3d);
+        background:
+          linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)),
+          color-mix(in srgb, var(--td-color-surface, #fff) 62%, transparent);
+        box-shadow:
+          0 18px 42px rgba(15, 23, 42, 0.14),
+          0 0 0 1px rgba(255, 255, 255, 0.7) inset;
+        backdrop-filter: blur(22px) saturate(145%);
+        -webkit-backdrop-filter: blur(22px) saturate(145%);
+        pointer-events: auto;
+        animation: td-toast-in 180ms cubic-bezier(.2,.8,.2,1);
+      }
+
+      .td-toast::before {
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        background:
+          linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 58%);
+        opacity: 0.56;
+        pointer-events: none;
+        content: "";
+      }
+
+      .td-toast::after {
+        position: absolute;
+        inset: 0 auto 0 0;
+        width: 3px;
+        background: var(--td-toast-glow);
+        opacity: 0.9;
+        content: "";
+      }
+
+      .td-toast--leaving {
+        animation: td-toast-out 160ms ease-in forwards;
+      }
+
+      .td-toast--paused .td-toast-progress {
+        animation-play-state: paused;
+      }
+
+      .td-toast--success { --td-toast-glow: var(--td-color-success, #16784a); }
+      .td-toast--error { --td-toast-glow: var(--td-color-danger, #b93a3a); }
+      .td-toast--warning { --td-toast-glow: var(--td-color-warning, #a8660b); }
+      .td-toast--info { --td-toast-glow: var(--td-color-info, #2563a8); }
+      .td-toast--neutral { --td-toast-glow: var(--td-color-primary, #3157a4); }
+
+      .td-toast-icon {
+        position: relative;
+        z-index: 1;
+        display: grid;
+        width: 1.9rem;
+        height: 1.9rem;
+        place-items: center;
+        border-radius: var(--td-radius-md, 0.72rem);
+        font-size: 0.92rem;
+        font-weight: 900;
+      }
+
+      .td-toast--success .td-toast-icon {
+        color: var(--td-color-success, #16784a);
+        background: var(--td-color-success-soft, #e2f5eb);
+      }
+      .td-toast--error .td-toast-icon {
+        color: var(--td-color-danger, #b93a3a);
+        background: var(--td-color-danger-soft, #fde7e7);
+      }
+      .td-toast--warning .td-toast-icon {
+        color: var(--td-color-warning, #a8660b);
+        background: var(--td-color-warning-soft, #fff2d8);
+      }
+      .td-toast--info .td-toast-icon {
+        color: var(--td-color-info, #2563a8);
+        background: var(--td-color-info-soft, #e4effb);
+      }
+      .td-toast--neutral .td-toast-icon {
+        color: var(--td-color-primary, #3157a4);
+        background: var(--td-color-primary-soft, #eaf0fb);
+      }
+
+      .td-toast-content {
+        position: relative;
+        z-index: 1;
+        display: grid;
+        min-width: 0;
+        gap: 0.18rem;
+        padding-top: 0.12rem;
+      }
+
+      .td-toast-content strong {
+        overflow: hidden;
+        color: var(--td-color-text, #202b3d);
+        font-size: 0.8rem;
+        font-weight: 850;
+        line-height: 1.25;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .td-toast-content small {
+        color: var(--td-color-text-muted, #66758b);
+        font-size: 0.72rem;
+        line-height: 1.45;
+      }
+
+      .td-toast-actions {
+        position: relative;
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+      }
+
+      .td-toast-action,
+      .td-toast-dismiss {
+        border: 0;
+        border-radius: var(--td-radius-md, 0.75rem);
+        color: var(--td-color-primary, #3157a4);
+        background: transparent;
+        font: inherit;
+        font-weight: 800;
+        cursor: pointer;
+      }
+
+      .td-toast-action {
+        padding: 0.44rem 0.54rem;
+        font-size: 0.7rem;
+      }
+
+      .td-toast-dismiss {
+        display: grid;
+        width: 1.7rem;
+        height: 1.7rem;
+        place-items: center;
+        color: var(--td-color-text-muted, #66758b);
+        font-size: 1.2rem;
+        line-height: 1;
+      }
+
+      .td-toast-action:hover,
+      .td-toast-dismiss:hover {
+        background: var(--td-color-surface-soft, #f6f8fb);
+      }
+
+      .td-toast-action:focus-visible,
+      .td-toast-dismiss:focus-visible {
+        outline: 0;
+        box-shadow: var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, 0.18));
+      }
+
+      .td-toast-progress {
+        position: absolute;
+        z-index: 1;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 2px;
+        background: currentColor;
+        opacity: 0.24;
+        transform-origin: left;
+        animation: td-toast-progress linear forwards;
+      }
+
+      .td-theme-dark .td-toast {
+        border-color: color-mix(in srgb, var(--td-toast-glow) 20%, rgba(255, 255, 255, 0.16));
+        background:
+          linear-gradient(145deg, rgba(32, 36, 45, 0.76), rgba(17, 20, 26, 0.52)),
+          color-mix(in srgb, var(--td-color-surface, #181b22) 66%, transparent);
+        box-shadow:
+          0 20px 48px rgba(0, 0, 0, 0.34),
+          0 0 0 1px rgba(255, 255, 255, 0.1) inset;
+      }
+
+      .td-theme-dark .td-toast::before {
+        background:
+          linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%);
+      }
+
+      @keyframes td-alert-backdrop-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+
+      @keyframes td-alert-modal-in {
+        from {
+          opacity: 0;
+          transform: translateY(12px) scale(0.96);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+
+      @keyframes td-alert-backdrop-out {
+        from { opacity: 1; }
+        to { opacity: 0; }
+      }
+
+      @keyframes td-alert-modal-out {
+        from {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(8px) scale(0.97);
+        }
+      }
+
+      @keyframes td-toast-in {
+        from {
+          opacity: 0;
+          transform: translateY(10px) scale(0.98);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+
+      @keyframes td-toast-out {
+        from {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(8px) scale(0.98);
+        }
+      }
+
+      @keyframes td-toast-progress {
+        from { transform: scaleX(1); }
+        to { transform: scaleX(0); }
+      }
+
+      @media (max-width: 520px) {
+        .td-alert-modal {
+          grid-template-columns: 1fr;
+          border-radius: var(--td-radius-lg, 0.95rem);
+          padding: 1.25rem;
+        }
+
+        .td-alert-icon {
+          width: 3.25rem;
+          height: 3.25rem;
+        }
+
+        .td-alert-actions {
+          justify-content: stretch;
+          flex-direction: column-reverse;
+        }
+
+        .td-alert-button {
+          width: 100%;
+        }
+
+        .td-toast-root {
+          right: 0.75rem;
+          left: 0.75rem;
+          width: auto;
+          transform: none;
+        }
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+class TdAlerta extends TdAlert {
+}
+
 class TdIconoRegistry {
     iconos = new Map(Object.entries(TD_ICONOS));
     registrar(iconos) {
@@ -1639,7 +2312,7 @@ class TdDataTable {
     formatearFecha(valor, columna) {
         const fecha = this.normalizarFecha(valor);
         if (!fecha)
-            return '—';
+            return '—';
         const opcionesPorTipo = {
             fecha: { day: '2-digit', month: '2-digit', year: 'numeric' },
             fechaHora: {
@@ -1697,11 +2370,11 @@ class TdDataTable {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"columnheader\"\n                [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                {{ columna.encabezado }}\n              </div>\n            }\n            @if (acciones.length) {\n              <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n            }\n          </div>\n\n          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n        >\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"cell\"\n                [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                @if (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else if (\n                  columna.tipo === 'estado' ||\n                  columna.tipo === 'booleano' ||\n                  columna.tipo === 'chip'\n                ) {\n                  <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                } @else {\n                  <span\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (acciones.length) {\n              <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"columnheader\"\n                [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                {{ columna.encabezado }}\n              </div>\n            }\n            @if (acciones.length) {\n              <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n            }\n          </div>\n\n          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n        >\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"cell\"\n                [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                @if (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else if (\n                  columna.tipo === 'estado' ||\n                  columna.tipo === 'booleano' ||\n                  columna.tipo === 'chip'\n                ) {\n                  <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                } @else {\n                  <span\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (acciones.length) {\n              <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla{contain:none}.td-tabla__toolbar{align-items:stretch;flex-direction:column;gap:.75rem;padding:.45rem 0 .85rem}.td-tabla__filtros{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}.td-tabla__filtros ::ng-deep>*,.td-tabla__busqueda{width:100%;min-width:0}.td-tabla__busqueda{min-height:3rem;border-radius:var(--td-radius-lg, .9rem)}.td-tabla__superficie{border-radius:var(--td-radius-lg, .9rem)}.td-tabla__resumen{align-items:stretch;flex-direction:column;gap:.65rem;padding:.85rem}.td-tabla__resumen-acciones{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.55rem}.td-tabla__resumen-acciones ::ng-deep>*,.td-tabla__boton{width:100%;min-width:0}.td-tabla__boton{height:2.45rem;justify-content:center;padding:0 .75rem}.td-tabla__boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-tabla__scroll-x{box-shadow:inset -18px 0 18px -22px color-mix(in srgb,var(--texto) 45%,transparent)}.td-tabla__contenido{min-width:max(46rem,max-content)}.td-tabla__encabezado{min-height:2.6rem;font-size:.58rem;letter-spacing:.06em}.td-tabla__encabezado>div,.td-tabla__celda{padding-inline:.75rem}.td-tabla__viewport{min-height:18rem}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}@media(max-width:420px){.td-tabla__resumen-acciones{grid-template-columns:minmax(0,1fr)}.td-tabla__contenido{min-width:max(42rem,max-content)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, decorators: [{
             type: Component,
-            args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"columnheader\"\n                [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                {{ columna.encabezado }}\n              </div>\n            }\n            @if (acciones.length) {\n              <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n            }\n          </div>\n\n          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n        >\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"cell\"\n                [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                @if (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else if (\n                  columna.tipo === 'estado' ||\n                  columna.tipo === 'booleano' ||\n                  columna.tipo === 'chip'\n                ) {\n                  <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                } @else {\n                  <span\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (acciones.length) {\n              <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"] }]
+            args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div class=\"td-tabla__scroll-x\">\n        <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n          <div class=\"td-tabla__encabezado\" role=\"row\">\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"columnheader\"\n                [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                {{ columna.encabezado }}\n              </div>\n            }\n            @if (acciones.length) {\n              <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n            }\n          </div>\n\n          @if (usaVirtualizacion()) {\n            <cdk-virtual-scroll-viewport\n              class=\"td-tabla__viewport\"\n              [itemSize]=\"itemSize\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarViewport()\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              <ng-container\n                *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n              >\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              </ng-container>\n            </cdk-virtual-scroll-viewport>\n          } @else {\n            <div\n              class=\"td-tabla__viewport td-tabla__viewport--normal\"\n              [style.height]=\"altura\"\n              (scroll)=\"alDesplazarLista($event)\"\n              (wheel)=\"marcarScrollUsuario()\"\n              (touchmove)=\"marcarScrollUsuario()\"\n              (keydown.arrowdown)=\"marcarScrollUsuario()\"\n              (keydown.pagedown)=\"marcarScrollUsuario()\"\n              (keydown.end)=\"marcarScrollUsuario()\"\n            >\n              @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n                <ng-container\n                  [ngTemplateOutlet]=\"filaTemplate\"\n                  [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n                />\n              }\n            </div>\n          }\n        </div>\n      </div>\n\n      <ng-template #filaTemplate let-fila let-indice=\"indice\">\n        <div\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n        >\n            @for (columna of columnas; track columna.clave) {\n              <div\n                role=\"cell\"\n                [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n              >\n                @if (columna.tipo === 'imagen') {\n                  @if (imagenSrc(columna, fila, indice); as src) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n                      [title]=\"imagenAlt(columna, fila, indice)\"\n                      (click)=\"abrirImagen(columna, fila, indice)\"\n                    >\n                      <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n                    </button>\n                  } @else {\n                    <span\n                      [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n                    >\n                      <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n                    </span>\n                  }\n                } @else if (\n                  columna.tipo === 'estado' ||\n                  columna.tipo === 'booleano' ||\n                  columna.tipo === 'chip'\n                ) {\n                  <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                } @else {\n                  <span\n                    [class.td-tabla__numero]=\"\n                      columna.tipo === 'numero' ||\n                      columna.tipo === 'decimal' ||\n                      columna.tipo === 'moneda' ||\n                      columna.tipo === 'porcentaje'\n                    \"\n                  >\n                    {{ textoCelda(columna, fila, indice) }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (acciones.length) {\n              <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n                @if (usarMenuAcciones(fila)) {\n                  <td-menu\n                    ariaLabel=\"Acciones de fila\"\n                    icono=\"more_vertical\"\n                    ancho=\"15rem\"\n                    [oscuro]=\"oscuro\"\n                    [items]=\"accionesMenu(fila)\"\n                    (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n                  />\n                } @else {\n                  @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                    <button\n                      type=\"button\"\n                      [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                      [title]=\"accionFila.etiqueta\"\n                      [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                      (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                    >\n                      <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                      <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n      </ng-template>\n\n      @if (cargando) {\n        <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n          <i aria-hidden=\"true\"></i>\n          <span>Cargando m\u00E1s registros...</span>\n        </div>\n      }\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n  <dialog\n    #imagenDialog\n    class=\"td-tabla-imagen\"\n    [attr.aria-label]=\"imagen.alt\"\n    (click)=\"cerrarImagenSiBackdrop($event)\"\n    (cancel)=\"cerrarImagen()\"\n    (close)=\"imagenActiva = null\"\n  >\n    <section class=\"td-tabla-imagen__panel\">\n      <header>\n        <span>{{ imagen.alt }}</span>\n        <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n          <td-icon nombre=\"close\" />\n        </button>\n      </header>\n      <div>\n        <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n      </div>\n    </section>\n  </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla{contain:none}.td-tabla__toolbar{align-items:stretch;flex-direction:column;gap:.75rem;padding:.45rem 0 .85rem}.td-tabla__filtros{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}.td-tabla__filtros ::ng-deep>*,.td-tabla__busqueda{width:100%;min-width:0}.td-tabla__busqueda{min-height:3rem;border-radius:var(--td-radius-lg, .9rem)}.td-tabla__superficie{border-radius:var(--td-radius-lg, .9rem)}.td-tabla__resumen{align-items:stretch;flex-direction:column;gap:.65rem;padding:.85rem}.td-tabla__resumen-acciones{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.55rem}.td-tabla__resumen-acciones ::ng-deep>*,.td-tabla__boton{width:100%;min-width:0}.td-tabla__boton{height:2.45rem;justify-content:center;padding:0 .75rem}.td-tabla__boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-tabla__scroll-x{box-shadow:inset -18px 0 18px -22px color-mix(in srgb,var(--texto) 45%,transparent)}.td-tabla__contenido{min-width:max(46rem,max-content)}.td-tabla__encabezado{min-height:2.6rem;font-size:.58rem;letter-spacing:.06em}.td-tabla__encabezado>div,.td-tabla__celda{padding-inline:.75rem}.td-tabla__viewport{min-height:18rem}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}@media(max-width:420px){.td-tabla__resumen-acciones{grid-template-columns:minmax(0,1fr)}.td-tabla__contenido{min-width:max(42rem,max-content)}}\n"] }]
         }], propDecorators: { viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -2776,11 +3449,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
 
 class TdDialogActions {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: TdDialogActions, isStandalone: true, selector: "td-dialog-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;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{bottom:-1.1rem;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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: TdDialogActions, isStandalone: true, selector: "td-dialog-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;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 td-button{display:inline-block;min-width:0}: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{bottom:-1.1rem;display:grid;grid-auto-flow:row;grid-auto-rows:minmax(2.45rem,auto);grid-template-columns:minmax(0,1fr);min-height:auto;align-items:stretch;justify-content:stretch;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.75rem 1.1rem;gap:.55rem}:host ::ng-deep td-button{display:block;width:100%}:host ::ng-deep td-button:last-of-type{order:-1}:host ::ng-deep button,:host ::ng-deep td-button .td-button{width:100%;min-height:2.45rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogActions, decorators: [{
             type: Component,
-            args: [{ selector: 'td-dialog-actions', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;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{bottom:-1.1rem;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"] }]
+            args: [{ selector: 'td-dialog-actions', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;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 td-button{display:inline-block;min-width:0}: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{bottom:-1.1rem;display:grid;grid-auto-flow:row;grid-auto-rows:minmax(2.45rem,auto);grid-template-columns:minmax(0,1fr);min-height:auto;align-items:stretch;justify-content:stretch;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.75rem 1.1rem;gap:.55rem}:host ::ng-deep td-button{display:block;width:100%}:host ::ng-deep td-button:last-of-type{order:-1}:host ::ng-deep button,:host ::ng-deep td-button .td-button{width:100%;min-height:2.45rem}}\n"] }]
         }] });
 
 class TdDialogClose {
@@ -7089,5 +7762,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdBadge, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileUpload, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdRadioGroup, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TdTooltip, TelcomdevUi, createTdFormControlBridge };
+export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlert, TdAlerta, TdAutocompleteSelect, TdBadge, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileUpload, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdRadioGroup, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TdTooltip, TelcomdevUi, createTdFormControlBridge };
 //# sourceMappingURL=telcomdev-ui.mjs.map