@telcomdev/ui 0.0.6 → 0.0.7

package/fesm2022/telcomdev-ui.mjs

@@ -1,12 +1,12 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, InjectionToken, HostListener, Directive, ChangeDetectorRef, forwardRef, DestroyRef, signal, TemplateRef, ViewChildren, ContentChildren } 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 * 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 { DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 import { NgComponentOutlet, DOCUMENT, NgTemplateOutlet } from '@angular/common';
-import { ScrollStrategyOptions, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
 import { RouterLink, RouterLinkActive } from '@angular/router';
 
 class TelcomdevUi {
@@ -863,6 +863,742 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Output
             }] } });
 
+let datePickerSequence = 0;
+class TdDatePicker {
+    cdr = inject(ChangeDetectorRef);
+    scrollStrategies = inject(ScrollStrategyOptions);
+    generatedId = `td-date-picker-${++datePickerSequence}`;
+    formatter = new Intl.DateTimeFormat('es-PE', {
+        day: '2-digit',
+        month: 'short',
+        year: 'numeric',
+    });
+    monthFormatter = new Intl.DateTimeFormat('es-PE', {
+        month: 'long',
+        year: 'numeric',
+    });
+    longFormatter = new Intl.DateTimeFormat('es-PE', {
+        weekday: 'long',
+        day: 'numeric',
+        month: 'long',
+        year: 'numeric',
+    });
+    label = 'Fecha';
+    placeholder = 'Selecciona una fecha';
+    mode = 'fecha';
+    hint = '';
+    error = '';
+    minDate = null;
+    maxDate = null;
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touch = output();
+    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 */ []));
+    hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    selectionChange = new EventEmitter();
+    openedChange = new EventEmitter();
+    open = false;
+    hoveredDate = null;
+    viewDate = this.startOfMonth(new Date());
+    calendarView = 'dias';
+    currentYear = new Date().getFullYear();
+    scrollStrategy = this.scrollStrategies.reposition();
+    get labelId() {
+        return `${this.generatedId}-label`;
+    }
+    get calendarId() {
+        return `${this.generatedId}-calendar`;
+    }
+    get weekdays() {
+        return ['L', 'M', 'X', 'J', 'V', 'S', 'D'];
+    }
+    get monthLabel() {
+        const label = this.monthFormatter.format(this.viewDate);
+        return label.charAt(0).toUpperCase() + label.slice(1);
+    }
+    get periodLabel() {
+        if (this.calendarView === 'dias')
+            return this.monthLabel;
+        if (this.calendarView === 'meses')
+            return String(this.viewDate.getFullYear());
+        return `${this.yearPageStart} – ${this.yearPageStart + 11}`;
+    }
+    get periodButtonLabel() {
+        if (this.calendarView === 'dias')
+            return 'Elegir mes y año';
+        if (this.calendarView === 'meses')
+            return 'Elegir año';
+        return 'Periodo de años';
+    }
+    get previousLabel() {
+        return this.calendarView === 'dias'
+            ? 'Mes anterior'
+            : this.calendarView === 'meses'
+                ? 'Año anterior'
+                : 'Años anteriores';
+    }
+    get nextLabel() {
+        return this.calendarView === 'dias'
+            ? 'Mes siguiente'
+            : this.calendarView === 'meses'
+                ? 'Año siguiente'
+                : 'Años siguientes';
+    }
+    get months() {
+        const formatter = new Intl.DateTimeFormat('es-PE', { month: 'short' });
+        const year = this.viewDate.getFullYear();
+        return Array.from({ length: 12 }, (_, index) => {
+            const label = formatter.format(new Date(year, index, 1)).replace('.', '');
+            return {
+                index,
+                label: label.charAt(0).toUpperCase() + label.slice(1),
+                disabled: !this.monthIntersectsLimits(year, index),
+            };
+        });
+    }
+    get years() {
+        return Array.from({ length: 12 }, (_, index) => {
+            const value = this.yearPageStart + index;
+            return { value, disabled: !this.yearIntersectsLimits(value) };
+        });
+    }
+    get yearPageStart() {
+        return Math.floor(this.viewDate.getFullYear() / 12) * 12;
+    }
+    get days() {
+        const first = this.startOfMonth(this.viewDate);
+        const mondayOffset = (first.getDay() + 6) % 7;
+        const start = new Date(first.getFullYear(), first.getMonth(), 1 - mondayOffset);
+        return Array.from({ length: 42 }, (_, index) => {
+            const date = new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);
+            const iso = this.toIso(date);
+            return {
+                iso,
+                day: date.getDate(),
+                currentMonth: date.getMonth() === this.viewDate.getMonth(),
+                today: iso === this.toIso(new Date()),
+                disabled: (typeof this.minDate === 'string' && iso < this.minDate) ||
+                    (typeof this.maxDate === 'string' && iso > this.maxDate),
+            };
+        });
+    }
+    get displayValue() {
+        const current = this.value();
+        if (typeof current === 'string')
+            return this.format(current);
+        if (current && typeof current === 'object') {
+            return current.fin
+                ? `${this.format(current.inicio)} — ${this.format(current.fin)}`
+                : this.format(current.inicio);
+        }
+        return '';
+    }
+    get rangeStartLabel() {
+        return this.currentRange()?.inicio ? this.format(this.currentRange().inicio) : 'Sin elegir';
+    }
+    get rangeEndLabel() {
+        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();
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.changed = fn;
+    }
+    registerOnTouched(fn) {
+        this.onCvaTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.cvaDisabled.set(disabled);
+        this.cdr.markForCheck();
+    }
+    focus() {
+        document.getElementById(this.labelId)?.parentElement?.querySelector('button')?.focus();
+    }
+    toggle() {
+        if (this.isDisabled() || this.readonly())
+            return;
+        this.open ? this.close() : this.openPanel();
+    }
+    openPanel() {
+        if (this.isDisabled() || this.readonly())
+            return;
+        this.syncViewToValue();
+        this.calendarView = 'dias';
+        this.open = true;
+        this.openedChange.emit(true);
+    }
+    close() {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.hoveredDate = null;
+        this.onCvaTouched();
+        this.touch.emit();
+        this.openedChange.emit(false);
+    }
+    previousPage() {
+        if (this.calendarView === 'dias') {
+            this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1);
+        }
+        else if (this.calendarView === 'meses') {
+            this.viewDate = new Date(this.viewDate.getFullYear() - 1, this.viewDate.getMonth(), 1);
+        }
+        else {
+            this.viewDate = new Date(this.viewDate.getFullYear() - 12, this.viewDate.getMonth(), 1);
+        }
+    }
+    nextPage() {
+        if (this.calendarView === 'dias') {
+            this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1);
+        }
+        else if (this.calendarView === 'meses') {
+            this.viewDate = new Date(this.viewDate.getFullYear() + 1, this.viewDate.getMonth(), 1);
+        }
+        else {
+            this.viewDate = new Date(this.viewDate.getFullYear() + 12, this.viewDate.getMonth(), 1);
+        }
+    }
+    changeCalendarView() {
+        if (this.calendarView === 'dias') {
+            this.calendarView = 'meses';
+        }
+        else if (this.calendarView === 'meses') {
+            this.calendarView = 'anios';
+        }
+    }
+    selectMonth(month) {
+        this.viewDate = new Date(this.viewDate.getFullYear(), month, 1);
+        this.calendarView = 'dias';
+    }
+    selectYear(year) {
+        this.viewDate = new Date(year, this.viewDate.getMonth(), 1);
+        this.calendarView = 'meses';
+    }
+    goToday() {
+        const today = this.toIso(new Date());
+        if ((typeof this.minDate === 'string' && today < this.minDate) ||
+            (typeof this.maxDate === 'string' && today > this.maxDate))
+            return;
+        this.viewDate = this.startOfMonth(new Date());
+        this.calendarView = 'dias';
+        this.selectDate(this.days.find((day) => day.iso === today) ?? {
+            iso: today,
+            day: new Date().getDate(),
+            currentMonth: true,
+            today: true,
+            disabled: false,
+        });
+    }
+    selectDate(date) {
+        if (date.disabled)
+            return;
+        if (!date.currentMonth) {
+            const parsed = this.fromIso(date.iso);
+            this.viewDate = this.startOfMonth(parsed);
+        }
+        if (this.mode === 'fecha') {
+            this.setValue(date.iso);
+            this.close();
+            return;
+        }
+        const range = this.currentRange();
+        if (!range || range.fin) {
+            this.setValue({ inicio: date.iso, fin: null });
+            return;
+        }
+        this.setValue(date.iso < range.inicio
+            ? { inicio: date.iso, fin: range.inicio }
+            : { inicio: range.inicio, fin: date.iso });
+        this.close();
+    }
+    clear(event) {
+        event.stopPropagation();
+        this.setValue(null);
+    }
+    isSelected(iso) {
+        const current = this.value();
+        if (typeof current === 'string')
+            return current === iso;
+        return !!current && (current.inicio === iso || current.fin === iso);
+    }
+    isRangeStart(iso) {
+        return this.currentRange()?.inicio === iso;
+    }
+    isRangeEnd(iso) {
+        return this.currentRange()?.fin === iso;
+    }
+    isInRange(iso) {
+        const range = this.currentRange();
+        if (!range)
+            return false;
+        const end = range.fin ?? this.hoveredDate;
+        if (!end)
+            return false;
+        const start = end < range.inicio ? end : range.inicio;
+        const finish = end < range.inicio ? range.inicio : end;
+        return iso > start && iso < finish;
+    }
+    formatLong(iso) {
+        return this.longFormatter.format(this.fromIso(iso));
+    }
+    handleTriggerKeydown(event) {
+        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.openPanel();
+        }
+    }
+    handleOverlayKeydown(event) {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.close();
+        }
+        else if (event.key === 'PageUp') {
+            event.preventDefault();
+            this.previousPage();
+        }
+        else if (event.key === 'PageDown') {
+            event.preventDefault();
+            this.nextPage();
+        }
+    }
+    currentRange() {
+        const current = this.value();
+        return current && typeof current === 'object' ? current : null;
+    }
+    setValue(value) {
+        this.value.set(value);
+        this.changed(value);
+        this.selectionChange.emit(value);
+    }
+    syncViewToValue() {
+        const current = this.value();
+        const iso = typeof current === 'string' ? current : current?.inicio;
+        if (iso)
+            this.viewDate = this.startOfMonth(this.fromIso(iso));
+    }
+    normalizeValue(value) {
+        if (!value)
+            return null;
+        if (typeof value === 'string')
+            return value;
+        return { inicio: value.inicio, fin: value.fin ?? null };
+    }
+    format(iso) {
+        return this.formatter.format(this.fromIso(iso)).replace('.', '');
+    }
+    fromIso(iso) {
+        const [year, month, day] = iso.split('-').map(Number);
+        return new Date(year, month - 1, day);
+    }
+    toIso(date) {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+    }
+    startOfMonth(date) {
+        return new Date(date.getFullYear(), date.getMonth(), 1);
+    }
+    monthIntersectsLimits(year, month) {
+        const first = this.toIso(new Date(year, month, 1));
+        const last = this.toIso(new Date(year, month + 1, 0));
+        return !((typeof this.minDate === 'string' && last < this.minDate) ||
+            (typeof this.maxDate === 'string' && first > this.maxDate));
+    }
+    yearIntersectsLimits(year) {
+        const first = `${year}-01-01`;
+        const last = `${year}-12-31`;
+        return !((typeof this.minDate === 'string' && last < this.minDate) ||
+            (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: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TdDatePicker),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      class="td-date-picker"
+      [class.td-date-picker--open]="open"
+      [class.td-date-picker--error]="hasError()"
+      [class.td-date-picker--disabled]="isDisabled()"
+      [class.td-date-picker--dark]="dark"
+    >
+      <label [id]="labelId">{{ label }}</label>
+      <button
+        type="button"
+        class="td-date-picker__trigger"
+        [disabled]="isDisabled()"
+        [attr.aria-labelledby]="labelId"
+        [attr.aria-expanded]="open"
+        [attr.aria-controls]="calendarId"
+        (click)="toggle()"
+        (keydown)="handleTriggerKeydown($event)"
+      >
+        <td-icon nombre="calendar" />
+        <span [class.td-date-picker__placeholder]="!displayValue">
+          {{ displayValue || placeholder }}
+        </span>
+        @if (clearable && value() && !isDisabled() && !readonly()) {
+          <span
+            class="td-date-picker__clear"
+            role="button"
+            tabindex="-1"
+            aria-label="Limpiar fecha"
+            (click)="clear($event)"
+          >
+            <td-icon nombre="close" tamano=".92rem" />
+          </span>
+        }
+        <td-icon
+          class="td-date-picker__chevron"
+          [class.td-date-picker__chevron--open]="open"
+          nombre="chevron_down"
+        />
+      </button>
+    </div>
+
+    @if (displayError() || hint) {
+      <p class="td-date-picker__message" [class.td-date-picker__message--error]="hasError()">
+        {{ displayError() || hint }}
+      </p>
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open"
+      [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+      [cdkConnectedOverlayMatchWidth]="false"
+      [cdkConnectedOverlayViewportMargin]="8"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="close()"
+      (overlayKeydown)="handleOverlayKeydown($event)"
+      (detach)="close()"
+    >
+      <section
+        class="td-calendar"
+        [class.td-calendar--dark]="dark"
+        [id]="calendarId"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="mode === 'rango' ? 'Seleccionar rango de fechas' : 'Seleccionar fecha'"
+      >
+        <header class="td-calendar__header">
+          <button type="button" [attr.aria-label]="previousLabel" (click)="previousPage()">
+            <td-icon nombre="chevron_left" />
+          </button>
+          <button
+            type="button"
+            class="td-calendar__period"
+            [attr.aria-label]="periodButtonLabel"
+            (click)="changeCalendarView()"
+          >
+            {{ periodLabel }}
+            @if (calendarView !== 'anios') {
+              <td-icon nombre="chevron_down" tamano=".85rem" />
+            }
+          </button>
+          <button type="button" [attr.aria-label]="nextLabel" (click)="nextPage()">
+            <td-icon nombre="chevron_right" />
+          </button>
+        </header>
+
+        @if (mode === 'rango') {
+          <div class="td-calendar__range-summary">
+            <span><small>Desde</small><strong>{{ rangeStartLabel }}</strong></span>
+            <td-icon nombre="arrow_forward" />
+            <span><small>Hasta</small><strong>{{ rangeEndLabel }}</strong></span>
+          </div>
+        }
+
+        @if (calendarView === 'dias') {
+          <div class="td-calendar__weekdays" aria-hidden="true">
+            @for (weekday of weekdays; track weekday) {
+              <span>{{ weekday }}</span>
+            }
+          </div>
+
+          <div class="td-calendar__grid">
+            @for (date of days; track date.iso) {
+              <button
+                type="button"
+                class="td-calendar__day"
+                [class.td-calendar__day--outside]="!date.currentMonth"
+                [class.td-calendar__day--today]="date.today"
+                [class.td-calendar__day--selected]="isSelected(date.iso)"
+                [class.td-calendar__day--range]="isInRange(date.iso)"
+                [class.td-calendar__day--range-start]="isRangeStart(date.iso)"
+                [class.td-calendar__day--range-end]="isRangeEnd(date.iso)"
+                [disabled]="date.disabled"
+                [attr.aria-label]="formatLong(date.iso)"
+                [attr.aria-pressed]="isSelected(date.iso)"
+                (mouseenter)="hoveredDate = date.iso"
+                (mouseleave)="hoveredDate = null"
+                (click)="selectDate(date)"
+              >
+                {{ date.day }}
+              </button>
+            }
+          </div>
+        } @else if (calendarView === 'meses') {
+          <div class="td-calendar__selector-grid td-calendar__selector-grid--months">
+            @for (month of months; track month.index) {
+              <button
+                type="button"
+                [class.td-calendar__selector--active]="month.index === viewDate.getMonth()"
+                [disabled]="month.disabled"
+                (click)="selectMonth(month.index)"
+              >
+                {{ month.label }}
+              </button>
+            }
+          </div>
+        } @else {
+          <div class="td-calendar__selector-grid td-calendar__selector-grid--years">
+            @for (year of years; track year.value) {
+              <button
+                type="button"
+                [class.td-calendar__selector--active]="year.value === viewDate.getFullYear()"
+                [class.td-calendar__selector--today]="year.value === currentYear"
+                [disabled]="year.disabled"
+                (click)="selectYear(year.value)"
+              >
+                {{ year.value }}
+              </button>
+            }
+          </div>
+        }
+
+        <footer class="td-calendar__footer">
+          <button type="button" class="td-calendar__text-action" (click)="goToday()">
+            Hoy
+          </button>
+          <button type="button" class="td-calendar__text-action" (click)="close()">
+            Cerrar
+          </button>
+        </footer>
+      </section>
+    </ng-template>
+  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-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"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDatePicker, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-date-picker', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], template: `
+    <div
+      cdkOverlayOrigin
+      #origin="cdkOverlayOrigin"
+      class="td-date-picker"
+      [class.td-date-picker--open]="open"
+      [class.td-date-picker--error]="hasError()"
+      [class.td-date-picker--disabled]="isDisabled()"
+      [class.td-date-picker--dark]="dark"
+    >
+      <label [id]="labelId">{{ label }}</label>
+      <button
+        type="button"
+        class="td-date-picker__trigger"
+        [disabled]="isDisabled()"
+        [attr.aria-labelledby]="labelId"
+        [attr.aria-expanded]="open"
+        [attr.aria-controls]="calendarId"
+        (click)="toggle()"
+        (keydown)="handleTriggerKeydown($event)"
+      >
+        <td-icon nombre="calendar" />
+        <span [class.td-date-picker__placeholder]="!displayValue">
+          {{ displayValue || placeholder }}
+        </span>
+        @if (clearable && value() && !isDisabled() && !readonly()) {
+          <span
+            class="td-date-picker__clear"
+            role="button"
+            tabindex="-1"
+            aria-label="Limpiar fecha"
+            (click)="clear($event)"
+          >
+            <td-icon nombre="close" tamano=".92rem" />
+          </span>
+        }
+        <td-icon
+          class="td-date-picker__chevron"
+          [class.td-date-picker__chevron--open]="open"
+          nombre="chevron_down"
+        />
+      </button>
+    </div>
+
+    @if (displayError() || hint) {
+      <p class="td-date-picker__message" [class.td-date-picker__message--error]="hasError()">
+        {{ displayError() || hint }}
+      </p>
+    }
+
+    <ng-template
+      cdkConnectedOverlay
+      [cdkConnectedOverlayOrigin]="origin"
+      [cdkConnectedOverlayOpen]="open"
+      [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+      [cdkConnectedOverlayMatchWidth]="false"
+      [cdkConnectedOverlayViewportMargin]="8"
+      [cdkConnectedOverlayPush]="true"
+      (overlayOutsideClick)="close()"
+      (overlayKeydown)="handleOverlayKeydown($event)"
+      (detach)="close()"
+    >
+      <section
+        class="td-calendar"
+        [class.td-calendar--dark]="dark"
+        [id]="calendarId"
+        role="dialog"
+        aria-modal="true"
+        [attr.aria-label]="mode === 'rango' ? 'Seleccionar rango de fechas' : 'Seleccionar fecha'"
+      >
+        <header class="td-calendar__header">
+          <button type="button" [attr.aria-label]="previousLabel" (click)="previousPage()">
+            <td-icon nombre="chevron_left" />
+          </button>
+          <button
+            type="button"
+            class="td-calendar__period"
+            [attr.aria-label]="periodButtonLabel"
+            (click)="changeCalendarView()"
+          >
+            {{ periodLabel }}
+            @if (calendarView !== 'anios') {
+              <td-icon nombre="chevron_down" tamano=".85rem" />
+            }
+          </button>
+          <button type="button" [attr.aria-label]="nextLabel" (click)="nextPage()">
+            <td-icon nombre="chevron_right" />
+          </button>
+        </header>
+
+        @if (mode === 'rango') {
+          <div class="td-calendar__range-summary">
+            <span><small>Desde</small><strong>{{ rangeStartLabel }}</strong></span>
+            <td-icon nombre="arrow_forward" />
+            <span><small>Hasta</small><strong>{{ rangeEndLabel }}</strong></span>
+          </div>
+        }
+
+        @if (calendarView === 'dias') {
+          <div class="td-calendar__weekdays" aria-hidden="true">
+            @for (weekday of weekdays; track weekday) {
+              <span>{{ weekday }}</span>
+            }
+          </div>
+
+          <div class="td-calendar__grid">
+            @for (date of days; track date.iso) {
+              <button
+                type="button"
+                class="td-calendar__day"
+                [class.td-calendar__day--outside]="!date.currentMonth"
+                [class.td-calendar__day--today]="date.today"
+                [class.td-calendar__day--selected]="isSelected(date.iso)"
+                [class.td-calendar__day--range]="isInRange(date.iso)"
+                [class.td-calendar__day--range-start]="isRangeStart(date.iso)"
+                [class.td-calendar__day--range-end]="isRangeEnd(date.iso)"
+                [disabled]="date.disabled"
+                [attr.aria-label]="formatLong(date.iso)"
+                [attr.aria-pressed]="isSelected(date.iso)"
+                (mouseenter)="hoveredDate = date.iso"
+                (mouseleave)="hoveredDate = null"
+                (click)="selectDate(date)"
+              >
+                {{ date.day }}
+              </button>
+            }
+          </div>
+        } @else if (calendarView === 'meses') {
+          <div class="td-calendar__selector-grid td-calendar__selector-grid--months">
+            @for (month of months; track month.index) {
+              <button
+                type="button"
+                [class.td-calendar__selector--active]="month.index === viewDate.getMonth()"
+                [disabled]="month.disabled"
+                (click)="selectMonth(month.index)"
+              >
+                {{ month.label }}
+              </button>
+            }
+          </div>
+        } @else {
+          <div class="td-calendar__selector-grid td-calendar__selector-grid--years">
+            @for (year of years; track year.value) {
+              <button
+                type="button"
+                [class.td-calendar__selector--active]="year.value === viewDate.getFullYear()"
+                [class.td-calendar__selector--today]="year.value === currentYear"
+                [disabled]="year.disabled"
+                (click)="selectYear(year.value)"
+              >
+                {{ year.value }}
+              </button>
+            }
+          </div>
+        }
+
+        <footer class="td-calendar__footer">
+          <button type="button" class="td-calendar__text-action" (click)="goToday()">
+            Hoy
+          </button>
+          <button type="button" class="td-calendar__text-action" (click)="close()">
+            Cerrar
+          </button>
+        </footer>
+      </section>
+    </ng-template>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], hint: [{
+                type: Input
+            }], error: [{
+                type: Input
+            }], 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: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selectionChange: [{
+                type: Output
+            }], openedChange: [{
+                type: Output
+            }] } });
+
 const TD_DIALOG_DATA = new InjectionToken('TD_DIALOG_DATA');
 const TD_DIALOG_CONFIG = new InjectionToken('TD_DIALOG_CONFIG');
 
@@ -1212,7 +1948,7 @@ class TdInput {
     cdr = inject(ChangeDetectorRef);
     generatedId = `td-input-${++inputSequence}`;
     id = '';
-    name = '';
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
     label = 'Campo';
     type = 'text';
     placeholder = '';
@@ -1220,25 +1956,31 @@ class TdInput {
     icon = '';
     hint = '';
     error = '';
-    readonly = false;
-    disabled = false;
-    required = false;
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touch = output();
     clearable = false;
     dark = false;
-    min = null;
-    max = null;
+    minValue = null;
+    maxValue = null;
     step = null;
     minlength = null;
     maxlength = null;
-    valueChange = new EventEmitter();
-    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 */ []));
+    hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     focused = false;
     passwordVisible = false;
     get inputId() {
         return this.id || this.generatedId;
     }
     get descriptionId() {
-        return this.error || this.hint ? `${this.inputId}-description` : null;
+        return this.displayError() || this.hint ? `${this.inputId}-description` : null;
     }
     get resolvedType() {
         return this.type === 'password' && this.passwordVisible ? 'text' : this.type;
@@ -1246,7 +1988,7 @@ class TdInput {
     onChange = () => undefined;
     onTouched = () => undefined;
     writeValue(value) {
-        this.value = value === null || value === undefined ? '' : String(value);
+        this.value.set(value === null || value === undefined ? '' : String(value));
         this.cdr.markForCheck();
     }
     registerOnChange(fn) {
@@ -1256,7 +1998,7 @@ class TdInput {
         this.onTouched = fn;
     }
     setDisabledState(disabled) {
-        this.disabled = disabled;
+        this.cvaDisabled.set(disabled);
         this.cdr.markForCheck();
     }
     handleInput(event) {
@@ -1265,17 +2007,17 @@ class TdInput {
     handleBlur() {
         this.focused = false;
         this.onTouched();
+        this.touch.emit();
     }
     clear() {
         this.setValue('');
     }
     setValue(value) {
-        this.value = value;
+        this.value.set(value);
         this.onChange(value);
-        this.valueChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: "id", name: "name", label: "label", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", icon: "icon", hint: "hint", error: "error", readonly: "readonly", disabled: "disabled", required: "required", clearable: "clearable", dark: "dark", min: "min", max: "max", step: "step", minlength: "minlength", maxlength: "maxlength", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdInput),
@@ -1285,8 +2027,8 @@ class TdInput {
     <div
       class="td-input"
       [class.td-input--focused]="focused"
-      [class.td-input--error]="!!error"
-      [class.td-input--disabled]="disabled"
+      [class.td-input--error]="hasError()"
+      [class.td-input--disabled]="isDisabled()"
       [class.td-input--dark]="dark"
     >
       <label [for]="inputId">{{ label }}</label>
@@ -1298,27 +2040,27 @@ class TdInput {
 
         <input
           [id]="inputId"
-          [name]="name"
+          [name]="name()"
           [type]="resolvedType"
-          [value]="value"
+          [value]="value()"
           [placeholder]="placeholder"
           [autocomplete]="autocomplete"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          [required]="required"
-          [min]="min"
-          [max]="max"
+          [disabled]="isDisabled()"
+          [readonly]="readonly()"
+          [required]="required()"
+          [min]="minValue"
+          [max]="maxValue"
           [step]="step"
           [attr.minlength]="minlength"
           [attr.maxlength]="maxlength"
           [attr.aria-describedby]="descriptionId"
-          [attr.aria-invalid]="!!error"
+          [attr.aria-invalid]="hasError()"
           (input)="handleInput($event)"
           (focus)="focused = true"
           (blur)="handleBlur()"
         />
 
-        @if (clearable && value && !disabled && !readonly) {
+        @if (clearable && value() && !isDisabled() && !readonly()) {
           <button type="button" class="td-input__action" title="Limpiar" (click)="clear()">
             <td-icon nombre="close" tamano=".95rem" />
           </button>
@@ -1337,13 +2079,13 @@ class TdInput {
       </div>
     </div>
 
-    @if (error || hint) {
+    @if (displayError() || hint) {
       <p
         class="td-input__message"
-        [class.td-input__message--error]="!!error"
+        [class.td-input__message--error]="hasError()"
         [id]="descriptionId"
       >
-        {{ error || hint }}
+        {{ displayError() || hint }}
       </p>
     }
   `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-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 });
@@ -1354,8 +2096,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     <div
       class="td-input"
       [class.td-input--focused]="focused"
-      [class.td-input--error]="!!error"
-      [class.td-input--disabled]="disabled"
+      [class.td-input--error]="hasError()"
+      [class.td-input--disabled]="isDisabled()"
       [class.td-input--dark]="dark"
     >
       <label [for]="inputId">{{ label }}</label>
@@ -1367,27 +2109,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
         <input
           [id]="inputId"
-          [name]="name"
+          [name]="name()"
           [type]="resolvedType"
-          [value]="value"
+          [value]="value()"
           [placeholder]="placeholder"
           [autocomplete]="autocomplete"
-          [disabled]="disabled"
-          [readonly]="readonly"
-          [required]="required"
-          [min]="min"
-          [max]="max"
+          [disabled]="isDisabled()"
+          [readonly]="readonly()"
+          [required]="required()"
+          [min]="minValue"
+          [max]="maxValue"
           [step]="step"
           [attr.minlength]="minlength"
           [attr.maxlength]="maxlength"
           [attr.aria-describedby]="descriptionId"
-          [attr.aria-invalid]="!!error"
+          [attr.aria-invalid]="hasError()"
           (input)="handleInput($event)"
           (focus)="focused = true"
           (blur)="handleBlur()"
         />
 
-        @if (clearable && value && !disabled && !readonly) {
+        @if (clearable && value() && !isDisabled() && !readonly()) {
           <button type="button" class="td-input__action" title="Limpiar" (click)="clear()">
             <td-icon nombre="close" tamano=".95rem" />
           </button>
@@ -1406,13 +2148,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
     </div>
 
-    @if (error || hint) {
+    @if (displayError() || hint) {
       <p
         class="td-input__message"
-        [class.td-input__message--error]="!!error"
+        [class.td-input__message--error]="hasError()"
         [id]="descriptionId"
       >
-        {{ error || hint }}
+        {{ displayError() || hint }}
       </p>
     }
   `, providers: [
@@ -1424,9 +2166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
-            }], name: [{
-                type: Input
-            }], label: [{
+            }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{
                 type: Input
             }], type: [{
                 type: Input
@@ -1440,31 +2180,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], error: [{
                 type: Input
-            }], readonly: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], clearable: [{
+            }], 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: [{
                 type: Input
             }], dark: [{
                 type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
+            }], minValue: [{
+                type: Input,
+                args: [{ alias: 'min' }]
+            }], maxValue: [{
+                type: Input,
+                args: [{ alias: 'max' }]
             }], step: [{
                 type: Input
             }], minlength: [{
                 type: Input
             }], maxlength: [{
                 type: Input
-            }], valueChange: [{
-                type: Output
-            }], value: [{
-                type: Input
-            }] } });
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 let autocompleteSequence = 0;
 class TdAutocompleteSelect {
@@ -1483,14 +2215,21 @@ class TdAutocompleteSelect {
     emptyText = 'No se encontraron resultados';
     clearable = true;
     dark = false;
-    disabled = false;
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touch = output();
     scrollBehavior = 'reposition';
     minimumCharacters = 0;
     filterWith = (option, search) => `${option.label} ${option.description ?? ''}`.toLocaleLowerCase().includes(search);
     compareWith = (first, second) => Object.is(first, second);
     selectionChange = new EventEmitter();
     searchChange = new EventEmitter();
-    value = null;
+    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 */ []));
+    hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     search = '';
     open = false;
     activeIndex = -1;
@@ -1508,10 +2247,11 @@ class TdAutocompleteSelect {
         return this.options.filter((option) => this.filterWith(option, normalized));
     }
     onTouched = () => {
-        this.touched();
+        this.onCvaTouched();
+        this.touch.emit();
     };
     changed = () => undefined;
-    touched = () => undefined;
+    onCvaTouched = () => undefined;
     constructor() {
         const scrollListener = (event) => {
             const target = event.target;
@@ -1531,39 +2271,41 @@ class TdAutocompleteSelect {
         this.destroyRef.onDestroy(() => this.document.removeEventListener('scroll', scrollListener, true));
     }
     writeValue(value) {
-        this.value = value ?? null;
-        this.search = this.options.find((option) => this.compare(option.value, this.value))?.label ?? '';
+        this.value.set(value ?? null);
+        this.search =
+            this.options.find((option) => this.compare(option.value, this.value()))?.label ?? '';
         this.cdr.markForCheck();
     }
     registerOnChange(fn) {
         this.changed = fn;
     }
     registerOnTouched(fn) {
-        this.touched = fn;
+        this.onCvaTouched = fn;
     }
     setDisabledState(disabled) {
-        this.disabled = disabled;
+        this.cvaDisabled.set(disabled);
         this.cdr.markForCheck();
     }
     compare(first, second) {
         return this.compareWith(first, second);
     }
     openPanel() {
-        if (this.disabled)
+        if (this.isDisabled())
             return;
         this.open = true;
         this.activeIndex = this.firstEnabledIndex();
     }
     close() {
         this.open = false;
-        const selected = this.options.find((option) => this.compare(option.value, this.value));
+        const selected = this.options.find((option) => this.compare(option.value, this.value()));
         if (selected)
             this.search = selected.label;
-        this.touched();
+        this.onCvaTouched();
+        this.touch.emit();
     }
     handleInput(event) {
         this.search = event.target.value;
-        this.value = null;
+        this.value.set(null);
         this.changed(null);
         this.searchChange.emit(this.search);
         this.openPanel();
@@ -1572,7 +2314,7 @@ class TdAutocompleteSelect {
     select(option) {
         if (option.disabled)
             return;
-        this.value = option.value;
+        this.value.set(option.value);
         this.search = option.label;
         this.changed(option.value);
         this.selectionChange.emit(option.value);
@@ -1580,7 +2322,7 @@ class TdAutocompleteSelect {
     }
     clear(event) {
         event.stopPropagation();
-        this.value = null;
+        this.value.set(null);
         this.search = '';
         this.changed(null);
         this.selectionChange.emit(null);
@@ -1627,7 +2369,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: "label", placeholder: "placeholder", options: "options", hint: "hint", error: "error", emptyText: "emptyText", clearable: "clearable", dark: "dark", disabled: "disabled", scrollBehavior: "scrollBehavior", minimumCharacters: "minimumCharacters", filterWith: "filterWith", compareWith: "compareWith" }, outputs: { selectionChange: "selectionChange", searchChange: "searchChange" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdAutocompleteSelect),
@@ -1639,8 +2381,8 @@ class TdAutocompleteSelect {
       #origin="cdkOverlayOrigin"
       class="td-select td-select--autocomplete"
       [class.td-select--open]="open"
-      [class.td-select--error]="!!error"
-      [class.td-select--disabled]="disabled"
+      [class.td-select--error]="hasError()"
+      [class.td-select--disabled]="isDisabled()"
       [class.td-select--dark]="dark"
     >
       <label [for]="inputId">{{ label }}</label>
@@ -1654,7 +2396,7 @@ class TdAutocompleteSelect {
           role="combobox"
           [value]="search"
           [placeholder]="placeholder"
-          [disabled]="disabled"
+          [disabled]="isDisabled()"
           [attr.aria-expanded]="open"
           [attr.aria-controls]="listId"
           (focus)="openPanel()"
@@ -1662,7 +2404,7 @@ class TdAutocompleteSelect {
           (keydown)="handleKeydown($event)"
           (blur)="onTouched()"
         />
-        @if (clearable && (value !== null || search) && !disabled) {
+        @if (clearable && (value() !== null || search) && !isDisabled()) {
           <button type="button" class="td-select__clear" title="Limpiar" (click)="clear($event)">
             <td-icon nombre="close" tamano=".95rem" />
           </button>
@@ -1675,9 +2417,9 @@ class TdAutocompleteSelect {
       </div>
     </div>
 
-    @if (error || hint) {
-      <p class="td-select__message" [class.td-select__message--error]="!!error">
-        {{ error || hint }}
+    @if (displayError() || hint) {
+      <p class="td-select__message" [class.td-select__message--error]="hasError()">
+        {{ displayError() || hint }}
       </p>
     }
 
@@ -1708,7 +2450,7 @@ class TdAutocompleteSelect {
             type="button"
             role="option"
             [class.td-select-panel__option--active]="index === activeIndex"
-            [class.td-select-panel__option--selected]="compare(option.value, value)"
+            [class.td-select-panel__option--selected]="compare(option.value, value())"
             [disabled]="option.disabled"
             (mousedown)="$event.preventDefault()"
             (mouseenter)="activeIndex = index"
@@ -1723,7 +2465,7 @@ class TdAutocompleteSelect {
                 <small>{{ option.description }}</small>
               }
             </span>
-            @if (compare(option.value, value)) {
+            @if (compare(option.value, value())) {
               <td-icon class="td-select-panel__check" nombre="check" />
             }
           </button>
@@ -1740,8 +2482,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       #origin="cdkOverlayOrigin"
       class="td-select td-select--autocomplete"
       [class.td-select--open]="open"
-      [class.td-select--error]="!!error"
-      [class.td-select--disabled]="disabled"
+      [class.td-select--error]="hasError()"
+      [class.td-select--disabled]="isDisabled()"
       [class.td-select--dark]="dark"
     >
       <label [for]="inputId">{{ label }}</label>
@@ -1755,7 +2497,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           role="combobox"
           [value]="search"
           [placeholder]="placeholder"
-          [disabled]="disabled"
+          [disabled]="isDisabled()"
           [attr.aria-expanded]="open"
           [attr.aria-controls]="listId"
           (focus)="openPanel()"
@@ -1763,7 +2505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
           (keydown)="handleKeydown($event)"
           (blur)="onTouched()"
         />
-        @if (clearable && (value !== null || search) && !disabled) {
+        @if (clearable && (value() !== null || search) && !isDisabled()) {
           <button type="button" class="td-select__clear" title="Limpiar" (click)="clear($event)">
             <td-icon nombre="close" tamano=".95rem" />
           </button>
@@ -1776,9 +2518,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
     </div>
 
-    @if (error || hint) {
-      <p class="td-select__message" [class.td-select__message--error]="!!error">
-        {{ error || hint }}
+    @if (displayError() || hint) {
+      <p class="td-select__message" [class.td-select__message--error]="hasError()">
+        {{ displayError() || hint }}
       </p>
     }
 
@@ -1809,7 +2551,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type="button"
             role="option"
             [class.td-select-panel__option--active]="index === activeIndex"
-            [class.td-select-panel__option--selected]="compare(option.value, value)"
+            [class.td-select-panel__option--selected]="compare(option.value, value())"
             [disabled]="option.disabled"
             (mousedown)="$event.preventDefault()"
             (mouseenter)="activeIndex = index"
@@ -1824,7 +2566,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 <small>{{ option.description }}</small>
               }
             </span>
-            @if (compare(option.value, value)) {
+            @if (compare(option.value, value())) {
               <td-icon class="td-select-panel__check" nombre="check" />
             }
           </button>
@@ -1860,9 +2602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], dark: [{
                 type: Input
-            }], disabled: [{
-                type: Input
-            }], scrollBehavior: [{
+            }], 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: [{
                 type: Input
             }], minimumCharacters: [{
                 type: Input
@@ -1874,7 +2614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Output
             }], searchChange: [{
                 type: Output
-            }] } });
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 let selectSequence = 0;
 class TdSelect {
@@ -1892,11 +2632,18 @@ class TdSelect {
     emptyText = 'No hay opciones disponibles';
     clearable = false;
     dark = false;
-    disabled = false;
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
+    errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
+    touch = output();
     scrollBehavior = 'reposition';
     compareWith = (first, second) => Object.is(first, second);
     selectionChange = new EventEmitter();
-    value = null;
+    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 */ []));
+    hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
     open = false;
     activeIndex = -1;
     scrollStrategy = this.scrollStrategies.reposition();
@@ -1907,7 +2654,7 @@ class TdSelect {
         return `${this.generatedId}-list`;
     }
     get selectedOption() {
-        return this.options.find((option) => this.compare(option.value, this.value));
+        return this.options.find((option) => this.compare(option.value, this.value()));
     }
     onChange = () => undefined;
     onTouched = () => undefined;
@@ -1930,7 +2677,7 @@ class TdSelect {
         this.destroyRef.onDestroy(() => this.document.removeEventListener('scroll', scrollListener, true));
     }
     writeValue(value) {
-        this.value = value ?? null;
+        this.value.set(value ?? null);
         this.cdr.markForCheck();
     }
     registerOnChange(fn) {
@@ -1940,14 +2687,14 @@ class TdSelect {
         this.onTouched = fn;
     }
     setDisabledState(disabled) {
-        this.disabled = disabled;
+        this.cvaDisabled.set(disabled);
         this.cdr.markForCheck();
     }
     compare(first, second) {
         return this.compareWith(first, second);
     }
     toggle() {
-        if (this.disabled)
+        if (this.isDisabled())
             return;
         this.open ? this.close() : this.openPanel();
     }
@@ -1956,6 +2703,7 @@ class TdSelect {
             return;
         this.open = false;
         this.onTouched();
+        this.touch.emit();
     }
     select(option) {
         if (option.disabled)
@@ -1996,7 +2744,7 @@ class TdSelect {
     }
     openPanel() {
         this.open = true;
-        const selectedIndex = this.options.findIndex((option) => this.compare(option.value, this.value));
+        const selectedIndex = this.options.findIndex((option) => this.compare(option.value, this.value()));
         this.activeIndex = selectedIndex >= 0 ? selectedIndex : this.firstEnabledIndex();
     }
     moveActive(direction) {
@@ -2015,12 +2763,12 @@ class TdSelect {
         return this.options.findIndex((option) => !option.disabled);
     }
     setValue(value) {
-        this.value = value;
+        this.value.set(value);
         this.onChange(value);
         this.selectionChange.emit(value);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: "label", placeholder: "placeholder", options: "options", hint: "hint", error: "error", emptyText: "emptyText", clearable: "clearable", dark: "dark", disabled: "disabled", scrollBehavior: "scrollBehavior", compareWith: "compareWith" }, outputs: { selectionChange: "selectionChange" }, providers: [
+    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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => TdSelect),
@@ -2032,16 +2780,16 @@ class TdSelect {
       #origin="cdkOverlayOrigin"
       class="td-select"
       [class.td-select--open]="open"
-      [class.td-select--error]="!!error"
-      [class.td-select--disabled]="disabled"
+      [class.td-select--error]="hasError()"
+      [class.td-select--disabled]="isDisabled()"
       [class.td-select--dark]="dark"
     >
       <label [id]="labelId">{{ label }}</label>
       <div
         class="td-select__trigger"
         role="combobox"
-        [attr.tabindex]="disabled ? -1 : 0"
-        [attr.aria-disabled]="disabled"
+        [attr.tabindex]="isDisabled() ? -1 : 0"
+        [attr.aria-disabled]="isDisabled()"
         [attr.aria-labelledby]="labelId"
         [attr.aria-expanded]="open"
         [attr.aria-controls]="listId"
@@ -2054,7 +2802,7 @@ class TdSelect {
         <span [class.td-select__placeholder]="!selectedOption">
           {{ selectedOption?.label || placeholder }}
         </span>
-        @if (clearable && selectedOption && !disabled) {
+        @if (clearable && selectedOption && !isDisabled()) {
           <button
             type="button"
             class="td-select__clear"
@@ -2072,9 +2820,9 @@ class TdSelect {
       </div>
     </div>
 
-    @if (error || hint) {
-      <p class="td-select__message" [class.td-select__message--error]="!!error">
-        {{ error || hint }}
+    @if (displayError() || hint) {
+      <p class="td-select__message" [class.td-select__message--error]="hasError()">
+        {{ displayError() || hint }}
       </p>
     }
 
@@ -2105,8 +2853,8 @@ class TdSelect {
             type="button"
             role="option"
             [class.td-select-panel__option--active]="index === activeIndex"
-            [class.td-select-panel__option--selected]="compare(option.value, value)"
-            [attr.aria-selected]="compare(option.value, value)"
+            [class.td-select-panel__option--selected]="compare(option.value, value())"
+            [attr.aria-selected]="compare(option.value, value())"
             [disabled]="option.disabled"
             (mouseenter)="activeIndex = index"
             (click)="select(option)"
@@ -2120,7 +2868,7 @@ class TdSelect {
                 <small>{{ option.description }}</small>
               }
             </span>
-            @if (compare(option.value, value)) {
+            @if (compare(option.value, value())) {
               <td-icon class="td-select-panel__check" nombre="check" />
             }
           </button>
@@ -2137,16 +2885,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       #origin="cdkOverlayOrigin"
       class="td-select"
       [class.td-select--open]="open"
-      [class.td-select--error]="!!error"
-      [class.td-select--disabled]="disabled"
+      [class.td-select--error]="hasError()"
+      [class.td-select--disabled]="isDisabled()"
       [class.td-select--dark]="dark"
     >
       <label [id]="labelId">{{ label }}</label>
       <div
         class="td-select__trigger"
         role="combobox"
-        [attr.tabindex]="disabled ? -1 : 0"
-        [attr.aria-disabled]="disabled"
+        [attr.tabindex]="isDisabled() ? -1 : 0"
+        [attr.aria-disabled]="isDisabled()"
         [attr.aria-labelledby]="labelId"
         [attr.aria-expanded]="open"
         [attr.aria-controls]="listId"
@@ -2159,7 +2907,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         <span [class.td-select__placeholder]="!selectedOption">
           {{ selectedOption?.label || placeholder }}
         </span>
-        @if (clearable && selectedOption && !disabled) {
+        @if (clearable && selectedOption && !isDisabled()) {
           <button
             type="button"
             class="td-select__clear"
@@ -2177,9 +2925,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       </div>
     </div>
 
-    @if (error || hint) {
-      <p class="td-select__message" [class.td-select__message--error]="!!error">
-        {{ error || hint }}
+    @if (displayError() || hint) {
+      <p class="td-select__message" [class.td-select__message--error]="hasError()">
+        {{ displayError() || hint }}
       </p>
     }
 
@@ -2210,8 +2958,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             type="button"
             role="option"
             [class.td-select-panel__option--active]="index === activeIndex"
-            [class.td-select-panel__option--selected]="compare(option.value, value)"
-            [attr.aria-selected]="compare(option.value, value)"
+            [class.td-select-panel__option--selected]="compare(option.value, value())"
+            [attr.aria-selected]="compare(option.value, value())"
             [disabled]="option.disabled"
             (mouseenter)="activeIndex = index"
             (click)="select(option)"
@@ -2225,7 +2973,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 <small>{{ option.description }}</small>
               }
             </span>
-            @if (compare(option.value, value)) {
+            @if (compare(option.value, value())) {
               <td-icon class="td-select-panel__check" nombre="check" />
             }
           </button>
@@ -2258,15 +3006,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }], dark: [{
                 type: Input
-            }], disabled: [{
-                type: Input
-            }], scrollBehavior: [{
+            }], 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: [{
                 type: Input
             }], compareWith: [{
                 type: Input
             }], selectionChange: [{
                 type: Output
-            }] } });
+            }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
 
 class TdSidebar {
     titulo = 'Gestión Corporativa';
@@ -2417,6 +3163,7 @@ class TdTabs {
     tabsChange;
     requestedIndex = 0;
     tabQuery;
+    tabList;
     tabButtons;
     set selectedIndex(value) {
         this.requestedIndex = Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0;
@@ -2458,8 +3205,11 @@ class TdTabs {
         this.selectedIndexChange.emit(index);
         this.tabChange.emit(tab);
         this.cdr.markForCheck();
-        if (focus)
-            queueMicrotask(() => this.focusButton(index));
+        queueMicrotask(() => {
+            this.ensureTabVisible(index, focus ? 'auto' : 'smooth');
+            if (focus)
+                this.focusButton(index);
+        });
     }
     handleKeydown(event) {
         const horizontalKeys = ['ArrowLeft', 'ArrowRight'];
@@ -2486,6 +3236,7 @@ class TdTabs {
         this.tabs = this.tabQuery.toArray();
         this.applyRequestedIndex();
         this.cdr.markForCheck();
+        queueMicrotask(() => this.ensureTabVisible(this.activeIndex, 'auto'));
     }
     applyRequestedIndex() {
         if (!this.tabs.length) {
@@ -2524,8 +3275,28 @@ class TdTabs {
     focusButton(index) {
         this.tabButtons.get(index)?.nativeElement.focus();
     }
+    ensureTabVisible(index, behavior) {
+        const list = this.tabList?.nativeElement;
+        const button = this.tabButtons?.get(index)?.nativeElement;
+        if (!list || !button || list.scrollWidth <= list.clientWidth)
+            return;
+        const padding = 8;
+        const visibleStart = list.scrollLeft + padding;
+        const visibleEnd = list.scrollLeft + list.clientWidth - padding;
+        const tabStart = button.offsetLeft;
+        const tabEnd = tabStart + button.offsetWidth;
+        if (tabStart < visibleStart) {
+            list.scrollTo({ left: Math.max(0, tabStart - padding), behavior });
+        }
+        else if (tabEnd > visibleEnd) {
+            list.scrollTo({
+                left: tabEnd - list.clientWidth + padding,
+                behavior,
+            });
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdTabs, isStandalone: true, selector: "td-tabs", inputs: { selectedIndex: "selectedIndex", variant: "variant", alignment: "alignment", stretch: "stretch", dark: "dark", ariaLabel: "ariaLabel", panelFocusable: "panelFocusable" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, queries: [{ propertyName: "tabQuery", predicate: TdTab }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdTabs, isStandalone: true, selector: "td-tabs", inputs: { selectedIndex: "selectedIndex", variant: "variant", alignment: "alignment", stretch: "stretch", dark: "dark", ariaLabel: "ariaLabel", panelFocusable: "panelFocusable" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, queries: [{ propertyName: "tabQuery", predicate: TdTab }], viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: `
     <section
       class="td-tabs"
       [class.td-tabs--dark]="dark"
@@ -2534,6 +3305,7 @@ class TdTabs {
         (dark ? ' td-tabs--dark' : '') + (stretch ? ' td-tabs--stretch' : '')"
     >
       <div
+        #tabList
         class="td-tabs__list"
         role="tablist"
         [attr.aria-label]="ariaLabel"
@@ -2576,7 +3348,7 @@ class TdTabs {
         </div>
       }
     </section>
-  `, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: #fff;--td-tabs-soft: #f7f8fb;--td-tabs-border: #e3e7ef;--td-tabs-text: #263147;--td-tabs-muted: #748096;--td-tabs-accent: #5746d8;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: #19191f;--td-tabs-soft: #202028;--td-tabs-border: #303039;--td-tabs-text: #ededf0;--td-tabs-muted: #a1a1aa;--td-tabs-accent: #b9b0fa}.td-tabs__list{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:center}.td-tabs--align-fin .td-tabs__list{justify-content:flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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-tabs{--td-tabs-bg: #fff;--td-tabs-soft: #f7f8fb;--td-tabs-border: #e3e7ef;--td-tabs-text: #263147;--td-tabs-muted: #748096;--td-tabs-accent: #5746d8;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: #19191f;--td-tabs-soft: #202028;--td-tabs-border: #303039;--td-tabs-text: #ededf0;--td-tabs-muted: #a1a1aa;--td-tabs-accent: #b9b0fa}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs__list{justify-content:flex-start!important}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: TdTabs, decorators: [{
             type: Component,
@@ -2589,6 +3361,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         (dark ? ' td-tabs--dark' : '') + (stretch ? ' td-tabs--stretch' : '')"
     >
       <div
+        #tabList
         class="td-tabs__list"
         role="tablist"
         [attr.aria-label]="ariaLabel"
@@ -2631,10 +3404,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
         </div>
       }
     </section>
-  `, 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-tabs{--td-tabs-bg: #fff;--td-tabs-soft: #f7f8fb;--td-tabs-border: #e3e7ef;--td-tabs-text: #263147;--td-tabs-muted: #748096;--td-tabs-accent: #5746d8;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: #19191f;--td-tabs-soft: #202028;--td-tabs-border: #303039;--td-tabs-text: #ededf0;--td-tabs-muted: #a1a1aa;--td-tabs-accent: #b9b0fa}.td-tabs__list{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:center}.td-tabs--align-fin .td-tabs__list{justify-content:flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: #fff;--td-tabs-soft: #f7f8fb;--td-tabs-border: #e3e7ef;--td-tabs-text: #263147;--td-tabs-muted: #748096;--td-tabs-accent: #5746d8;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: #19191f;--td-tabs-soft: #202028;--td-tabs-border: #303039;--td-tabs-text: #ededf0;--td-tabs-muted: #a1a1aa;--td-tabs-accent: #b9b0fa}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs__list{justify-content:flex-start!important}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"] }]
         }], propDecorators: { tabQuery: [{
                 type: ContentChildren,
                 args: [TdTab]
+            }], tabList: [{
+                type: ViewChild,
+                args: ['tabList']
             }], tabButtons: [{
                 type: ViewChildren,
                 args: ['tabButton']
@@ -2666,5 +3442,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, 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 };
 //# sourceMappingURL=telcomdev-ui.mjs.map