@telcomdev/ui 0.0.7 → 0.0.9

package/fesm2022/telcomdev-ui.mjs

@@ -1,10 +1,11 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, ChangeDetectorRef, input, output, model, signal, computed, forwardRef, InjectionToken, HostListener, Directive, DestroyRef, TemplateRef, ViewChildren, ContentChildren } 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 * 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';
@@ -863,9 +864,48 @@ 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);
+    formBridge = createTdFormControlBridge();
     scrollStrategies = inject(ScrollStrategyOptions);
     generatedId = `td-date-picker-${++datePickerSequence}`;
     formatter = new Intl.DateTimeFormat('es-PE', {
@@ -887,20 +927,26 @@ class TdDatePicker {
     placeholder = 'Selecciona una fecha';
     mode = 'fecha';
     hint = '';
-    error = '';
-    minDate = null;
-    maxDate = null;
+    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 */ []));
+    minDate = null;
+    maxDate = null;
     clearable = true;
     dark = false;
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    displayError = computed(() => this.error || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* 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 */ []));
     selectionChange = new EventEmitter();
     openedChange = new EventEmitter();
@@ -1007,7 +1053,6 @@ class TdDatePicker {
         return this.currentRange()?.fin ? this.format(this.currentRange().fin) : 'Sin elegir';
     }
     changed = () => undefined;
