@telcomdev/ui 0.0.8 → 0.0.10

package/fesm2022/telcomdev-ui.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, HostListener, Directive, DestroyRef, TemplateRef, ViewChildren, ContentChildren } from '@angular/core';
+import { Component, inject, Injector, ChangeDetectorRef, signal, Injectable, HostBinding, Input, ChangeDetectionStrategy, input, model, output, computed, forwardRef, ViewChild, EventEmitter, Output, InjectionToken, HostListener, Directive, DestroyRef, TemplateRef, ViewChildren, ContentChildren } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { FORM_FIELD } from '@angular/forms/signals';
 import * as i2 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import * as i1 from '@angular/forms';
-import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ScrollStrategyOptions, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { FORM_FIELD } from '@angular/forms/signals';
 import { DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 import { NgComponentOutlet, DOCUMENT, NgTemplateOutlet } from '@angular/common';
 import { RouterLink, RouterLinkActive } from '@angular/router';
@@ -365,6 +365,44 @@ class TdAlerta {
     }
 }
 
+/**
+ * Puente reutilizable entre Signal Forms y ControlValueAccessor.
+ *
+ * Los inputs del contrato se declaran en cada componente porque el compilador
+ * de Signal Forms de Angular 21 necesita encontrarlos directamente allí.
+ */
+function createTdFormControlBridge() {
+    const injector = inject(Injector);
+    const cdr = inject(ChangeDetectorRef);
+    const cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
+    let onCvaTouched = () => undefined;
+    const usesSignalForms = () => !!injector.get(FORM_FIELD, null, { self: true, optional: true });
+    return {
+        get usesSignalForms() {
+            return usesSignalForms();
+        },
+        isDisabled(fieldDisabled) {
+            return usesSignalForms() ? fieldDisabled : fieldDisabled || cvaDisabled();
+        },
+        registerOnTouched(fn) {
+            onCvaTouched = fn;
+        },
+        setDisabledState(disabled) {
+            if (!usesSignalForms())
+                cvaDisabled.set(disabled);
+            cdr.markForCheck();
+        },
+        markTouched(touched, touch) {
+            // Angular prioriza el CVA cuando el control también publica NG_VALUE_ACCESSOR,
+            // incluso si está enlazado mediante [formField]. Mantener esta llamada permite
+            // que Signal Forms marque el field como touched sin perder compatibilidad clásica.
+            onCvaTouched();
+            touched.set(true);
+            touch.emit();
+        },
+    };
+}
+
 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',
@@ -700,6 +738,201 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 args: ['style.--td-icon-size']
             }] } });
 
