@telcomdev/ui 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +46 -0
  2. package/fesm2022/telcomdev-ui.mjs +653 -96
  3. package/fesm2022/telcomdev-ui.mjs.map +1 -1
  4. package/lib/theme/td-material-theme.css +46 -0
  5. package/lib/theme/td-theme.css +158 -0
  6. package/package.json +1 -1
  7. package/types/telcomdev-ui.d.ts +141 -27
package/lib/theme/td-material-theme.css ADDED
@@ -0,0 +1,46 @@
1
+ /*
2
+ * Optional Angular Material integration for @telcomdev/ui.
3
+ *
4
+ * Usage in a consuming app that already defines Material system tokens:
5
+ * @import '@telcomdev/ui/lib/theme/td-material-theme.css';
6
+ *
7
+ * This file only maps --td-* tokens to --mat-sys-* tokens when they exist.
8
+ * Every value keeps the TelcomDev fallback, so it is safe to import in apps
9
+ * without Angular Material too.
10
+ */
11
+
12
+ :root,
13
+ .td-theme-material {
14
+ --td-font-family: var(--mat-sys-body-large-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
15
+
16
+ --td-color-primary: var(--mat-sys-primary, #3157a4);
17
+ --td-color-primary-hover: color-mix(in srgb, var(--mat-sys-primary, #3157a4) 86%, #000);
18
+ --td-color-primary-active: color-mix(in srgb, var(--mat-sys-primary, #3157a4) 72%, #000);
19
+ --td-color-primary-soft: var(--mat-sys-primary-container, #eaf0fb);
20
+ --td-color-primary-subtle: color-mix(in srgb, var(--mat-sys-primary-container, #eaf0fb) 62%, var(--mat-sys-surface, #fff));
21
+ --td-color-on-primary: var(--mat-sys-on-primary, #ffffff);
22
+
23
+ --td-color-surface: var(--mat-sys-surface, #ffffff);
24
+ --td-color-surface-soft: var(--mat-sys-surface-container-low, #f6f8fb);
25
+ --td-color-surface-muted: var(--mat-sys-surface-container, #edf1f6);
26
+ --td-color-background: var(--mat-sys-background, var(--mat-sys-surface, #f3f6fa));
27
+
28
+ --td-color-border: var(--mat-sys-outline-variant, #dde3ee);
29
+ --td-color-border-strong: var(--mat-sys-outline, #c8d1df);
30
+
31
+ --td-color-text: var(--mat-sys-on-surface, #202b3d);
32
+ --td-color-text-muted: var(--mat-sys-on-surface-variant, #66758b);
33
+ --td-color-text-subtle: color-mix(in srgb, var(--mat-sys-on-surface-variant, #66758b) 74%, transparent);
34
+
35
+ --td-color-danger: var(--mat-sys-error, #b93a3a);
36
+ --td-color-danger-soft: var(--mat-sys-error-container, #fde7e7);
37
+ --td-color-success: var(--mat-sys-tertiary, #16784a);
38
+ --td-color-success-soft: var(--mat-sys-tertiary-container, #e2f5eb);
39
+ --td-color-warning: #a8660b;
40
+ --td-color-warning-soft: #fff2d8;
41
+ --td-color-info: var(--mat-sys-secondary, #2563a8);
42
+ --td-color-info-soft: var(--mat-sys-secondary-container, #e4effb);
43
+
44
+ --td-focus-ring: 0 0 0 3px color-mix(in srgb, var(--td-color-primary) 18%, transparent);
45
+ --td-danger-ring: 0 0 0 3px color-mix(in srgb, var(--td-color-danger) 16%, transparent);
46
+ }
package/lib/theme/td-theme.css ADDED
@@ -0,0 +1,158 @@
1
+ :root,
2
+ .td-theme-light {
3
+ color-scheme: light;
4
+ --td-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
5
+ --td-color-primary: #3157a4;
6
+ --td-color-primary-hover: #254680;
7
+ --td-color-primary-active: #1d3868;
8
+ --td-color-primary-soft: #eaf0fb;
9
+ --td-color-primary-subtle: #f4f7fd;
10
+ --td-color-on-primary: #ffffff;
11
+ --td-color-success: #16784a;
12
+ --td-color-success-soft: #e2f5eb;
13
+ --td-color-warning: #a8660b;
14
+ --td-color-warning-soft: #fff2d8;
15
+ --td-color-danger: #b93a3a;
16
+ --td-color-danger-soft: #fde7e7;
17
+ --td-color-info: #2563a8;
18
+ --td-color-info-soft: #e4effb;
19
+ --td-color-background: #f3f6fa;
20
+ --td-color-surface: #ffffff;
21
+ --td-color-surface-soft: #f6f8fb;
22
+ --td-color-surface-muted: #edf1f6;
23
+ --td-color-border: #dde3ee;
24
+ --td-color-border-strong: #c8d1df;
25
+ --td-color-text: #202b3d;
26
+ --td-color-text-muted: #66758b;
27
+ --td-color-text-subtle: #8b97a8;
28
+ --td-color-overlay: rgba(15, 23, 42, 0.52);
29
+ --td-shadow-sm: 0 8px 22px rgba(32, 43, 61, 0.08);
30
+ --td-shadow-md: 0 18px 46px rgba(32, 43, 61, 0.14);
31
+ --td-shadow-lg: 0 28px 75px rgba(15, 23, 42, 0.24);
32
+ --td-shadow-panel: 0 22px 55px rgba(15, 23, 42, 0.18);
33
+ --td-focus-ring: 0 0 0 3px color-mix(in srgb, var(--td-color-primary) 18%, transparent);
34
+ --td-danger-ring: 0 0 0 3px color-mix(in srgb, var(--td-color-danger) 16%, transparent);
35
+ --td-radius-sm: 0.55rem;
36
+ --td-radius-md: 0.75rem;
37
+ --td-radius-lg: 0.9rem;
38
+ --td-radius-xl: 1rem;
39
+ --td-radius-pill: 999px;
40
+ --td-z-content: 0;
41
+ --td-z-sticky: 100;
42
+ --td-z-backdrop: 700;
43
+ --td-z-sidebar: 900;
44
+ --td-z-header: 950;
45
+ --td-z-overlay: 1000;
46
+ }
47
+
48
+ .td-theme-dark {
49
+ color-scheme: dark;
50
+ --td-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
51
+ --td-color-primary: #8aa7e6;
52
+ --td-color-primary-hover: #a8bdf0;
53
+ --td-color-primary-active: #c3d1f7;
54
+ --td-color-primary-soft: #1f2b45;
55
+ --td-color-primary-subtle: #182235;
56
+ --td-color-on-primary: #ffffff;
57
+ --td-color-success: #56c28d;
58
+ --td-color-success-soft: #173828;
59
+ --td-color-warning: #e2a84d;
60
+ --td-color-warning-soft: #3e2c12;
61
+ --td-color-danger: #f07878;
62
+ --td-color-danger-soft: #462020;
63
+ --td-color-info: #79a9e8;
64
+ --td-color-info-soft: #182b43;
65
+ --td-color-background: #11141a;
66
+ --td-color-surface: #181b22;
67
+ --td-color-surface-soft: #20242d;
68
+ --td-color-surface-muted: #272d38;
69
+ --td-color-border: #343b49;
70
+ --td-color-border-strong: #465164;
71
+ --td-color-text: #eef2f8;
72
+ --td-color-text-muted: #a7b0be;
73
+ --td-color-text-subtle: #7f8898;
74
+ --td-color-overlay: rgba(0, 0, 0, 0.62);
75
+ --td-shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.26);
76
+ --td-shadow-md: 0 20px 54px rgba(0, 0, 0, 0.36);
77
+ --td-shadow-lg: 0 28px 75px rgba(0, 0, 0, 0.42);
78
+ --td-shadow-panel: 0 22px 55px rgba(0, 0, 0, 0.36);
79
+ --td-focus-ring: 0 0 0 3px color-mix(in srgb, var(--td-color-primary) 22%, transparent);
80
+ --td-danger-ring: 0 0 0 3px color-mix(in srgb, var(--td-color-danger) 18%, transparent);
81
+ --td-radius-sm: 0.55rem;
82
+ --td-radius-md: 0.75rem;
83
+ --td-radius-lg: 0.9rem;
84
+ --td-radius-xl: 1rem;
85
+ --td-radius-pill: 999px;
86
+ --td-z-content: 0;
87
+ --td-z-sticky: 100;
88
+ --td-z-backdrop: 700;
89
+ --td-z-sidebar: 900;
90
+ --td-z-header: 950;
91
+ --td-z-overlay: 1000;
92
+ }
93
+
94
+ /*
95
+ * Fallback minimo para componentes basados en Angular CDK Overlay.
96
+ * La app consumidora puede seguir usando @angular/cdk/overlay-prebuilt.css,
97
+ * pero estos estilos evitan que selects/dialogos caigan en la esquina superior
98
+ * si ese CSS global no fue importado o fue sobrescrito.
99
+ */
100
+ .cdk-overlay-container,
101
+ .cdk-global-overlay-wrapper {
102
+ top: 0;
103
+ left: 0;
104
+ width: 100%;
105
+ height: 100%;
106
+ pointer-events: none;
107
+ }
108
+
109
+ .cdk-overlay-container {
110
+ position: fixed;
111
+ z-index: var(--td-z-overlay, 1000);
112
+ }
113
+
114
+ .cdk-overlay-container:empty {
115
+ display: none;
116
+ }
117
+
118
+ .cdk-global-overlay-wrapper {
119
+ position: absolute;
120
+ z-index: var(--td-z-overlay, 1000);
121
+ display: flex;
122
+ }
123
+
124
+ .cdk-overlay-pane {
125
+ position: absolute;
126
+ z-index: var(--td-z-overlay, 1000);
127
+ display: flex;
128
+ max-width: 100%;
129
+ max-height: 100%;
130
+ box-sizing: border-box;
131
+ pointer-events: none;
132
+ }
133
+
134
+ .cdk-overlay-pane > * {
135
+ pointer-events: auto;
136
+ }
137
+
138
+ .cdk-overlay-connected-position-bounding-box {
139
+ position: absolute;
140
+ z-index: var(--td-z-overlay, 1000);
141
+ display: flex;
142
+ min-width: 1px;
143
+ min-height: 1px;
144
+ flex-direction: column;
145
+ pointer-events: none;
146
+ }
147
+
148
+ .cdk-overlay-backdrop {
149
+ position: absolute;
150
+ inset: 0;
151
+ z-index: var(--td-z-overlay, 1000);
152
+ pointer-events: auto;
153
+ -webkit-tap-highlight-color: transparent;
154
+ }
155
+
156
+ .cdk-overlay-dark-backdrop {
157
+ background: var(--td-color-overlay, rgba(15, 23, 42, 0.52));
158
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telcomdev/ui",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "description": "Librería UI reutilizable para los sistemas TelcomDev.",
5
5
  "keywords": [
6
6
  "angular",
package/types/telcomdev-ui.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import { AfterContentChecked, EventEmitter, OnChanges, OnDestroy, SimpleChanges, InjectionToken, Type, ModelSignal, OutputEmitterRef, TemplateRef, AfterContentInit } from '@angular/core';
2
+ import { AfterContentChecked, EventEmitter, ModelSignal, OutputEmitterRef, OnChanges, OnDestroy, SimpleChanges, InjectionToken, Type, AfterViewInit, TemplateRef, AfterContentInit } from '@angular/core';
3
3
  import { ControlValueAccessor } from '@angular/forms';
4
4
  import { FormCheckboxControl, WithOptionalFieldTree, DisabledReason, ValidationError, FormValueControl } from '@angular/forms/signals';
5
- import { ScrollStrategy } from '@angular/cdk/overlay';
5
+ import { ScrollStrategy, ConnectedPosition } from '@angular/cdk/overlay';
6
6
  import { Observable } from 'rxjs';
7
7
  import { DialogRef } from '@angular/cdk/dialog';
8
8
  import * as _telcomdev_ui from '@telcomdev/ui';
@@ -64,6 +64,23 @@ declare class TdButton implements AfterContentChecked {
64
64
  static ngAcceptInputType_iconOnly: unknown;
65
65
  }
66
66
 
67
+ interface TdFormControlBridge {
68
+ readonly usesSignalForms: boolean;
69
+ isDisabled(fieldDisabled: boolean): boolean;
70
+ shouldDisplayError(displayMode: TdErrorDisplay, invalid: boolean, hasErrorMessage: boolean, touched: boolean, dirty: boolean): boolean;
71
+ registerOnTouched(fn: () => void): void;
72
+ setDisabledState(disabled: boolean): void;
73
+ markTouched(touched: ModelSignal<boolean>, touch: OutputEmitterRef<void>): void;
74
+ }
75
+ type TdErrorDisplay = 'auto' | 'always' | 'touched' | 'dirty' | 'never';
76
+ /**
77
+ * Puente reutilizable entre Signal Forms y ControlValueAccessor.
78
+ *
79
+ * Los inputs del contrato se declaran en cada componente porque el compilador
80
+ * de Signal Forms de Angular 21 necesita encontrarlos directamente allí.
81
+ */
82
+ declare function createTdFormControlBridge(): TdFormControlBridge;
83
+
67
84
  declare class TdCheckbox implements ControlValueAccessor, FormCheckboxControl {
68
85
  private readonly cdr;
69
86
  private readonly formBridge;
@@ -87,8 +104,11 @@ declare class TdCheckbox implements ControlValueAccessor, FormCheckboxControl {
87
104
  readonly touched: _angular_core.ModelSignal<boolean>;
88
105
  readonly touch: _angular_core.OutputEmitterRef<void>;
89
106
  readonly error: _angular_core.InputSignal<string>;
107
+ readonly errorDisplay: _angular_core.InputSignal<TdErrorDisplay>;
90
108
  readonly checked: _angular_core.ModelSignal<boolean>;
91
109
  protected readonly isDisabled: _angular_core.Signal<boolean>;
110
+ protected readonly fieldError: _angular_core.Signal<string>;
111
+ protected readonly shouldDisplayFieldError: _angular_core.Signal<boolean>;
92
112
  protected readonly displayError: _angular_core.Signal<string>;
93
113
  protected readonly hasError: _angular_core.Signal<boolean>;
94
114
  protected get inputId(): string;
@@ -103,7 +123,7 @@ declare class TdCheckbox implements ControlValueAccessor, FormCheckboxControl {
103
123
  protected handleClick(event: MouseEvent): void;
104
124
  protected handleBlur(): void;
105
125
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdCheckbox, never>;
106
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdCheckbox, "td-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "dark": { "alias": "dark"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "checked": "checkedChange"; }, never, never, true, never>;
126
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdCheckbox, "td-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "dark": { "alias": "dark"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "checked": "checkedChange"; }, never, never, true, never>;
107
127
  }
108
128
 
109
129
  type TdDataTableAlineacion = 'inicio' | 'centro' | 'fin';
@@ -149,6 +169,8 @@ declare class TdDataTable<T extends object> implements OnChanges, OnDestroy {
149
169
  total: number;
150
170
  cargando: boolean;
151
171
  puedeCargarMas: boolean;
172
+ virtualizar: boolean;
173
+ virtualizarDesde: number;
152
174
  itemSize: number;
153
175
  filasAntesDeCargar: number;
154
176
  altura: string;
@@ -165,7 +187,10 @@ declare class TdDataTable<T extends object> implements OnChanges, OnDestroy {
165
187
  readonly cargarMas: EventEmitter<void>;
166
188
  protected busqueda: string;
167
189
  private timeoutBusqueda;
168
- private ultimaLongitudSolicitada;
190
+ private datosAnteriores;
191
+ private recalculoPendiente;
192
+ private cargaIncrementalHabilitada;
193
+ private scrollDeUsuarioPendiente;
169
194
  ngOnChanges(changes: SimpleChanges): void;
170
195
  ngOnDestroy(): void;
171
196
  protected columnasGrid(): string;
@@ -178,11 +203,18 @@ declare class TdDataTable<T extends object> implements OnChanges, OnDestroy {
178
203
  protected iconoAccion(accion: TdDataTableAccion<T>, fila: T): string;
179
204
  protected tonoAccion(accion: TdDataTableAccion<T>, fila: T): TdDataTableTono;
180
205
  protected botonesVisibles(): TdDataTableBoton[];
206
+ protected usaVirtualizacion(): boolean;
181
207
  protected ejecutarAccion(accion: TdDataTableAccion<T>, fila: T, indice: number): void;
182
- protected alCambiarIndice(): void;
208
+ protected marcarScrollUsuario(): void;
209
+ protected alDesplazarViewport(): void;
210
+ protected alDesplazarLista(event: Event): void;
183
211
  protected readonly trackFila: (_indice: number, fila: T) => unknown;
212
+ private programarRecalculoViewport;
213
+ private debeVolverAlInicio;
214
+ private claveFila;
215
+ private intentarCargarMas;
184
216
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdDataTable<any>, never>;
185
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdDataTable<any>, "td-data-table", never, { "datos": { "alias": "datos"; "required": false; }; "columnas": { "alias": "columnas"; "required": false; }; "acciones": { "alias": "acciones"; "required": false; }; "botones": { "alias": "botones"; "required": false; }; "total": { "alias": "total"; "required": false; }; "cargando": { "alias": "cargando"; "required": false; }; "puedeCargarMas": { "alias": "puedeCargarMas"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "filasAntesDeCargar": { "alias": "filasAntesDeCargar"; "required": false; }; "altura": { "alias": "altura"; "required": false; }; "campoId": { "alias": "campoId"; "required": false; }; "oscuro": { "alias": "oscuro"; "required": false; }; "mostrarBusqueda": { "alias": "mostrarBusqueda"; "required": false; }; "placeholderBusqueda": { "alias": "placeholderBusqueda"; "required": false; }; "textoVacio": { "alias": "textoVacio"; "required": false; }; "descripcionVacio": { "alias": "descripcionVacio"; "required": false; }; "debounceBusqueda": { "alias": "debounceBusqueda"; "required": false; }; }, { "busquedaChange": "busquedaChange"; "accion": "accion"; "botonClick": "botonClick"; "cargarMas": "cargarMas"; }, never, ["[tdDataTableFilters]", "[tdDataTableActions]"], true, never>;
217
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdDataTable<any>, "td-data-table", never, { "datos": { "alias": "datos"; "required": false; }; "columnas": { "alias": "columnas"; "required": false; }; "acciones": { "alias": "acciones"; "required": false; }; "botones": { "alias": "botones"; "required": false; }; "total": { "alias": "total"; "required": false; }; "cargando": { "alias": "cargando"; "required": false; }; "puedeCargarMas": { "alias": "puedeCargarMas"; "required": false; }; "virtualizar": { "alias": "virtualizar"; "required": false; }; "virtualizarDesde": { "alias": "virtualizarDesde"; "required": false; }; "itemSize": { "alias": "itemSize"; "required": false; }; "filasAntesDeCargar": { "alias": "filasAntesDeCargar"; "required": false; }; "altura": { "alias": "altura"; "required": false; }; "campoId": { "alias": "campoId"; "required": false; }; "oscuro": { "alias": "oscuro"; "required": false; }; "mostrarBusqueda": { "alias": "mostrarBusqueda"; "required": false; }; "placeholderBusqueda": { "alias": "placeholderBusqueda"; "required": false; }; "textoVacio": { "alias": "textoVacio"; "required": false; }; "descripcionVacio": { "alias": "descripcionVacio"; "required": false; }; "debounceBusqueda": { "alias": "debounceBusqueda"; "required": false; }; }, { "busquedaChange": "busquedaChange"; "accion": "accion"; "botonClick": "botonClick"; "cargarMas": "cargarMas"; }, never, ["[tdDataTableFilters]", "[tdDataTableActions]"], true, never>;
186
218
  }
187
219
 
188
220
  interface TdDateRange {
@@ -225,12 +257,15 @@ declare class TdDatePicker implements ControlValueAccessor, FormValueControl<TdD
225
257
  readonly touched: _angular_core.ModelSignal<boolean>;
226
258
  readonly touch: _angular_core.OutputEmitterRef<void>;
227
259
  readonly error: _angular_core.InputSignal<string>;
260
+ readonly errorDisplay: _angular_core.InputSignal<TdErrorDisplay>;
228
261
  minDate: string | number | null | undefined;
229
262
  maxDate: string | number | null | undefined;
230
263
  clearable: boolean;
231
264
  dark: boolean;
232
265
  readonly value: _angular_core.ModelSignal<TdDatePickerValue>;
233
266
  protected readonly isDisabled: _angular_core.Signal<boolean>;
267
+ protected readonly fieldError: _angular_core.Signal<string>;
268
+ protected readonly shouldDisplayFieldError: _angular_core.Signal<boolean>;
234
269
  protected readonly displayError: _angular_core.Signal<string>;
235
270
  protected readonly hasError: _angular_core.Signal<boolean>;
236
271
  readonly selectionChange: EventEmitter<TdDatePickerValue>;
@@ -293,12 +328,15 @@ declare class TdDatePicker implements ControlValueAccessor, FormValueControl<TdD
293
328
  private normalizeValue;
294
329
  private format;
295
330
  private fromIso;
331
+ private isValidIsoDate;
332
+ private isIsoDateText;
333
+ private isValidDate;
296
334
  private toIso;
297
335
  private startOfMonth;
298
336
  private monthIntersectsLimits;
299
337
  private yearIntersectsLimits;
300
338
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdDatePicker, never>;
301
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdDatePicker, "td-date-picker", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "minDate": { "alias": "min"; "required": false; }; "maxDate": { "alias": "max"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; "selectionChange": "selectionChange"; "openedChange": "openedChange"; }, never, never, true, never>;
339
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdDatePicker, "td-date-picker", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "minDate": { "alias": "min"; "required": false; }; "maxDate": { "alias": "max"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; "selectionChange": "selectionChange"; "openedChange": "openedChange"; }, never, never, true, never>;
302
340
  }
303
341
 
304
342
  type TdDialogTamano = 'pequeno' | 'mediano' | 'grande' | 'pantalla';
@@ -318,6 +356,7 @@ interface TdDialogConfig<D = unknown> {
318
356
  autoFocus?: 'dialog' | 'first-tabbable' | 'first-heading' | string | boolean;
319
357
  restaurarFoco?: boolean;
320
358
  oscuro?: boolean;
359
+ draggable?: boolean;
321
360
  panelClass?: string | string[];
322
361
  ariaLabel?: string;
323
362
  }
@@ -382,21 +421,6 @@ declare class TdFooter {
382
421
  static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdFooter, "td-footer", never, { "empresa": { "alias": "empresa"; "required": false; }; "texto": { "alias": "texto"; "required": false; }; "version": { "alias": "version"; "required": false; }; "oscuro": { "alias": "oscuro"; "required": false; }; "compacto": { "alias": "compacto"; "required": false; }; "anio": { "alias": "anio"; "required": false; }; }, {}, never, ["[tdFooterLinks]", "[tdFooterActions]"], true, never>;
383
422
  }
384
423
 
385
- interface TdFormControlBridge {
386
- readonly usesSignalForms: boolean;
387
- isDisabled(fieldDisabled: boolean): boolean;
388
- registerOnTouched(fn: () => void): void;
389
- setDisabledState(disabled: boolean): void;
390
- markTouched(touched: ModelSignal<boolean>, touch: OutputEmitterRef<void>): void;
391
- }
392
- /**
393
- * Puente reutilizable entre Signal Forms y ControlValueAccessor.
394
- *
395
- * Los inputs del contrato se declaran en cada componente porque el compilador
396
- * de Signal Forms de Angular 21 necesita encontrarlos directamente allí.
397
- */
398
- declare function createTdFormControlBridge(): TdFormControlBridge;
399
-
400
424
  interface TdHeaderNotificacion {
401
425
  id: string | number;
402
426
  titulo: string;
@@ -741,6 +765,7 @@ declare class TdInput implements ControlValueAccessor, FormValueControl<TdInputV
741
765
  readonly touched: _angular_core.ModelSignal<boolean>;
742
766
  readonly touch: _angular_core.OutputEmitterRef<void>;
743
767
  readonly error: _angular_core.InputSignal<string>;
768
+ readonly errorDisplay: _angular_core.InputSignal<TdErrorDisplay>;
744
769
  clearable: boolean;
745
770
  dark: boolean;
746
771
  readonly showCounter: _angular_core.InputSignal<boolean>;
@@ -760,6 +785,8 @@ declare class TdInput implements ControlValueAccessor, FormValueControl<TdInputV
760
785
  set maxlength(value: number | null);
761
786
  readonly value: _angular_core.ModelSignal<TdInputValue>;
762
787
  protected readonly isDisabled: _angular_core.Signal<boolean>;
788
+ protected readonly fieldError: _angular_core.Signal<string>;
789
+ protected readonly shouldDisplayFieldError: _angular_core.Signal<boolean>;
763
790
  protected readonly displayError: _angular_core.Signal<string>;
764
791
  protected readonly hasError: _angular_core.Signal<boolean>;
765
792
  protected readonly resolvedMinLength: _angular_core.Signal<number | null>;
@@ -809,7 +836,82 @@ declare class TdInput implements ControlValueAccessor, FormValueControl<TdInputV
809
836
  private padTimePart;
810
837
  private setValue;
811
838
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdInput, never>;
812
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdInput, "td-input", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; "isSignal": true; }; "emptyValue": { "alias": "emptyValue"; "required": false; }; "sanitize": { "alias": "sanitize"; "required": false; }; "sanitizeValue": { "alias": "sanitizeValue"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "integerDigits": { "alias": "integerDigits"; "required": false; }; "decimalDigits": { "alias": "decimalDigits"; "required": false; }; "minValue": { "alias": "min"; "required": false; "isSignal": true; }; "maxValue": { "alias": "max"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
839
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdInput, "td-input", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; "isSignal": true; }; "emptyValue": { "alias": "emptyValue"; "required": false; }; "sanitize": { "alias": "sanitize"; "required": false; }; "sanitizeValue": { "alias": "sanitizeValue"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "integerDigits": { "alias": "integerDigits"; "required": false; }; "decimalDigits": { "alias": "decimalDigits"; "required": false; }; "minValue": { "alias": "min"; "required": false; "isSignal": true; }; "maxValue": { "alias": "max"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "pattern": { "alias": "pattern"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
840
+ }
841
+
842
+ type TdTextareaValue = string | null;
843
+ type TdTextareaEmptyValue = 'auto' | 'null' | 'empty-string';
844
+ declare class TdTextarea implements AfterViewInit, ControlValueAccessor, FormValueControl<TdTextareaValue> {
845
+ private readonly cdr;
846
+ private readonly formBridge;
847
+ private readonly generatedId;
848
+ private readonly legacyMinLength;
849
+ private readonly legacyMaxLength;
850
+ private receivedNullValue;
851
+ private nativeTextarea?;
852
+ id: string;
853
+ label: string;
854
+ placeholder: string;
855
+ hint: string;
856
+ rows: number;
857
+ dark: boolean;
858
+ clearable: boolean;
859
+ emptyValue: TdTextareaEmptyValue;
860
+ autoResize: boolean;
861
+ maxAutoRows: number | null;
862
+ readonly name: _angular_core.InputSignal<string>;
863
+ readonly disabled: _angular_core.InputSignal<boolean>;
864
+ readonly disabledReasons: _angular_core.InputSignal<readonly WithOptionalFieldTree<DisabledReason>[]>;
865
+ readonly readonly: _angular_core.InputSignal<boolean>;
866
+ readonly hidden: _angular_core.InputSignal<boolean>;
867
+ readonly invalid: _angular_core.InputSignal<boolean>;
868
+ readonly pending: _angular_core.InputSignal<boolean>;
869
+ readonly dirty: _angular_core.InputSignal<boolean>;
870
+ readonly required: _angular_core.InputSignal<boolean>;
871
+ readonly errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
872
+ readonly touched: _angular_core.ModelSignal<boolean>;
873
+ readonly touch: _angular_core.OutputEmitterRef<void>;
874
+ readonly error: _angular_core.InputSignal<string>;
875
+ readonly errorDisplay: _angular_core.InputSignal<TdErrorDisplay>;
876
+ readonly showCounter: _angular_core.InputSignal<boolean>;
877
+ readonly minLength: _angular_core.InputSignal<number | undefined>;
878
+ readonly maxLength: _angular_core.InputSignal<number | undefined>;
879
+ set minlength(value: number | null);
880
+ set maxlength(value: number | null);
881
+ readonly value: _angular_core.ModelSignal<TdTextareaValue>;
882
+ protected readonly focused: _angular_core.WritableSignal<boolean>;
883
+ protected readonly isDisabled: _angular_core.Signal<boolean>;
884
+ protected readonly fieldError: _angular_core.Signal<string>;
885
+ protected readonly shouldDisplayFieldError: _angular_core.Signal<boolean>;
886
+ protected readonly displayError: _angular_core.Signal<string>;
887
+ protected readonly hasError: _angular_core.Signal<boolean>;
888
+ protected readonly resolvedMinLength: _angular_core.Signal<number | null>;
889
+ protected readonly resolvedMaxLength: _angular_core.Signal<number | null>;
890
+ protected readonly currentLength: _angular_core.Signal<number>;
891
+ protected readonly counterVisible: _angular_core.Signal<boolean>;
892
+ protected readonly counterAtLimit: _angular_core.Signal<boolean>;
893
+ protected readonly hasSupportingContent: _angular_core.Signal<boolean>;
894
+ protected readonly hasValue: _angular_core.Signal<boolean>;
895
+ protected readonly labelFloating: _angular_core.Signal<boolean>;
896
+ protected get textareaId(): string;
897
+ protected get descriptionId(): string | null;
898
+ private onChange;
899
+ ngAfterViewInit(): void;
900
+ writeValue(value: unknown): void;
901
+ registerOnChange(fn: (value: TdTextareaValue) => void): void;
902
+ registerOnTouched(fn: () => void): void;
903
+ setDisabledState(disabled: boolean): void;
904
+ focus(options?: FocusOptions): void;
905
+ protected handleInput(event: Event): void;
906
+ protected handleFocus(): void;
907
+ protected handleBlur(): void;
908
+ protected clear(): void;
909
+ private setValue;
910
+ private resolveEmptyValue;
911
+ private resizeTextarea;
912
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdTextarea, never>;
913
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdTextarea, "td-textarea", never, { "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "emptyValue": { "alias": "emptyValue"; "required": false; }; "autoResize": { "alias": "autoResize"; "required": false; }; "maxAutoRows": { "alias": "maxAutoRows"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "showCounter": { "alias": "showCounter"; "required": false; "isSignal": true; }; "minLength": { "alias": "minLength"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "minlength": { "alias": "minlength"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "value": "valueChange"; }, never, never, true, never>;
914
+ static ngAcceptInputType_autoResize: unknown;
813
915
  }
814
916
 
815
917
  interface TdSelectOption<T = unknown> {
@@ -849,6 +951,7 @@ declare class TdAutocompleteSelect<T = unknown> implements ControlValueAccessor,
849
951
  readonly touched: _angular_core.ModelSignal<boolean>;
850
952
  readonly touch: _angular_core.OutputEmitterRef<void>;
851
953
  readonly error: _angular_core.InputSignal<string>;
954
+ readonly errorDisplay: _angular_core.InputSignal<TdErrorDisplay>;
852
955
  emptyText: string;
853
956
  clearable: boolean;
854
957
  dark: boolean;
@@ -861,6 +964,8 @@ declare class TdAutocompleteSelect<T = unknown> implements ControlValueAccessor,
861
964
  readonly searchChange: EventEmitter<string>;
862
965
  readonly value: _angular_core.ModelSignal<T | null>;
863
966
  protected readonly isDisabled: _angular_core.Signal<boolean>;
967
+ protected readonly fieldError: _angular_core.Signal<string>;
968
+ protected readonly shouldDisplayFieldError: _angular_core.Signal<boolean>;
864
969
  protected readonly displayError: _angular_core.Signal<string>;
865
970
  protected readonly hasError: _angular_core.Signal<boolean>;
866
971
  protected search: string;
@@ -868,6 +973,7 @@ declare class TdAutocompleteSelect<T = unknown> implements ControlValueAccessor,
868
973
  protected activeIndex: number;
869
974
  protected readonly focused: _angular_core.WritableSignal<boolean>;
870
975
  protected readonly scrollStrategy: ScrollStrategy;
976
+ protected readonly overlayPositions: ConnectedPosition[];
871
977
  protected get inputId(): string;
872
978
  protected get listId(): string;
873
979
  protected get filteredOptions(): TdSelectOption<T>[];
@@ -881,6 +987,7 @@ declare class TdAutocompleteSelect<T = unknown> implements ControlValueAccessor,
881
987
  focus(options?: FocusOptions): void;
882
988
  protected compare(first: T | null, second: T | null): boolean;
883
989
  protected openPanel(): void;
990
+ protected onOverlayAttached(): void;
884
991
  protected handleFocus(): void;
885
992
  protected handleBlur(): void;
886
993
  protected close(): void;
@@ -892,10 +999,11 @@ declare class TdAutocompleteSelect<T = unknown> implements ControlValueAccessor,
892
999
  private moveActive;
893
1000
  private firstEnabledIndex;
894
1001
  private scrollActiveOptionIntoView;
1002
+ private scheduleOverlayPositionUpdate;
895
1003
  private scheduleOverflowTextMeasurement;
896
1004
  private measureOverflowText;
897
1005
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdAutocompleteSelect<any>, never>;
898
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdAutocompleteSelect<any>, "td-autocomplete-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; }; "overflowText": { "alias": "overflowText"; "required": false; }; "minimumCharacters": { "alias": "minimumCharacters"; "required": false; }; "filterWith": { "alias": "filterWith"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "selectionChange": "selectionChange"; "searchChange": "searchChange"; "value": "valueChange"; }, never, never, true, never>;
1006
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdAutocompleteSelect<any>, "td-autocomplete-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; }; "overflowText": { "alias": "overflowText"; "required": false; }; "minimumCharacters": { "alias": "minimumCharacters"; "required": false; }; "filterWith": { "alias": "filterWith"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "selectionChange": "selectionChange"; "searchChange": "searchChange"; "value": "valueChange"; }, never, never, true, never>;
899
1007
  }
900
1008
 
901
1009
  declare class TdSelect<T = unknown> implements ControlValueAccessor, FormValueControl<T | null> {
@@ -925,6 +1033,7 @@ declare class TdSelect<T = unknown> implements ControlValueAccessor, FormValueCo
925
1033
  readonly touched: _angular_core.ModelSignal<boolean>;
926
1034
  readonly touch: _angular_core.OutputEmitterRef<void>;
927
1035
  readonly error: _angular_core.InputSignal<string>;
1036
+ readonly errorDisplay: _angular_core.InputSignal<TdErrorDisplay>;
928
1037
  emptyText: string;
929
1038
  clearable: boolean;
930
1039
  dark: boolean;
@@ -934,11 +1043,14 @@ declare class TdSelect<T = unknown> implements ControlValueAccessor, FormValueCo
934
1043
  readonly selectionChange: EventEmitter<T | null>;
935
1044
  readonly value: _angular_core.ModelSignal<T | null>;
936
1045
  protected readonly isDisabled: _angular_core.Signal<boolean>;
1046
+ protected readonly fieldError: _angular_core.Signal<string>;
1047
+ protected readonly shouldDisplayFieldError: _angular_core.Signal<boolean>;
937
1048
  protected readonly displayError: _angular_core.Signal<string>;
938
1049
  protected readonly hasError: _angular_core.Signal<boolean>;
939
1050
  protected open: boolean;
940
1051
  protected activeIndex: number;
941
1052
  protected readonly scrollStrategy: ScrollStrategy;
1053
+ protected readonly overlayPositions: ConnectedPosition[];
942
1054
  protected get labelId(): string;
943
1055
  protected get listId(): string;
944
1056
  protected get selectedOption(): TdSelectOption<T> | undefined;
@@ -957,14 +1069,16 @@ declare class TdSelect<T = unknown> implements ControlValueAccessor, FormValueCo
957
1069
  protected handleKeydown(event: KeyboardEvent): void;
958
1070
  protected handleOverlayKeydown(event: KeyboardEvent): void;
959
1071
  private openPanel;
1072
+ protected onOverlayAttached(): void;
960
1073
  private moveActive;
961
1074
  private firstEnabledIndex;
962
1075
  private setValue;
963
1076
  private scrollActiveOptionIntoView;
1077
+ private scheduleOverlayPositionUpdate;
964
1078
  private scheduleOverflowTextMeasurement;
965
1079
  private measureOverflowText;
966
1080
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<TdSelect<any>, never>;
967
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdSelect<any>, "td-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; }; "overflowText": { "alias": "overflowText"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "selectionChange": "selectionChange"; "value": "valueChange"; }, never, never, true, never>;
1081
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<TdSelect<any>, "td-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "disabledReasons": { "alias": "disabledReasons"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "pending": { "alias": "pending"; "required": false; "isSignal": true; }; "dirty": { "alias": "dirty"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorDisplay": { "alias": "errorDisplay"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; }; "clearable": { "alias": "clearable"; "required": false; }; "dark": { "alias": "dark"; "required": false; }; "scrollBehavior": { "alias": "scrollBehavior"; "required": false; }; "overflowText": { "alias": "overflowText"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "touch": "touch"; "selectionChange": "selectionChange"; "value": "valueChange"; }, never, never, true, never>;
968
1082
  }
969
1083
 
970
1084
  interface MenuSidebar {
@@ -1088,5 +1202,5 @@ declare class TdThemeService {
1088
1202
  static ɵprov: _angular_core.ɵɵInjectableDeclaration<TdThemeService>;
1089
1203
  }
1090
1204
 
1091
- export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TdThemeService, TelcomdevUi, createTdFormControlBridge };
1092
- export type { MenuSidebar, TdAlertaOpciones, TdAlertaTipo, TdButtonSize, TdButtonTone, TdButtonType, TdButtonVariant, TdDataTableAccion, TdDataTableAccionEvento, TdDataTableAlineacion, TdDataTableBoton, TdDataTableColumna, TdDataTableTipoColumna, TdDataTableTono, TdDatePickerMode, TdDatePickerValue, TdDateRange, TdDialogConfig, TdDialogPanelData, TdDialogRefLike, TdDialogTamano, TdFormControlBridge, TdHeaderAccionPerfil, TdHeaderNotificacion, TdIconoDefinicion, TdIconoNombre, TdIconoPersonalizado, TdInputEmptyValue, TdInputMask, TdInputSanitize, TdInputSanitizeFn, TdInputSanitizePreset, TdInputValue, TdSelectOption, TdSelectOverflowText, TdSelectScrollBehavior, TdSidebarModoCerrado, TdSidebarSeleccion, TdTabsAlignment, TdTabsVariant, TdThemeMode, TdThemePaletteColor };
1205
+ export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TelcomdevUi, createTdFormControlBridge };
1206
+ export type { MenuSidebar, TdAlertaOpciones, TdAlertaTipo, TdButtonSize, TdButtonTone, TdButtonType, TdButtonVariant, TdDataTableAccion, TdDataTableAccionEvento, TdDataTableAlineacion, TdDataTableBoton, TdDataTableColumna, TdDataTableTipoColumna, TdDataTableTono, TdDatePickerMode, TdDatePickerValue, TdDateRange, TdDialogConfig, TdDialogPanelData, TdDialogRefLike, TdDialogTamano, TdErrorDisplay, TdFormControlBridge, TdHeaderAccionPerfil, TdHeaderNotificacion, TdIconoDefinicion, TdIconoNombre, TdIconoPersonalizado, TdInputEmptyValue, TdInputMask, TdInputSanitize, TdInputSanitizeFn, TdInputSanitizePreset, TdInputValue, TdSelectOption, TdSelectOverflowText, TdSelectScrollBehavior, TdSidebarModoCerrado, TdSidebarSeleccion, TdTabsAlignment, TdTabsVariant, TdTextareaEmptyValue, TdTextareaValue, TdThemeMode, TdThemePaletteColor };