-    onCvaTouched = () => undefined;
     writeValue(value) {
         this.value.set(this.normalizeValue(value));
         this.syncViewToValue();
@@ -1017,11 +1062,10 @@ class TdDatePicker {
         this.changed = fn;
     }
     registerOnTouched(fn) {
-        this.onCvaTouched = fn;
+        this.formBridge.registerOnTouched(fn);
     }
     setDisabledState(disabled) {
-        this.cvaDisabled.set(disabled);
-        this.cdr.markForCheck();
+        this.formBridge.setDisabledState(disabled);
     }
     focus() {
         document.getElementById(this.labelId)?.parentElement?.querySelector('button')?.focus();
@@ -1044,8 +1088,7 @@ class TdDatePicker {
             return;
         this.open = false;
         this.hoveredDate = null;
-        this.onCvaTouched();
-        this.touch.emit();
+        this.formBridge.markTouched(this.touched, this.touch);
         this.openedChange.emit(false);
     }
     previousPage() {
@@ -1224,7 +1267,7 @@ class TdDatePicker {
             (typeof this.maxDate === 'string' && first > this.maxDate));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDatePicker, isStandalone: true, selector: "td-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", 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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", value: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDatePicker, isStandalone: true, selector: "td-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", 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 }, minDate: { classPropertyName: "minDate", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdDatePicker),
@@ -1245,6 +1288,9 @@ class TdDatePicker {
         type="button"
         class="td-date-picker__trigger"
         [disabled]="isDisabled()"
+        [attr.aria-readonly]="readonly()"
+        [attr.aria-required]="required()"
+        [attr.aria-invalid]="hasError()"
         [attr.aria-labelledby]="labelId"
         [attr.aria-expanded]="open"
         [attr.aria-controls]="calendarId"
@@ -1415,6 +1461,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         type="button"
         class="td-date-picker__trigger"
         [disabled]="isDisabled()"
+        [attr.aria-readonly]="readonly()"
+        [attr.aria-required]="required()"
+        [attr.aria-invalid]="hasError()"
         [attr.aria-labelledby]="labelId"
         [attr.aria-expanded]="open"
         [attr.aria-controls]="calendarId"
@@ -1572,7 +1621,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => TdDatePicker),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-date-picker{--td-date-bg: #fff;--td-date-border: #dfe3eb;--td-date-text: #263147;--td-date-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius:.78rem;background:var(--td-date-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-date-picker--dark{--td-date-bg: #19191f;--td-date-border: #34343e;--td-date-text: #ededf0;--td-date-muted: #a1a1aa}.td-date-picker:hover:not(.td-date-picker--disabled){border-color:#8d80e8}.td-date-picker--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-date-picker--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-date-picker--disabled{opacity:.58;background:#f5f6f8}.td-date-picker>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;padding:0 .35rem;color:var(--td-date-muted);background:var(--td-date-bg);font-size:.65rem;font-weight:750;line-height:1}.td-date-picker--open>label{color:#5746d8}.td-date-picker--error>label{color:#d33f3f}.td-date-picker__trigger{display:flex;width:100%;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-date-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-date-picker__trigger>span:not(.td-date-picker__clear){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-date-picker__placeholder{color:color-mix(in srgb,var(--td-date-muted) 72%,transparent)}.td-date-picker__trigger>td-icon{color:var(--td-date-muted)}.td-date-picker__chevron{transition:transform .14s ease}.td-date-picker__chevron--open{transform:rotate(180deg)}.td-date-picker__clear{display:grid;width:1.8rem;height:1.8rem;flex:0 0 auto;place-items:center;border-radius:.45rem;color:var(--td-date-muted)}.td-date-picker__clear:hover{color:#5746d8;background:#f2f0ff}.td-date-picker__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem}.td-date-picker__message--error{color:#c43636}.td-calendar{width:min(21rem,100vw - 1rem);overflow:hidden;border:1px solid #e1e5ee;border-radius:1rem;padding:.8rem;color:#263147;background:#fff;box-shadow:0 22px 55px #0f172a33;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-calendar-in .14s ease-out}.td-calendar--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-calendar__header{display:grid;grid-template-columns:2.35rem 1fr 2.35rem;align-items:center;gap:.35rem}.td-calendar__header button,.td-calendar__footer button{border:0;color:inherit;background:transparent;cursor:pointer}.td-calendar__header button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.65rem}.td-calendar__header .td-calendar__period{display:inline-flex;width:auto;min-width:0;height:2.35rem;align-items:center;justify-content:center;gap:.35rem;padding:0 .65rem;font-size:.82rem;font-weight:800}.td-calendar__header button:hover{color:#5746d8;background:#f2f0ff}.td-calendar--dark .td-calendar__header button:hover{background:#2b293d}.td-calendar__range-summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.55rem;margin:.65rem 0 .35rem;border-radius:.72rem;padding:.55rem .65rem;background:#f7f7fb}.td-calendar--dark .td-calendar__range-summary{background:#292931}.td-calendar__range-summary span{min-width:0}.td-calendar__range-summary span:last-child{text-align:right}.td-calendar__range-summary small,.td-calendar__range-summary strong{display:block}.td-calendar__range-summary small{color:#748096;font-size:.58rem}.td-calendar__range-summary strong{overflow:hidden;margin-top:.12rem;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.td-calendar__weekdays,.td-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.td-calendar__weekdays{margin-top:.55rem}.td-calendar__weekdays span{padding:.35rem 0;color:#8791a4;font-size:.59rem;font-weight:800;text-align:center}.td-calendar__day{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:0;border-radius:.6rem;color:inherit;background:transparent;font:650 .7rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__day:hover:not(:disabled){color:#5746d8;background:#f0eeff}.td-calendar__day--outside{color:#b4bac6}.td-calendar__day--today{box-shadow:inset 0 0 0 1px #8d80e8}.td-calendar__day--range{border-radius:0;color:#5746d8;background:#efedff}.td-calendar__day--selected,.td-calendar__day--range-start,.td-calendar__day--range-end{border-radius:.6rem;color:#fff;background:#5746d8;box-shadow:0 5px 12px #5746d83d}.td-calendar__day:disabled{opacity:.3;cursor:not-allowed}.td-calendar__selector-grid{display:grid;min-height:15.75rem;align-content:center;gap:.45rem;padding:.75rem .15rem}.td-calendar__selector-grid--months,.td-calendar__selector-grid--years{grid-template-columns:repeat(3,minmax(0,1fr))}.td-calendar__selector-grid button{min-height:3.15rem;border:0;border-radius:.7rem;color:inherit;background:transparent;font:700 .72rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__selector-grid button:hover:not(:disabled){color:#5746d8;background:#f0eeff}.td-calendar--dark .td-calendar__selector-grid button:hover:not(:disabled){color:#b9b0fa;background:#2b293d}.td-calendar__selector-grid button:disabled{opacity:.28;cursor:not-allowed}.td-calendar__selector--active{color:#fff!important;background:#5746d8!important;box-shadow:0 5px 12px #5746d838}.td-calendar__selector--today:not(.td-calendar__selector--active){box-shadow:inset 0 0 0 1px #8d80e8}.td-calendar__footer{display:flex;justify-content:space-between;margin-top:.55rem;border-top:1px solid #e6e9f0;padding-top:.55rem}.td-calendar--dark .td-calendar__footer{border-color:#34343e}.td-calendar__text-action{border-radius:.5rem!important;padding:.45rem .6rem;color:#5746d8!important;font-size:.68rem;font-weight:750}.td-calendar__text-action:hover{background:#f2f0ff!important}@keyframes td-calendar-in{0%{opacity:0;transform:translateY(-.25rem) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.td-calendar{width:calc(100vw - 1rem);border-radius:.9rem}}@media(prefers-reduced-motion:reduce){.td-calendar{animation:none}}\n"] }]
+                    ], 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-date-picker{--td-date-bg: #fff;--td-date-border: #dfe3eb;--td-date-text: #263147;--td-date-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius:.78rem;background:var(--td-date-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-date-picker--dark{--td-date-bg: #19191f;--td-date-border: #34343e;--td-date-text: #ededf0;--td-date-muted: #a1a1aa}.td-date-picker:hover:not(.td-date-picker--disabled){border-color:#8d80e8}.td-date-picker--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-date-picker--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-date-picker--disabled{opacity:.58;background:#f5f6f8}.td-date-picker>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;padding:0 .35rem;color:var(--td-date-muted);background:var(--td-date-bg);font-size:.65rem;font-weight:750;line-height:1}.td-date-picker--open>label{color:#5746d8}.td-date-picker--error>label{color:#d33f3f}.td-date-picker__trigger{display:flex;width:100%;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-date-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-date-picker__trigger>span:not(.td-date-picker__clear){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-date-picker__placeholder{color:color-mix(in srgb,var(--td-date-muted) 72%,transparent)}.td-date-picker__trigger>td-icon{color:var(--td-date-muted)}.td-date-picker__chevron{transition:transform .14s ease}.td-date-picker__chevron--open{transform:rotate(180deg)}.td-date-picker__clear{display:grid;width:1.8rem;height:1.8rem;flex:0 0 auto;place-items:center;border-radius:.45rem;color:var(--td-date-muted)}.td-date-picker__clear:hover{color:#5746d8;background:#f2f0ff}.td-date-picker__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem}.td-date-picker__message--error{color:#c43636}.td-calendar{width:min(21rem,100vw - 1rem);overflow:hidden;border:1px solid #e1e5ee;border-radius:1rem;padding:.8rem;color:#263147;background:#fff;box-shadow:0 22px 55px #0f172a33;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-calendar-in .14s ease-out}.td-calendar--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-calendar__header{display:grid;grid-template-columns:2.35rem 1fr 2.35rem;align-items:center;gap:.35rem}.td-calendar__header button,.td-calendar__footer button{border:0;color:inherit;background:transparent;cursor:pointer}.td-calendar__header button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.65rem}.td-calendar__header .td-calendar__period{display:inline-flex;width:auto;min-width:0;height:2.35rem;align-items:center;justify-content:center;gap:.35rem;padding:0 .65rem;font-size:.82rem;font-weight:800}.td-calendar__header button:hover{color:#5746d8;background:#f2f0ff}.td-calendar--dark .td-calendar__header button:hover{background:#2b293d}.td-calendar__range-summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.55rem;margin:.65rem 0 .35rem;border-radius:.72rem;padding:.55rem .65rem;background:#f7f7fb}.td-calendar--dark .td-calendar__range-summary{background:#292931}.td-calendar__range-summary span{min-width:0}.td-calendar__range-summary span:last-child{text-align:right}.td-calendar__range-summary small,.td-calendar__range-summary strong{display:block}.td-calendar__range-summary small{color:#748096;font-size:.58rem}.td-calendar__range-summary strong{overflow:hidden;margin-top:.12rem;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.td-calendar__weekdays,.td-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.td-calendar__weekdays{margin-top:.55rem}.td-calendar__weekdays span{padding:.35rem 0;color:#8791a4;font-size:.59rem;font-weight:800;text-align:center}.td-calendar__day{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:0;border-radius:.6rem;color:inherit;background:transparent;font:650 .7rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__day:hover:not(:disabled){color:#5746d8;background:#f0eeff}.td-calendar__day--outside{color:#b4bac6}.td-calendar__day--today{box-shadow:inset 0 0 0 1px #8d80e8}.td-calendar__day--range{border-radius:0;color:#5746d8;background:#efedff}.td-calendar__day--selected,.td-calendar__day--range-start,.td-calendar__day--range-end{border-radius:.6rem;color:#fff;background:#5746d8;box-shadow:0 5px 12px #5746d83d}.td-calendar__day:disabled{opacity:.3;cursor:not-allowed}.td-calendar__selector-grid{display:grid;min-height:15.75rem;align-content:center;gap:.45rem;padding:.75rem .15rem}.td-calendar__selector-grid--months,.td-calendar__selector-grid--years{grid-template-columns:repeat(3,minmax(0,1fr))}.td-calendar__selector-grid button{min-height:3.15rem;border:0;border-radius:.7rem;color:inherit;background:transparent;font:700 .72rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__selector-grid button:hover:not(:disabled){color:#5746d8;background:#f0eeff}.td-calendar--dark .td-calendar__selector-grid button:hover:not(:disabled){color:#b9b0fa;background:#2b293d}.td-calendar__selector-grid button:disabled{opacity:.28;cursor:not-allowed}.td-calendar__selector--active{color:#fff!important;background:#5746d8!important;box-shadow:0 5px 12px #5746d838}.td-calendar__selector--today:not(.td-calendar__selector--active){box-shadow:inset 0 0 0 1px #8d80e8}.td-calendar__footer{display:flex;justify-content:space-between;margin-top:.55rem;border-top:1px solid #e6e9f0;padding-top:.55rem}.td-calendar--dark .td-calendar__footer{border-color:#34343e}.td-calendar__text-action{border-radius:.5rem!important;padding:.45rem .6rem;color:#5746d8!important;font-size:.68rem;font-weight:750}.td-calendar__text-action:hover{background:#f2f0ff!important}@keyframes td-calendar-in{0%{opacity:0;transform:translateY(-.25rem) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.td-calendar{width:calc(100vw - 1rem);border-radius:.9rem}}@media(prefers-reduced-motion:reduce){.td-calendar{animation:none}}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], placeholder: [{
@@ -1581,15 +1633,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], hint: [{
                 type: Input
-            }], error: [{
-                type: Input
-            }], minDate: [{
+            }], 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 }] }], minDate: [{
                 type: Input,
                 args: [{ alias: 'min' }]
             }], maxDate: [{
                 type: Input,
                 args: [{ alias: 'max' }]
-            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], clearable: [{
+            }], clearable: [{
                 type: Input
             }], dark: [{
                 type: Input
@@ -1946,84 +1996,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 let inputSequence = 0;
 class TdInput {
     cdr = inject(ChangeDetectorRef);
+    formBridge = createTdFormControlBridge();
     generatedId = `td-input-${++inputSequence}`;
+    legacyMinLength = signal(null, ...(ngDevMode ? [{ debugName: "legacyMinLength" }] : /* istanbul ignore next */ []));
+    legacyMaxLength = signal(null, ...(ngDevMode ? [{ debugName: "legacyMaxLength" }] : /* istanbul ignore next */ []));
+    receivedNullValue = false;
+    nativeInput;
     id = '';
-    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     label = 'Campo';
     type = 'text';
     placeholder = '';
     autocomplete = 'off';
     icon = '';
     hint = '';
-    error = '';
-    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* 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 */ []));
     clearable = false;
     dark = false;
-    minValue = null;
-    maxValue = null;
+    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' });
+    minLength = input(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+    maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    pattern = input([], ...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
     step = null;
-    minlength = null;
-    maxlength = null;
+    set minlength(value) {
+        this.legacyMinLength.set(value);
+    }
+    set maxlength(value) {
+        this.legacyMaxLength.set(value);
+    }
     value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    displayError = computed(() => this.error || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* 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 */ []));
+    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)
+            return null;
+        if (patterns.length === 1)
+            return patterns[0].source;
+        return patterns.map((item) => `(?=${item.source})`).join('') + '.*';
+    }, ...(ngDevMode ? [{ debugName: "resolvedPattern" }] : /* istanbul ignore next */ []));
     focused = false;
     passwordVisible = false;
     get inputId() {
         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;
     }
     onChange = () => undefined;