+let checkboxSequence = 0;
+class TdCheckbox {
+    cdr = inject(ChangeDetectorRef);
+    formBridge = createTdFormControlBridge();
+    generatedId = `td-checkbox-${++checkboxSequence}`;
+    nativeInput;
+    id = input('', ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    label = input('Opción', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    dark = input(false, ...(ngDevMode ? [{ debugName: "dark" }] : /* istanbul ignore next */ []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    pending = input(false, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
+    dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
+    touch = output();
+    error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    displayError = computed(() => this.error() || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
+    hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    get inputId() {
+        return this.id() || this.generatedId;
+    }
+    get descriptionId() {
+        return this.displayError() || this.hint()
+            ? `${this.inputId}-description`
+            : null;
+    }
+    onChange = () => undefined;
+    writeValue(value) {
+        this.checked.set(value === true);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.formBridge.registerOnTouched(fn);
+    }
+    setDisabledState(disabled) {
+        this.formBridge.setDisabledState(disabled);
+    }
+    focus(options) {
+        this.nativeInput?.nativeElement.focus(options);
+    }
+    handleChange(event) {
+        if (this.readonly()) {
+            event.target.checked = this.checked();
+            return;
+        }
+        const checked = event.target.checked === true;
+        this.checked.set(checked);
+        this.onChange(checked);
+    }
+    handleClick(event) {
+        if (!this.readonly())
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    handleBlur() {
+        this.formBridge.markTouched(this.touched, this.touch);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdCheckbox, isStandalone: true, selector: "td-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", checked: "checkedChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TdCheckbox),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true }], ngImport: i0, template: `
+    <label
+      class="td-checkbox"
+      [class.td-checkbox--checked]="checked()"
+      [class.td-checkbox--disabled]="isDisabled()"
+      [class.td-checkbox--readonly]="readonly()"
+      [class.td-checkbox--error]="hasError()"
+      [class.td-checkbox--dark]="dark()"
+      [for]="inputId"
+    >
+      <input
+        #nativeInput
+        [id]="inputId"
+        [name]="name()"
+        type="checkbox"
+        [checked]="checked()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [attr.aria-readonly]="readonly()"
+        [attr.aria-invalid]="hasError()"
+        [attr.aria-describedby]="descriptionId"
+        (change)="handleChange($event)"
+        (blur)="handleBlur()"
+        (click)="handleClick($event)"
+      />
+
+      <span class="td-checkbox__box" aria-hidden="true">
+        @if (checked()) {
+          <td-icon nombre="check" tamano=".9rem" />
+        }
+      </span>
+
+      <span class="td-checkbox__content">
+        <span class="td-checkbox__label">{{ label() }}</span>
+        @if (description()) {
+          <span class="td-checkbox__description">{{ description() }}</span>
+        }
+      </span>
+    </label>
+
+    @if (displayError() || hint()) {
+      <p
+        class="td-checkbox__message"
+        [class.td-checkbox__message--error]="hasError()"
+        [id]="descriptionId"
+      >
+        {{ displayError() || hint() }}
+      </p>
+    }
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: #fff;--td-checkbox-border: #cfd5e1;--td-checkbox-text: #263147;--td-checkbox-muted: #748096;display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: #19191f;--td-checkbox-border: #555563;--td-checkbox-text: #ededf0;--td-checkbox-muted: #a1a1aa;color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius:.38rem;color:#fff;background:var(--td-checkbox-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-checkbox:hover:not(.td-checkbox--disabled):not(.td-checkbox--readonly) .td-checkbox__box{border-color:#5746d8}.td-checkbox--checked .td-checkbox__box{border-color:#5746d8;background:#5746d8}input:focus-visible+.td-checkbox__box{border-color:#5746d8;box-shadow:0 0 0 3px #5746d829}input:active+.td-checkbox__box{transform:scale(.94)}.td-checkbox--error .td-checkbox__box{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-checkbox--disabled{opacity:.56;cursor:not-allowed}.td-checkbox--readonly{cursor:default}.td-checkbox__content{display:grid;min-width:0;gap:.15rem}.td-checkbox__label{font-size:.78rem;font-weight:700;line-height:1.35}.td-checkbox__description{color:var(--td-checkbox-muted);font-size:.68rem;line-height:1.4}.td-checkbox__message{margin:.35rem 0 0 1.97rem;color:#748096;font-size:.66rem;line-height:1.4}.td-checkbox__message--error{color:#c43636}.td-checkbox--dark+.td-checkbox__message{color:#a1a1aa}.td-checkbox--dark+.td-checkbox__message--error{color:#f28b8b}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdCheckbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-checkbox', imports: [TdIcon], template: `
+    <label
+      class="td-checkbox"
+      [class.td-checkbox--checked]="checked()"
+      [class.td-checkbox--disabled]="isDisabled()"
+      [class.td-checkbox--readonly]="readonly()"
+      [class.td-checkbox--error]="hasError()"
+      [class.td-checkbox--dark]="dark()"
+      [for]="inputId"
+    >
+      <input
+        #nativeInput
+        [id]="inputId"
+        [name]="name()"
+        type="checkbox"
+        [checked]="checked()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [attr.aria-readonly]="readonly()"
+        [attr.aria-invalid]="hasError()"
+        [attr.aria-describedby]="descriptionId"
+        (change)="handleChange($event)"
+        (blur)="handleBlur()"
+        (click)="handleClick($event)"
+      />
+
+      <span class="td-checkbox__box" aria-hidden="true">
+        @if (checked()) {
+          <td-icon nombre="check" tamano=".9rem" />
+        }
+      </span>
+
+      <span class="td-checkbox__content">
+        <span class="td-checkbox__label">{{ label() }}</span>
+        @if (description()) {
+          <span class="td-checkbox__description">{{ description() }}</span>
+        }
+      </span>
+    </label>
+
+    @if (displayError() || hint()) {
+      <p
+        class="td-checkbox__message"
+        [class.td-checkbox__message--error]="hasError()"
+        [id]="descriptionId"
+      >
+        {{ displayError() || hint() }}
+      </p>
+    }
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TdCheckbox),
+                            multi: true,
+                        },
+                    ], host: {
+                        '[hidden]': 'hidden()',
+                        '[attr.aria-busy]': 'pending() ? "true" : null',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: #fff;--td-checkbox-border: #cfd5e1;--td-checkbox-text: #263147;--td-checkbox-muted: #748096;display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: #19191f;--td-checkbox-border: #555563;--td-checkbox-text: #ededf0;--td-checkbox-muted: #a1a1aa;color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius:.38rem;color:#fff;background:var(--td-checkbox-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-checkbox:hover:not(.td-checkbox--disabled):not(.td-checkbox--readonly) .td-checkbox__box{border-color:#5746d8}.td-checkbox--checked .td-checkbox__box{border-color:#5746d8;background:#5746d8}input:focus-visible+.td-checkbox__box{border-color:#5746d8;box-shadow:0 0 0 3px #5746d829}input:active+.td-checkbox__box{transform:scale(.94)}.td-checkbox--error .td-checkbox__box{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-checkbox--disabled{opacity:.56;cursor:not-allowed}.td-checkbox--readonly{cursor:default}.td-checkbox__content{display:grid;min-width:0;gap:.15rem}.td-checkbox__label{font-size:.78rem;font-weight:700;line-height:1.35}.td-checkbox__description{color:var(--td-checkbox-muted);font-size:.68rem;line-height:1.4}.td-checkbox__message{margin:.35rem 0 0 1.97rem;color:#748096;font-size:.66rem;line-height:1.4}.td-checkbox__message--error{color:#c43636}.td-checkbox--dark+.td-checkbox__message{color:#a1a1aa}.td-checkbox--dark+.td-checkbox__message--error{color:#f28b8b}\n"] }]
+        }], propDecorators: { nativeInput: [{
+                type: ViewChild,
+                args: ['nativeInput']
+            }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], dark: [{ type: i0.Input, args: [{ isSignal: true, alias: "dark", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }] } });
+
 class TdDataTable {
     viewport;
     datos = [];
@@ -812,11 +1045,11 @@ class TdDataTable {
     }
     trackFila = (_indice, fila) => fila[this.campoId] ?? fila;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        @if (cargando) {\n          <span class=\"td-tabla__cargando-inline\"><i></i> Cargando...</span>\n        }\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                  <button\n                    type=\"button\"\n                    [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                    [title]=\"accionFila.etiqueta\"\n                  [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                  (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                  >\n                    <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                  <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando-inline{display:flex;align-items:center;gap:.4rem}.td-tabla__cargando-inline i{width:.65rem;height:.65rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                  <button\n                    type=\"button\"\n                    [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                    [title]=\"accionFila.etiqueta\"\n                  [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                  (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                  >\n                    <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                  <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n\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", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{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:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, decorators: [{
             type: Component,
-            args: [{ selector: 'td-data-table', imports: [FormsModule, ScrollingModule, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        @if (cargando) {\n          <span class=\"td-tabla__cargando-inline\"><i></i> Cargando...</span>\n        }\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                  <button\n                    type=\"button\"\n                    [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                    [title]=\"accionFila.etiqueta\"\n                  [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                  (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                  >\n                    <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                  <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n    } @else if (!cargando) {\n      <div class=\"td-tabla__vacio\">\n        <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n        <h3>{{ textoVacio }}</h3>\n        <p>{{ descripcionVacio }}</p>\n      </div>\n    }\n\n    @if (cargando && !datos.length) {\n      <div class=\"td-tabla__skeleton\">\n        @for (item of [1, 2, 3, 4, 5]; track item) {\n          <span></span>\n        }\n      </div>\n    }\n  </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando-inline{display:flex;align-items:center;gap:.4rem}.td-tabla__cargando-inline i{width:.65rem;height:.65rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"] }]
+            args: [{ selector: 'td-data-table', imports: [FormsModule, ScrollingModule, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n  <div class=\"td-tabla__toolbar\">\n    <div class=\"td-tabla__filtros\">\n      @if (mostrarBusqueda) {\n        <label class=\"td-tabla__busqueda\">\n          <td-icon nombre=\"search\" />\n          <input\n            type=\"search\"\n            [(ngModel)]=\"busqueda\"\n            [placeholder]=\"placeholderBusqueda\"\n            (input)=\"buscar()\"\n          />\n          @if (busqueda) {\n            <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n              <td-icon nombre=\"close\" tamano=\"1rem\" />\n            </button>\n          }\n        </label>\n      }\n      <ng-content select=\"[tdDataTableFilters]\" />\n    </div>\n  </div>\n\n  <div class=\"td-tabla__superficie\">\n    <div class=\"td-tabla__resumen\">\n      <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n      <div class=\"td-tabla__resumen-acciones\">\n        <ng-content select=\"[tdDataTableActions]\" />\n        @for (boton of botonesVisibles(); track boton.id) {\n          <button\n            type=\"button\"\n            [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n            [disabled]=\"boton.deshabilitado\"\n            (click)=\"botonClick.emit(boton)\"\n          >\n            <td-icon [nombre]=\"boton.icono\" />\n            <span>{{ boton.etiqueta }}</span>\n          </button>\n        }\n      </div>\n    </div>\n\n    @if (datos.length) {\n      <div\n        class=\"td-tabla__encabezado\"\n        role=\"row\"\n        [style.grid-template-columns]=\"columnasGrid()\"\n      >\n        @for (columna of columnas; track columna.clave) {\n          <div\n            role=\"columnheader\"\n            [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n          >\n            {{ columna.encabezado }}\n          </div>\n        }\n        @if (acciones.length) {\n          <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n        }\n      </div>\n\n      <cdk-virtual-scroll-viewport\n        class=\"td-tabla__viewport\"\n        [itemSize]=\"itemSize\"\n        [style.height]=\"altura\"\n        (scrolledIndexChange)=\"alCambiarIndice()\"\n      >\n        <div\n          *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n          class=\"td-tabla__fila\"\n          role=\"row\"\n          [style.height.px]=\"itemSize\"\n          [style.grid-template-columns]=\"columnasGrid()\"\n        >\n          @for (columna of columnas; track columna.clave) {\n            <div\n              role=\"cell\"\n              [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n            >\n              @if (\n                columna.tipo === 'estado' ||\n                columna.tipo === 'booleano' ||\n                columna.tipo === 'chip'\n              ) {\n                <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              } @else {\n                <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n                  {{ textoCelda(columna, fila, indice) }}\n                </span>\n              }\n            </div>\n          }\n\n          @if (acciones.length) {\n            <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n              @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n                  <button\n                    type=\"button\"\n                    [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n                    [title]=\"accionFila.etiqueta\"\n                  [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n                  (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n                  >\n                    <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n                  <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n                </button>\n              }\n            </div>\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n\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", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{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:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"] }]
         }], propDecorators: { viewport: [{
                 type: ViewChild,
                 args: [CdkVirtualScrollViewport]
@@ -864,44 +1097,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Output
             }] } });
 
-/**
- * Puente reutilizable entre Signal Forms y ControlValueAccessor.
- *
- * Los inputs del contrato se declaran en cada componente porque el compilador
- * de Signal Forms de Angular 21 necesita encontrarlos directamente allí.
- */
-function createTdFormControlBridge() {
-    const injector = inject(Injector);
-    const cdr = inject(ChangeDetectorRef);
-    const cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    let onCvaTouched = () => undefined;
-    const usesSignalForms = () => !!injector.get(FORM_FIELD, null, { self: true, optional: true });
-    return {
-        get usesSignalForms() {
-            return usesSignalForms();
-        },
-        isDisabled(fieldDisabled) {
-            return usesSignalForms() ? fieldDisabled : fieldDisabled || cvaDisabled();
-        },
-        registerOnTouched(fn) {
-            onCvaTouched = fn;
-        },
-        setDisabledState(disabled) {
-            if (!usesSignalForms())
-                cvaDisabled.set(disabled);
-            cdr.markForCheck();
-        },
-        markTouched(touched, touch) {
-            // Angular prioriza el CVA cuando el control también publica NG_VALUE_ACCESSOR,
-            // incluso si está enlazado mediante [formField]. Mantener esta llamada permite
-            // que Signal Forms marque el field como touched sin perder compatibilidad clásica.
-            onCvaTouched();
-            touched.set(true);
-            touch.emit();
-        },
-    };
-}
-
 let datePickerSequence = 0;
 class TdDatePicker {
     cdr = inject(ChangeDetectorRef);
@@ -1998,8 +2193,8 @@ class TdInput {
     cdr = inject(ChangeDetectorRef);
     formBridge = createTdFormControlBridge();
     generatedId = `td-input-${++inputSequence}`;
-    legacyMinLength = null;
-    legacyMaxLength = null;
+    legacyMinLength = signal(null, ...(ngDevMode ? [{ debugName: "legacyMinLength" }] : /* istanbul ignore next */ []));
+    legacyMaxLength = signal(null, ...(ngDevMode ? [{ debugName: "legacyMaxLength" }] : /* istanbul ignore next */ []));
     receivedNullValue = false;
     nativeInput;
     id = '';
@@ -2024,6 +2219,7 @@ class TdInput {
     error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
     clearable = false;
     dark = false;
+    showCounter = input(true, ...(ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []));
     emptyValue = 'auto';
     minValue = input(undefined, { ...(ngDevMode ? { debugName: "minValue" } : /* istanbul ignore next */ {}), alias: 'min' });
     maxValue = input(undefined, { ...(ngDevMode ? { debugName: "maxValue" } : /* istanbul ignore next */ {}), alias: 'max' });
@@ -2032,17 +2228,26 @@ class TdInput {
     pattern = input([], ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
     step = null;
     set minlength(value) {
-        this.legacyMinLength = value;
+        this.legacyMinLength.set(value);
     }
     set maxlength(value) {
-        this.legacyMaxLength = value;
+        this.legacyMaxLength.set(value);
     }
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
     isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
     displayError = computed(() => this.error() || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
     hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-    resolvedMinLength = computed(() => this.minLength() ?? this.legacyMinLength, ...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
-    resolvedMaxLength = computed(() => this.maxLength() ?? this.legacyMaxLength, ...(ngDevMode ? [{ debugName: "resolvedMaxLength" }] : /* istanbul ignore next */ []));
+    resolvedMinLength = computed(() => this.minLength() ?? this.legacyMinLength(), ...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
+    resolvedMaxLength = computed(() => this.maxLength() ?? this.legacyMaxLength(), ...(ngDevMode ? [{ debugName: "resolvedMaxLength" }] : /* istanbul ignore next */ []));
+    currentLength = computed(() => String(this.value() ?? '').length, ...(ngDevMode ? [{ debugName: "currentLength" }] : /* istanbul ignore next */ []));
+    counterVisible = computed(() => this.showCounter() && this.resolvedMaxLength() !== null &&
+        this.resolvedMaxLength() !== undefined, ...(ngDevMode ? [{ debugName: "counterVisible" }] : /* istanbul ignore next */ []));
+    counterAtLimit = computed(() => {
+        const maxLength = this.resolvedMaxLength();
+        return maxLength !== null && maxLength !== undefined &&
+            this.currentLength() >= maxLength;
+    }, ...(ngDevMode ? [{ debugName: "counterAtLimit" }] : /* istanbul ignore next */ []));
+    hasSupportingContent = computed(() => !!this.displayError() || !!this.hint || this.counterVisible(), ...(ngDevMode ? [{ debugName: "hasSupportingContent" }] : /* istanbul ignore next */ []));
     resolvedPattern = computed(() => {
         const patterns = this.pattern();
         if (!patterns.length)
@@ -2057,7 +2262,7 @@ class TdInput {
         return this.id || this.generatedId;
     }
     get descriptionId() {
-        return this.displayError() || this.hint ? `${this.inputId}-description` : null;
+        return this.hasSupportingContent() ? `${this.inputId}-description` : null;
     }
     get resolvedType() {
         return this.type === 'password' && this.passwordVisible ? 'text' : this.type;
@@ -2125,7 +2330,7 @@ class TdInput {
         this.onChange(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdInput),
@@ -2189,16 +2394,30 @@ class TdInput {
       </div>
     </div>
 
-    @if (displayError() || hint) {
-      <p
-        class="td-input__message"
-        [class.td-input__message--error]="hasError()"
-        [id]="descriptionId"
-      >
-        {{ displayError() || hint }}
-      </p>
+    @if (hasSupportingContent()) {
+      <div class="td-input__support" [id]="descriptionId">
+        @if (displayError() || hint) {
+          <p
+            class="td-input__message"
+            [class.td-input__message--error]="hasError()"
+          >
+            {{ displayError() || hint }}
+          </p>
+        } @else {
+          <span class="td-input__message" aria-hidden="true"></span>
+        }
+
+        @if (counterVisible()) {
+          <span
+            class="td-input__counter"
+            [class.td-input__counter--limit]="counterAtLimit()"
+          >
+            {{ currentLength() }}/{{ resolvedMaxLength() }}
+          </span>
+        }
+      </div>
     }
-  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-input__message{min-width:0;flex:1 1 auto;margin:0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}.td-input__counter{flex:0 0 auto;color:#748096;font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:#5746d8;font-weight:700}.td-input--dark+.td-input__support .td-input__message,.td-input--dark+.td-input__support .td-input__counter{color:#a1a1aa}.td-input--dark+.td-input__support .td-input__message--error{color:#f28b8b}.td-input--dark+.td-input__support .td-input__counter--limit{color:#b9b0fa}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, decorators: [{
             type: Component,
@@ -2260,14 +2479,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
     </div>
 
-    @if (displayError() || hint) {
-      <p
-        class="td-input__message"
-        [class.td-input__message--error]="hasError()"
-        [id]="descriptionId"
-      >
-        {{ displayError() || hint }}
-      </p>
+    @if (hasSupportingContent()) {
+      <div class="td-input__support" [id]="descriptionId">
+        @if (displayError() || hint) {
+          <p
+            class="td-input__message"
+            [class.td-input__message--error]="hasError()"
+          >
+            {{ displayError() || hint }}
+          </p>
+        } @else {
+          <span class="td-input__message" aria-hidden="true"></span>
+        }
+
+        @if (counterVisible()) {
+          <span
+            class="td-input__counter"
+            [class.td-input__counter--limit]="counterAtLimit()"
+          >
+            {{ currentLength() }}/{{ resolvedMaxLength() }}
+          </span>
+        }
+      </div>
     }
   `, providers: [
                         {
@@ -2278,7 +2511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ], host: {
                         '[hidden]': 'hidden()',
                         '[attr.aria-busy]': 'pending() ? "true" : null',
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-input__message{min-width:0;flex:1 1 auto;margin:0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}.td-input__counter{flex:0 0 auto;color:#748096;font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:#5746d8;font-weight:700}.td-input--dark+.td-input__support .td-input__message,.td-input--dark+.td-input__support .td-input__counter{color:#a1a1aa}.td-input--dark+.td-input__support .td-input__message--error{color:#f28b8b}.td-input--dark+.td-input__support .td-input__counter--limit{color:#b9b0fa}\n"] }]
         }], propDecorators: { nativeInput: [{
                 type: ViewChild,
                 args: ['nativeInput']
@@ -2300,7 +2533,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], dark: [{
                 type: Input
-            }], emptyValue: [{
+            }], showCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounter", required: false }] }], emptyValue: [{
                 type: Input
             }], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], step: [{
                 type: Input
@@ -3589,5 +3822,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdAutocompleteSelect, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TelcomdevUi, createTdFormControlBridge };
+export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdAutocompleteSelect, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TelcomdevUi, createTdFormControlBridge };
 //# sourceMappingURL=telcomdev-ui.mjs.map