-    onTouched = () => undefined;
     writeValue(value) {
-        this.value.set(value === null || value === undefined ? '' : String(value));
+        if (value === null || value === undefined) {
+            this.receivedNullValue = true;
+            this.value.set(null);
+        }
+        else if (this.type === 'number' &&
+            this.formBridge.usesSignalForms &&
+            typeof value === 'number') {
+            this.value.set(value);
+        }
+        else {
+            this.value.set(String(value));
+        }
         this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.onChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        this.formBridge.registerOnTouched(fn);
     }
     setDisabledState(disabled) {
-        this.cvaDisabled.set(disabled);
-        this.cdr.markForCheck();
+        this.formBridge.setDisabledState(disabled);
+    }
+    focus(options) {
+        this.nativeInput?.nativeElement.focus(options);
     }
     handleInput(event) {
-        this.setValue(event.target.value);
+        const inputElement = event.target;
+        this.setValue(this.parseInputValue(inputElement));
     }
     handleBlur() {
         this.focused = false;
-        this.onTouched();
-        this.touch.emit();
+        this.formBridge.markTouched(this.touched, this.touch);
     }
     clear() {
-        this.setValue('');
+        this.setValue(this.resolveEmptyValue());
+    }
+    parseInputValue(inputElement) {
+        if (!inputElement.value) {
+            return this.resolveEmptyValue();
+        }
+        if (this.type !== 'number' || !this.formBridge.usesSignalForms) {
+            return inputElement.value;
+        }
+        const numericValue = inputElement.valueAsNumber;
+        return Number.isNaN(numericValue) ? null : numericValue;
+    }
+    resolveEmptyValue() {
+        if (this.emptyValue === 'null')
+            return null;
+        if (this.emptyValue === 'empty-string')
+            return '';
+        if (this.formBridge.usesSignalForms && this.type === 'number')
+            return null;
+        return this.receivedNullValue ? null : '';
     }
     setValue(value) {
         this.value.set(value);
         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 }, name: { classPropertyName: "name", publicName: "name", isSignal: true, 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 }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", 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 }, minValue: { classPropertyName: "minValue", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "max", isSignal: false, 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: { touch: "touch", value: "valueChange" }, 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),
                 multi: true,
             },
-        ], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true }], ngImport: i0, template: `
     <div
       class="td-input"
       [class.td-input--focused]="focused"
@@ -2039,20 +2157,22 @@ class TdInput {
         }
 
         <input
+          #nativeInput
           [id]="inputId"
           [name]="name()"
           [type]="resolvedType"
-          [value]="value()"
+          [value]="value() ?? ''"
           [placeholder]="placeholder"
           [autocomplete]="autocomplete"
           [disabled]="isDisabled()"
           [readonly]="readonly()"
           [required]="required()"
-          [min]="minValue"
-          [max]="maxValue"
+          [min]="minValue()"
+          [max]="maxValue()"
           [step]="step"
-          [attr.minlength]="minlength"
-          [attr.maxlength]="maxlength"
+          [attr.minlength]="resolvedMinLength()"
+          [attr.maxlength]="resolvedMaxLength()"
+          [attr.pattern]="resolvedPattern()"
           [attr.aria-describedby]="descriptionId"
           [attr.aria-invalid]="hasError()"
           (input)="handleInput($event)"
@@ -2079,16 +2199,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,
@@ -2108,20 +2242,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         }
 
         <input
+          #nativeInput
           [id]="inputId"
           [name]="name()"
           [type]="resolvedType"
-          [value]="value()"
+          [value]="value() ?? ''"
           [placeholder]="placeholder"
           [autocomplete]="autocomplete"
           [disabled]="isDisabled()"
           [readonly]="readonly()"
           [required]="required()"
-          [min]="minValue"
-          [max]="maxValue"
+          [min]="minValue()"
+          [max]="maxValue()"
           [step]="step"
-          [attr.minlength]="minlength"
-          [attr.maxlength]="maxlength"
+          [attr.minlength]="resolvedMinLength()"
+          [attr.maxlength]="resolvedMaxLength()"
+          [attr.pattern]="resolvedPattern()"
           [attr.aria-describedby]="descriptionId"
           [attr.aria-invalid]="hasError()"
           (input)="handleInput($event)"
@@ -2148,14 +2284,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: [
                         {
@@ -2163,10 +2313,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => TdInput),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"] }]
-        }], propDecorators: { id: [{
+                    ], 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__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']
+            }], id: [{
                 type: Input
-            }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{
+            }], label: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -2178,19 +2334,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], hint: [{
                 type: Input
-            }], error: [{
-                type: Input
-            }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], clearable: [{
+            }], 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 }] }], clearable: [{
                 type: Input
             }], dark: [{
                 type: Input
-            }], minValue: [{
-                type: Input,
-                args: [{ alias: 'min' }]
-            }], maxValue: [{
-                type: Input,
-                args: [{ alias: 'max' }]
-            }], step: [{
+            }], 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
             }], minlength: [{
                 type: Input
@@ -2201,6 +2351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 let autocompleteSequence = 0;
 class TdAutocompleteSelect {
     cdr = inject(ChangeDetectorRef);
+    formBridge = createTdFormControlBridge();
     document = inject(DOCUMENT);
     destroyRef = inject(DestroyRef);
     scrollStrategies = inject(ScrollStrategyOptions);
@@ -2211,14 +2362,22 @@ class TdAutocompleteSelect {
     placeholder = 'Escribe para buscar...';
     options = [];
     hint = '';
-    error = '';
-    emptyText = 'No se encontraron resultados';
-    clearable = true;
-    dark = false;
+    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 */ []));
+    emptyText = 'No se encontraron resultados';
+    clearable = true;
+    dark = false;
     scrollBehavior = 'reposition';
     minimumCharacters = 0;
     filterWith = (option, search) => `${option.label} ${option.description ?? ''}`.toLocaleLowerCase().includes(search);
@@ -2226,9 +2385,8 @@ class TdAutocompleteSelect {
     selectionChange = new EventEmitter();
     searchChange = new EventEmitter();
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    displayError = computed(() => this.error || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* 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 */ []));
     search = '';
     open = false;
@@ -2247,11 +2405,9 @@ class TdAutocompleteSelect {
         return this.options.filter((option) => this.filterWith(option, normalized));
     }
     onTouched = () => {
-        this.onCvaTouched();
-        this.touch.emit();
+        this.formBridge.markTouched(this.touched, this.touch);
     };
     changed = () => undefined;
-    onCvaTouched = () => undefined;
     constructor() {
         const scrollListener = (event) => {
             const target = event.target;
@@ -2280,17 +2436,19 @@ class TdAutocompleteSelect {
         this.changed = fn;
     }
     registerOnTouched(fn) {
-        this.onCvaTouched = fn;
+        this.formBridge.registerOnTouched(fn);
     }
     setDisabledState(disabled) {
-        this.cvaDisabled.set(disabled);
-        this.cdr.markForCheck();
+        this.formBridge.setDisabledState(disabled);
+    }
+    focus(options) {
+        this.searchInput?.nativeElement.focus(options);
     }
     compare(first, second) {
         return this.compareWith(first, second);
     }
     openPanel() {
-        if (this.isDisabled())
+        if (this.isDisabled() || this.readonly())
             return;
         this.open = true;
         this.activeIndex = this.firstEnabledIndex();
@@ -2300,8 +2458,7 @@ class TdAutocompleteSelect {
         const selected = this.options.find((option) => this.compare(option.value, this.value()));
         if (selected)
             this.search = selected.label;
-        this.onCvaTouched();
-        this.touch.emit();
+        this.formBridge.markTouched(this.touched, this.touch);
     }
     handleInput(event) {
         this.search = event.target.value;
@@ -2369,7 +2526,7 @@ class TdAutocompleteSelect {
         return this.filteredOptions.findIndex((option) => !option.disabled);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", value: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, 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 }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdAutocompleteSelect),
@@ -2397,6 +2554,9 @@ class TdAutocompleteSelect {
           [value]="search"
           [placeholder]="placeholder"
           [disabled]="isDisabled()"
+          [readonly]="readonly()"
+          [required]="required()"
+          [attr.aria-invalid]="hasError()"
           [attr.aria-expanded]="open"
           [attr.aria-controls]="listId"
           (focus)="openPanel()"
@@ -2498,6 +2658,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           [value]="search"
           [placeholder]="placeholder"
           [disabled]="isDisabled()"
+          [readonly]="readonly()"
+          [required]="required()"
+          [attr.aria-invalid]="hasError()"
           [attr.aria-expanded]="open"
           [attr.aria-controls]="listId"
           (focus)="openPanel()"
@@ -2579,7 +2742,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => TdAutocompleteSelect),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
+                    ], 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-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
@@ -2594,15 +2760,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], hint: [{
                 type: Input
-            }], error: [{
-                type: Input
-            }], emptyText: [{
+            }], 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 }] }], emptyText: [{
                 type: Input
             }], clearable: [{
                 type: Input
             }], dark: [{
                 type: Input
-            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], scrollBehavior: [{
+            }], scrollBehavior: [{
                 type: Input
             }], minimumCharacters: [{
                 type: Input
@@ -2619,30 +2783,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 let selectSequence = 0;
 class TdSelect {
     cdr = inject(ChangeDetectorRef);
+    formBridge = createTdFormControlBridge();
     document = inject(DOCUMENT);
     destroyRef = inject(DestroyRef);
     scrollStrategies = inject(ScrollStrategyOptions);
     generatedId = `td-select-${++selectSequence}`;
     connectedOverlay;
+    trigger;
     label = 'Seleccionar';
     placeholder = 'Selecciona una opción';
     options = [];
     hint = '';
-    error = '';
-    emptyText = 'No hay opciones disponibles';
-    clearable = false;
-    dark = false;
+    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 */ []));
+    emptyText = 'No hay opciones disponibles';
+    clearable = false;
+    dark = false;
     scrollBehavior = 'reposition';
     compareWith = (first, second) => Object.is(first, second);
     selectionChange = new EventEmitter();
     value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-    cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
-    isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
-    displayError = computed(() => this.error || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* 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 */ []));
     open = false;
     activeIndex = -1;
@@ -2657,7 +2830,6 @@ class TdSelect {
         return this.options.find((option) => this.compare(option.value, this.value()));
     }
     onChange = () => undefined;
-    onTouched = () => undefined;
     constructor() {
         const scrollListener = (event) => {
             const target = event.target;
@@ -2684,17 +2856,19 @@ class TdSelect {
         this.onChange = fn;
     }
     registerOnTouched(fn) {
-        this.onTouched = fn;
+        this.formBridge.registerOnTouched(fn);
     }
     setDisabledState(disabled) {
-        this.cvaDisabled.set(disabled);
-        this.cdr.markForCheck();
+        this.formBridge.setDisabledState(disabled);
+    }
+    focus(options) {
+        this.trigger?.nativeElement.focus(options);
     }
     compare(first, second) {
         return this.compareWith(first, second);
     }
     toggle() {
-        if (this.isDisabled())
+        if (this.isDisabled() || this.readonly())
             return;
         this.open ? this.close() : this.openPanel();
     }
@@ -2702,8 +2876,7 @@ class TdSelect {
         if (!this.open)
             return;
         this.open = false;
-        this.onTouched();
-        this.touch.emit();
+        this.formBridge.markTouched(this.touched, this.touch);
     }
     select(option) {
         if (option.disabled)
@@ -2768,13 +2941,13 @@ class TdSelect {
         this.selectionChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touch: "touch", selectionChange: "selectionChange", value: "valueChange" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, 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 }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdSelect),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: `
     <div
       cdkOverlayOrigin
       #origin="cdkOverlayOrigin"
@@ -2786,10 +2959,14 @@ class TdSelect {
     >
       <label [id]="labelId">{{ label }}</label>
       <div
+        #trigger
         class="td-select__trigger"
         role="combobox"
         [attr.tabindex]="isDisabled() ? -1 : 0"
         [attr.aria-disabled]="isDisabled()"
+        [attr.aria-readonly]="readonly()"
+        [attr.aria-required]="required()"
+        [attr.aria-invalid]="hasError()"
         [attr.aria-labelledby]="labelId"
         [attr.aria-expanded]="open"
         [attr.aria-controls]="listId"
@@ -2891,10 +3068,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     >
       <label [id]="labelId">{{ label }}</label>
       <div
+        #trigger
         class="td-select__trigger"
         role="combobox"
         [attr.tabindex]="isDisabled() ? -1 : 0"
         [attr.aria-disabled]="isDisabled()"
+        [attr.aria-readonly]="readonly()"
+        [attr.aria-required]="required()"
+        [attr.aria-invalid]="hasError()"
         [attr.aria-labelledby]="labelId"
         [attr.aria-expanded]="open"
         [attr.aria-controls]="listId"
@@ -2986,10 +3167,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             useExisting: forwardRef(() => TdSelect),
                             multi: true,
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
+                    ], 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-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
                 type: ViewChild,
                 args: [CdkConnectedOverlay]
+            }], trigger: [{
+                type: ViewChild,
+                args: ['trigger']
             }], label: [{
                 type: Input
             }], placeholder: [{
@@ -2998,15 +3185,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], hint: [{
                 type: Input
-            }], error: [{
-                type: Input
-            }], emptyText: [{
+            }], 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 }] }], emptyText: [{
                 type: Input
             }], clearable: [{
                 type: Input
             }], dark: [{
                 type: Input
-            }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touch: [{ type: i0.Output, args: ["touch"] }], scrollBehavior: [{
+            }], scrollBehavior: [{
                 type: Input
             }], compareWith: [{
                 type: Input
@@ -3442,5 +3627,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 };
+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 };
 //# sourceMappingURL=telcomdev-ui.mjs.map