@telcomdev/ui 0.1.24 → 0.1.26

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.
@@ -23,352 +23,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
23
23
  args: [{ selector: 'td-telcomdev-ui', imports: [], template: ` <p>telcomdev-ui works!</p> `, changeDetection: ChangeDetectionStrategy.Eager }]
24
24
  }] });
25
25
 
26
- class TdAlerta {
27
- static estiloId = 'td-alerta-estilos';
28
- static exito(mensaje, titulo = '¡Operación exitosa!') {
29
- return this.mostrar({
30
- titulo,
31
- mensaje,
32
- tipo: 'exito',
33
- textoConfirmar: 'Aceptar',
34
- });
35
- }
36
- static error(mensaje, titulo = '¡Error!') {
37
- return this.mostrar({
38
- titulo,
39
- mensaje,
40
- tipo: 'error',
41
- textoConfirmar: 'Cerrar',
42
- });
43
- }
44
- static errorSistema(mensaje, titulo = '¡Error de Sistema!') {
45
- return this.mostrar({
46
- titulo,
47
- mensaje,
48
- tipo: 'error',
49
- textoConfirmar: 'Cerrar',
50
- });
51
- }
52
- static advertencia(mensaje, titulo = '¡Advertencia!') {
53
- return this.mostrar({
54
- titulo,
55
- mensaje,
56
- tipo: 'advertencia',
57
- textoConfirmar: 'Aceptar',
58
- });
59
- }
60
- static info(mensaje, titulo = 'Información') {
61
- return this.mostrar({
62
- titulo,
63
- mensaje,
64
- tipo: 'info',
65
- textoConfirmar: 'Aceptar',
66
- });
67
- }
68
- static confirmar(mensaje, titulo = '¿Estás seguro?', textoConfirmar = 'Sí, continuar', textoCancelar = 'Cancelar') {
69
- return this.mostrar({
70
- titulo,
71
- mensaje,
72
- tipo: 'pregunta',
73
- textoConfirmar,
74
- textoCancelar,
75
- mostrarCancelar: true,
76
- });
77
- }
78
- static confirmarEliminar(mensaje = 'Esta acción no se puede deshacer.', titulo = '¿Eliminar registro?') {
79
- return this.mostrar({
80
- titulo,
81
- mensaje,
82
- tipo: 'advertencia',
83
- textoConfirmar: 'Sí, eliminar',
84
- textoCancelar: 'Cancelar',
85
- mostrarCancelar: true,
86
- });
87
- }
88
- static mostrar(opciones) {
89
- if (typeof document === 'undefined') {
90
- return Promise.resolve(false);
91
- }
92
- this.inyectarEstilos();
93
- const config = {
94
- titulo: opciones.titulo ?? '',
95
- mensaje: opciones.mensaje ?? '',
96
- tipo: opciones.tipo ?? 'info',
97
- textoConfirmar: opciones.textoConfirmar ?? 'Aceptar',
98
- textoCancelar: opciones.textoCancelar ?? 'Cancelar',
99
- mostrarCancelar: opciones.mostrarCancelar ?? false,
100
- cerrarConEscape: opciones.cerrarConEscape ?? true,
101
- cerrarConFondo: opciones.cerrarConFondo ?? false,
102
- };
103
- return new Promise((resolve) => {
104
- const fondo = document.createElement('div');
105
- fondo.className = 'td-alerta-fondo';
106
- const modal = document.createElement('div');
107
- modal.className = 'td-alerta-modal';
108
- modal.setAttribute('role', 'dialog');
109
- modal.setAttribute('aria-modal', 'true');
110
- const icono = document.createElement('div');
111
- icono.className = `td-alerta-icono td-alerta-icono--${config.tipo}`;
112
- icono.textContent = this.obtenerIcono(config.tipo);
113
- const titulo = document.createElement('h2');
114
- titulo.className = 'td-alerta-titulo';
115
- titulo.textContent = config.titulo;
116
- const mensaje = document.createElement('p');
117
- mensaje.className = 'td-alerta-mensaje';
118
- mensaje.textContent = config.mensaje;
119
- const acciones = document.createElement('div');
120
- acciones.className = 'td-alerta-acciones';
121
- const botonConfirmar = document.createElement('button');
122
- botonConfirmar.type = 'button';
123
- botonConfirmar.className = `td-alerta-boton td-alerta-boton--${config.tipo}`;
124
- botonConfirmar.textContent = config.textoConfirmar;
125
- const botonCancelar = document.createElement('button');
126
- botonCancelar.type = 'button';
127
- botonCancelar.className = 'td-alerta-boton td-alerta-boton--cancelar';
128
- botonCancelar.textContent = config.textoCancelar;
129
- const cerrar = (resultado) => {
130
- document.removeEventListener('keydown', onKeyDown);
131
- fondo.classList.add('td-alerta-saliendo');
132
- window.setTimeout(() => {
133
- fondo.remove();
134
- resolve(resultado);
135
- }, 140);
136
- };
137
- const onKeyDown = (event) => {
138
- if (event.key === 'Escape' && config.cerrarConEscape) {
139
- cerrar(false);
140
- }
141
- };
142
- botonConfirmar.addEventListener('click', () => cerrar(true));
143
- botonCancelar.addEventListener('click', () => cerrar(false));
144
- if (config.cerrarConFondo) {
145
- fondo.addEventListener('click', (event) => {
146
- if (event.target === fondo) {
147
- cerrar(false);
148
- }
149
- });
150
- }
151
- document.addEventListener('keydown', onKeyDown);
152
- if (config.mostrarCancelar) {
153
- acciones.appendChild(botonCancelar);
154
- }
155
- acciones.appendChild(botonConfirmar);
156
- modal.appendChild(icono);
157
- modal.appendChild(titulo);
158
- if (config.mensaje) {
159
- modal.appendChild(mensaje);
160
- }
161
- modal.appendChild(acciones);
162
- fondo.appendChild(modal);
163
- document.body.appendChild(fondo);
164
- botonConfirmar.focus();
165
- });
166
- }
167
- static obtenerIcono(tipo) {
168
- const iconos = {
169
- exito: '✓',
170
- error: '!',
171
- advertencia: '!',
172
- info: 'i',
173
- pregunta: '?',
174
- };
175
- return iconos[tipo];
176
- }
177
- static inyectarEstilos() {
178
- if (document.getElementById(this.estiloId))
179
- return;
180
- const style = document.createElement('style');
181
- style.id = this.estiloId;
182
- style.textContent = `
183
- .td-alerta-fondo {
184
- position: fixed;
185
- inset: 0;
186
- z-index: 99999;
187
- display: flex;
188
- align-items: center;
189
- justify-content: center;
190
- padding: 1rem;
191
- background: rgba(15, 23, 42, 0.52);
192
- animation: td-alerta-fondo-entrada 160ms ease-out;
193
- }
194
-
195
- .td-alerta-modal {
196
- width: min(100%, 430px);
197
- border-radius: 18px;
198
- background: #ffffff;
199
- padding: 1.75rem;
200
- text-align: center;
201
- box-shadow: 0 22px 70px rgba(15, 23, 42, 0.28);
202
- animation: td-alerta-modal-entrada 180ms ease-out;
203
- font-family: var(--td-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
204
- }
205
-
206
- .td-alerta-icono {
207
- width: 4.25rem;
208
- height: 4.25rem;
209
- margin: 0 auto 1rem;
210
- border-radius: 999px;
211
- display: flex;
212
- align-items: center;
213
- justify-content: center;
214
- font-size: 2.1rem;
215
- font-weight: 800;
216
- }
217
-
218
- .td-alerta-icono--exito {
219
- color: #16a34a;
220
- background: #dcfce7;
221
- }
222
-
223
- .td-alerta-icono--error {
224
- color: #ef4444;
225
- background: #fee2e2;
226
- }
227
-
228
- .td-alerta-icono--advertencia {
229
- color: #f59e0b;
230
- background: #fef3c7;
231
- }
232
-
233
- .td-alerta-icono--info {
234
- color: #2563eb;
235
- background: #dbeafe;
236
- }
237
-
238
- .td-alerta-icono--pregunta {
239
- color: #7c3aed;
240
- background: #ede9fe;
241
- }
242
-
243
- .td-alerta-titulo {
244
- margin: 0;
245
- color: #111827;
246
- font-size: 1.35rem;
247
- line-height: 1.25;
248
- font-weight: 800;
249
- }
250
-
251
- .td-alerta-mensaje {
252
- margin: 0.75rem 0 0;
253
- color: #4b5563;
254
- font-size: 0.96rem;
255
- line-height: 1.55;
256
- }
257
-
258
- .td-alerta-acciones {
259
- display: flex;
260
- justify-content: center;
261
- gap: 0.75rem;
262
- margin-top: 1.5rem;
263
- }
264
-
265
- .td-alerta-boton {
266
- border: 0;
267
- border-radius: 10px;
268
- padding: 0.7rem 1.2rem;
269
- color: #ffffff;
270
- font-size: 0.93rem;
271
- font-weight: 700;
272
- cursor: pointer;
273
- transition: transform 120ms ease, filter 120ms ease, background 120ms ease;
274
- }
275
-
276
- .td-alerta-boton:hover {
277
- filter: brightness(0.96);
278
- }
279
-
280
- .td-alerta-boton:active {
281
- transform: scale(0.98);
282
- }
283
-
284
- .td-alerta-boton:focus {
285
- outline: 3px solid rgba(37, 99, 235, 0.25);
286
- outline-offset: 2px;
287
- }
288
-
289
- .td-alerta-boton--exito {
290
- background: #22c55e;
291
- }
292
-
293
- .td-alerta-boton--error {
294
- background: #ef4444;
295
- }
296
-
297
- .td-alerta-boton--advertencia {
298
- background: #f59e0b;
299
- }
300
-
301
- .td-alerta-boton--info {
302
- background: #2563eb;
303
- }
304
-
305
- .td-alerta-boton--pregunta {
306
- background: #7c3aed;
307
- }
308
-
309
- .td-alerta-boton--cancelar {
310
- background: #6b7280;
311
- }
312
-
313
- .td-alerta-saliendo {
314
- animation: td-alerta-fondo-salida 140ms ease-in forwards;
315
- }
316
-
317
- .td-alerta-saliendo .td-alerta-modal {
318
- animation: td-alerta-modal-salida 140ms ease-in forwards;
319
- }
320
-
321
- @keyframes td-alerta-fondo-entrada {
322
- from { opacity: 0; }
323
- to { opacity: 1; }
324
- }
325
-
326
- @keyframes td-alerta-modal-entrada {
327
- from {
328
- opacity: 0;
329
- transform: translateY(12px) scale(0.96);
330
- }
331
- to {
332
- opacity: 1;
333
- transform: translateY(0) scale(1);
334
- }
335
- }
336
-
337
- @keyframes td-alerta-fondo-salida {
338
- from { opacity: 1; }
339
- to { opacity: 0; }
340
- }
341
-
342
- @keyframes td-alerta-modal-salida {
343
- from {
344
- opacity: 1;
345
- transform: translateY(0) scale(1);
346
- }
347
- to {
348
- opacity: 0;
349
- transform: translateY(8px) scale(0.97);
350
- }
351
- }
352
-
353
- @media (max-width: 480px) {
354
- .td-alerta-modal {
355
- padding: 1.4rem;
356
- border-radius: 16px;
357
- }
358
-
359
- .td-alerta-acciones {
360
- flex-direction: column-reverse;
361
- }
362
-
363
- .td-alerta-boton {
364
- width: 100%;
365
- }
366
- }
367
- `;
368
- document.head.appendChild(style);
369
- }
370
- }
371
-
372
26
  const TD_ICONOS = {
373
27
  home: {
374
28
  path: 'M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V10.5Z',
@@ -609,6 +263,1261 @@ const TD_ICONOS = {
609
263
  };
610
264
  const TD_ICONOS_NOMBRES = Object.freeze(Object.keys(TD_ICONOS));
611
265
 
266
+ class TdAlert {
267
+ static styleId = 'td-alert-styles';
268
+ static hostId = 'td-alert-host';
269
+ static toastWrapperId = 'td-toast-wrapper';
270
+ static toastHostId = 'td-toast-host';
271
+ static toastRootPrefix = 'td-toast-root';
272
+ static alertZIndex = '2147483647';
273
+ static toastQueue = new WeakMap();
274
+ static scrollLockCount = 0;
275
+ static previousBodyOverflow = '';
276
+ static success(message, title = 'Operación exitosa') {
277
+ return this.show({
278
+ title,
279
+ message,
280
+ type: 'success',
281
+ confirmText: 'Aceptar',
282
+ });
283
+ }
284
+ static error(message, title = 'Error') {
285
+ return this.show({
286
+ title,
287
+ message,
288
+ type: 'error',
289
+ confirmText: 'Cerrar',
290
+ });
291
+ }
292
+ static systemError(message, title = 'Error de sistema') {
293
+ return this.error(message, title);
294
+ }
295
+ static warning(message, title = 'Advertencia') {
296
+ return this.show({
297
+ title,
298
+ message,
299
+ type: 'warning',
300
+ confirmText: 'Aceptar',
301
+ });
302
+ }
303
+ static info(message, title = 'Información') {
304
+ return this.show({
305
+ title,
306
+ message,
307
+ type: 'info',
308
+ confirmText: 'Aceptar',
309
+ });
310
+ }
311
+ static confirm(message, title = '¿Estás seguro?', confirmText = 'Sí, continuar', cancelText = 'Cancelar') {
312
+ return this.show({
313
+ title,
314
+ message,
315
+ type: 'question',
316
+ confirmText,
317
+ cancelText,
318
+ showCancel: true,
319
+ });
320
+ }
321
+ static confirmDelete(message = 'Esta acción no se puede deshacer.', title = '¿Eliminar registro?') {
322
+ return this.show({
323
+ title,
324
+ message,
325
+ type: 'warning',
326
+ confirmText: 'Sí, eliminar',
327
+ cancelText: 'Cancelar',
328
+ showCancel: true,
329
+ });
330
+ }
331
+ static show(options) {
332
+ if (typeof document === 'undefined') {
333
+ return Promise.resolve(false);
334
+ }
335
+ this.injectStyles();
336
+ const config = this.normalizeAlertOptions(options);
337
+ const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
338
+ return new Promise((resolve) => {
339
+ this.lockBodyScroll();
340
+ const host = this.getHost();
341
+ const backdrop = document.createElement('dialog');
342
+ backdrop.className = 'td-alert-dialog';
343
+ this.applyAlertLayer(backdrop, this.alertZIndex);
344
+ backdrop.setAttribute('aria-label', config.title || 'Alerta');
345
+ const modal = document.createElement('div');
346
+ modal.className = `td-alert-modal td-alert-modal--${config.type}`;
347
+ modal.setAttribute('role', 'dialog');
348
+ modal.setAttribute('aria-modal', 'true');
349
+ modal.setAttribute('aria-labelledby', 'td-alert-title');
350
+ const accent = document.createElement('span');
351
+ accent.className = 'td-alert-accent';
352
+ accent.setAttribute('aria-hidden', 'true');
353
+ const icon = document.createElement('div');
354
+ icon.className = `td-alert-icon td-alert-icon--${config.type}`;
355
+ icon.appendChild(this.createIcon(this.getAlertIcon(config.type)));
356
+ const title = document.createElement('h2');
357
+ title.id = 'td-alert-title';
358
+ title.className = 'td-alert-title';
359
+ title.textContent = config.title;
360
+ const message = document.createElement('p');
361
+ message.className = 'td-alert-message';
362
+ message.textContent = config.message;
363
+ const actions = document.createElement('div');
364
+ actions.className = 'td-alert-actions';
365
+ const confirmButton = document.createElement('button');
366
+ confirmButton.type = 'button';
367
+ confirmButton.className = `td-alert-button td-alert-button--${config.type}`;
368
+ confirmButton.textContent = config.confirmText;
369
+ const cancelButton = document.createElement('button');
370
+ cancelButton.type = 'button';
371
+ cancelButton.className = 'td-alert-button td-alert-button--cancel';
372
+ cancelButton.textContent = config.cancelText;
373
+ let closed = false;
374
+ const close = (result) => {
375
+ if (closed)
376
+ return;
377
+ closed = true;
378
+ document.removeEventListener('keydown', onKeyDown);
379
+ backdrop.classList.add('td-alert-dialog--leaving');
380
+ window.setTimeout(() => {
381
+ if (typeof backdrop.close === 'function' && backdrop.open) {
382
+ backdrop.close();
383
+ }
384
+ backdrop.remove();
385
+ this.unlockBodyScroll();
386
+ previouslyFocused?.focus?.();
387
+ resolve(result);
388
+ }, 150);
389
+ };
390
+ const onKeyDown = (event) => {
391
+ if (event.key === 'Escape' && config.closeOnEscape) {
392
+ close(false);
393
+ }
394
+ if (event.key === 'Tab') {
395
+ this.keepFocusInside(event, modal);
396
+ }
397
+ };
398
+ confirmButton.addEventListener('click', () => close(true));
399
+ cancelButton.addEventListener('click', () => close(false));
400
+ if (config.closeOnBackdrop) {
401
+ backdrop.addEventListener('click', (event) => {
402
+ if (event.target === backdrop) {
403
+ close(false);
404
+ }
405
+ });
406
+ }
407
+ document.addEventListener('keydown', onKeyDown);
408
+ if (config.showCancel) {
409
+ actions.appendChild(cancelButton);
410
+ }
411
+ actions.appendChild(confirmButton);
412
+ const content = document.createElement('div');
413
+ content.className = 'td-alert-content';
414
+ content.appendChild(title);
415
+ if (config.message) {
416
+ content.appendChild(message);
417
+ }
418
+ content.appendChild(actions);
419
+ modal.appendChild(accent);
420
+ modal.appendChild(icon);
421
+ modal.appendChild(content);
422
+ backdrop.appendChild(modal);
423
+ host.appendChild(backdrop);
424
+ if (typeof backdrop.showModal === 'function') {
425
+ backdrop.showModal();
426
+ }
427
+ else {
428
+ backdrop.setAttribute('open', 'true');
429
+ }
430
+ if (config.autoFocus) {
431
+ confirmButton.focus();
432
+ }
433
+ });
434
+ }
435
+ static notify(message, options = {}) {
436
+ return this.toast(message, options);
437
+ }
438
+ static toast(message, options = {}) {
439
+ if (typeof document === 'undefined') {
440
+ return Promise.resolve(false);
441
+ }
442
+ this.injectStyles();
443
+ const config = this.normalizeToastOptions({ ...options, message });
444
+ return new Promise((resolve) => {
445
+ const root = this.getToastRoot(config.position);
446
+ const toast = document.createElement('section');
447
+ toast.className = `td-toast td-toast--${config.type}`;
448
+ toast.setAttribute('role', config.type === 'error' ? 'alert' : 'status');
449
+ toast.setAttribute('aria-live', config.type === 'error' ? 'assertive' : 'polite');
450
+ const icon = document.createElement('span');
451
+ icon.className = 'td-toast-icon';
452
+ icon.appendChild(this.createIcon(this.getToastIcon(config.type)));
453
+ const content = document.createElement('span');
454
+ content.className = 'td-toast-content';
455
+ if (config.title) {
456
+ const title = document.createElement('strong');
457
+ title.textContent = config.title;
458
+ content.appendChild(title);
459
+ }
460
+ const messageElement = document.createElement('small');
461
+ messageElement.textContent = config.message;
462
+ content.appendChild(messageElement);
463
+ const actions = document.createElement('span');
464
+ actions.className = 'td-toast-actions';
465
+ let timeoutId;
466
+ let frameId;
467
+ let remainingDuration = config.duration;
468
+ let progressRatio = 1;
469
+ let timerStartedAt = 0;
470
+ let closed = false;
471
+ let activated = false;
472
+ const progress = config.showProgress && config.duration > 0
473
+ ? document.createElement('span')
474
+ : null;
475
+ if (progress) {
476
+ progress.className = 'td-toast-progress';
477
+ progress.style.transform = 'scaleX(1)';
478
+ }
479
+ const updateProgress = () => {
480
+ if (!progress || config.duration <= 0 || timeoutId === undefined) {
481
+ return;
482
+ }
483
+ const elapsed = Date.now() - timerStartedAt;
484
+ const currentRemaining = Math.max(0, remainingDuration - elapsed);
485
+ progressRatio = config.duration > 0 ? currentRemaining / config.duration : 0;
486
+ progress.style.transform = `scaleX(${Math.max(0, Math.min(1, progressRatio))})`;
487
+ if (currentRemaining > 0) {
488
+ frameId = window.requestAnimationFrame(updateProgress);
489
+ }
490
+ };
491
+ const close = (result) => {
492
+ if (closed)
493
+ return;
494
+ closed = true;
495
+ if (timeoutId !== undefined) {
496
+ window.clearTimeout(timeoutId);
497
+ }
498
+ if (frameId !== undefined) {
499
+ window.cancelAnimationFrame(frameId);
500
+ }
501
+ toast.classList.add('td-toast--leaving');
502
+ window.setTimeout(() => {
503
+ const queue = this.getToastQueue(root);
504
+ toast.remove();
505
+ this.showNextQueuedToast(root, config.maxVisible);
506
+ this.updateToastQueueIndicator(root);
507
+ if (!root.querySelector('.td-toast') && queue.length === 0) {
508
+ root.remove();
509
+ this.cleanupToastLayer();
510
+ }
511
+ resolve(result);
512
+ }, 160);
513
+ };
514
+ const pauseTimer = () => {
515
+ if (closed || config.duration <= 0 || timeoutId === undefined) {
516
+ return;
517
+ }
518
+ window.clearTimeout(timeoutId);
519
+ timeoutId = undefined;
520
+ remainingDuration = Math.max(0, remainingDuration - (Date.now() - timerStartedAt));
521
+ progressRatio = config.duration > 0 ? remainingDuration / config.duration : 0;
522
+ if (progress) {
523
+ progress.style.transform = `scaleX(${Math.max(0, Math.min(1, progressRatio))})`;
524
+ }
525
+ if (frameId !== undefined) {
526
+ window.cancelAnimationFrame(frameId);
527
+ frameId = undefined;
528
+ }
529
+ toast.classList.add('td-toast--paused');
530
+ };
531
+ const resumeTimer = () => {
532
+ if (closed || config.duration <= 0 || timeoutId !== undefined || remainingDuration <= 0) {
533
+ return;
534
+ }
535
+ timerStartedAt = Date.now();
536
+ timeoutId = window.setTimeout(() => close(false), remainingDuration);
537
+ toast.classList.remove('td-toast--paused');
538
+ if (progress) {
539
+ frameId = window.requestAnimationFrame(updateProgress);
540
+ }
541
+ };
542
+ if (config.actionText) {
543
+ const action = document.createElement('button');
544
+ action.type = 'button';
545
+ action.className = 'td-toast-action';
546
+ action.textContent = config.actionText;
547
+ action.addEventListener('click', () => close(true));
548
+ actions.appendChild(action);
549
+ }
550
+ if (config.dismissible) {
551
+ const dismiss = document.createElement('button');
552
+ dismiss.type = 'button';
553
+ dismiss.className = 'td-toast-dismiss';
554
+ dismiss.setAttribute('aria-label', 'Cerrar notificación');
555
+ dismiss.appendChild(this.createIcon('close'));
556
+ dismiss.addEventListener('click', () => close(false));
557
+ actions.appendChild(dismiss);
558
+ }
559
+ toast.appendChild(icon);
560
+ toast.appendChild(content);
561
+ toast.appendChild(actions);
562
+ if (progress) {
563
+ toast.appendChild(progress);
564
+ }
565
+ const activateToast = () => {
566
+ if (activated) {
567
+ return;
568
+ }
569
+ activated = true;
570
+ toast.addEventListener('pointerenter', pauseTimer);
571
+ toast.addEventListener('pointerleave', resumeTimer);
572
+ toast.addEventListener('focusin', pauseTimer);
573
+ toast.addEventListener('focusout', resumeTimer);
574
+ if (config.duration > 0) {
575
+ resumeTimer();
576
+ }
577
+ };
578
+ toast.addEventListener('td-toast-activate', () => activateToast(), { once: true });
579
+ if (this.getVisibleToastCount(root) >= config.maxVisible) {
580
+ this.getToastQueue(root).push(toast);
581
+ this.updateToastQueueIndicator(root);
582
+ return;
583
+ }
584
+ root.appendChild(toast);
585
+ activateToast();
586
+ });
587
+ }
588
+ static toastSuccess(message, title = 'Guardado') {
589
+ return this.toast(message, { title, type: 'success' });
590
+ }
591
+ static toastError(message, title = 'No se pudo completar') {
592
+ return this.toast(message, { title, type: 'error', duration: 6500 });
593
+ }
594
+ static toastWarning(message, title = 'Atención') {
595
+ return this.toast(message, { title, type: 'warning', duration: 5600 });
596
+ }
597
+ static toastInfo(message, title = 'Información') {
598
+ return this.toast(message, { title, type: 'info' });
599
+ }
600
+ static snackbar(message, options = {}) {
601
+ return this.toast(message, options);
602
+ }
603
+ static snackbarExito(message, titulo = 'Listo') {
604
+ return this.toastSuccess(message, titulo);
605
+ }
606
+ static snackbarError(message, titulo = 'No se pudo completar') {
607
+ return this.toastError(message, titulo);
608
+ }
609
+ static snackbarAdvertencia(message, titulo = 'Atención') {
610
+ return this.toastWarning(message, titulo);
611
+ }
612
+ static snackbarInfo(message, titulo = 'Información') {
613
+ return this.toastInfo(message, titulo);
614
+ }
615
+ static exito(mensaje, titulo = 'Operación exitosa') {
616
+ return this.success(mensaje, titulo);
617
+ }
618
+ static errorSistema(mensaje, titulo = 'Error de sistema') {
619
+ return this.systemError(mensaje, titulo);
620
+ }
621
+ static advertencia(mensaje, titulo = 'Advertencia') {
622
+ return this.warning(mensaje, titulo);
623
+ }
624
+ static confirmar(mensaje, titulo = '¿Estás seguro?', textoConfirmar = 'Sí, continuar', textoCancelar = 'Cancelar') {
625
+ return this.confirm(mensaje, titulo, textoConfirmar, textoCancelar);
626
+ }
627
+ static confirmarEliminar(mensaje = 'Esta acción no se puede deshacer.', titulo = '¿Eliminar registro?') {
628
+ return this.show({
629
+ title: titulo,
630
+ message: mensaje,
631
+ type: 'warning',
632
+ confirmText: 'Sí, eliminar',
633
+ cancelText: 'Cancelar',
634
+ showCancel: true,
635
+ });
636
+ }
637
+ static notificar(options) {
638
+ return this.toast(options.mensaje ?? '', options);
639
+ }
640
+ static normalizeAlertOptions(options) {
641
+ const legacy = options;
642
+ const modern = options;
643
+ return {
644
+ title: modern.title ?? legacy.titulo ?? '',
645
+ message: modern.message ?? legacy.mensaje ?? '',
646
+ type: this.normalizeAlertType(modern.type ?? legacy.tipo ?? 'info'),
647
+ confirmText: modern.confirmText ?? legacy.textoConfirmar ?? 'Aceptar',
648
+ cancelText: modern.cancelText ?? legacy.textoCancelar ?? 'Cancelar',
649
+ showCancel: modern.showCancel ?? legacy.mostrarCancelar ?? false,
650
+ closeOnEscape: modern.closeOnEscape ?? legacy.cerrarConEscape ?? true,
651
+ closeOnBackdrop: modern.closeOnBackdrop ?? legacy.cerrarConFondo ?? false,
652
+ autoFocus: modern.autoFocus ?? legacy.autoFocus ?? true,
653
+ };
654
+ }
655
+ static normalizeToastOptions(options) {
656
+ const legacy = options;
657
+ const modern = options;
658
+ const explicitPosition = modern.position ?? legacy.posicion;
659
+ const fallbackPosition = this.hasBlockingOverlayOpen() ? 'top-right' : 'bottom-left';
660
+ return {
661
+ title: modern.title ?? legacy.titulo ?? '',
662
+ message: modern.message ?? legacy.mensaje ?? '',
663
+ type: this.normalizeToastType(modern.type ?? legacy.tipo ?? 'neutral'),
664
+ position: this.normalizeToastPosition(explicitPosition ?? fallbackPosition),
665
+ duration: modern.duration ?? legacy.duracion ?? 4200,
666
+ actionText: modern.actionText ?? legacy.textoAccion ?? '',
667
+ dismissible: modern.dismissible ?? legacy.cerrable ?? true,
668
+ showProgress: modern.showProgress ?? legacy.mostrarProgreso ?? true,
669
+ maxVisible: modern.maxVisible ?? legacy.maximoVisible ?? 4,
670
+ };
671
+ }
672
+ static hasBlockingOverlayOpen() {
673
+ if (typeof document === 'undefined')
674
+ return false;
675
+ return !!document.querySelector('.cdk-overlay-pane.td-dialog-overlay, .td-alert-dialog[open], .td-alert-dialog');
676
+ }
677
+ static normalizeAlertType(type) {
678
+ const map = {
679
+ exito: 'success',
680
+ advertencia: 'warning',
681
+ pregunta: 'question',
682
+ success: 'success',
683
+ error: 'error',
684
+ warning: 'warning',
685
+ info: 'info',
686
+ question: 'question',
687
+ };
688
+ return map[type] ?? 'info';
689
+ }
690
+ static normalizeToastType(type) {
691
+ const map = {
692
+ exito: 'success',
693
+ advertencia: 'warning',
694
+ success: 'success',
695
+ error: 'error',
696
+ warning: 'warning',
697
+ info: 'info',
698
+ neutral: 'neutral',
699
+ };
700
+ return map[type] ?? 'neutral';
701
+ }
702
+ static normalizeToastPosition(position) {
703
+ const map = {
704
+ 'inferior-izquierda': 'bottom-left',
705
+ 'inferior-derecha': 'bottom-right',
706
+ 'superior-izquierda': 'top-left',
707
+ 'superior-derecha': 'top-right',
708
+ 'inferior-centro': 'bottom-center',
709
+ 'superior-centro': 'top-center',
710
+ 'bottom-left': 'bottom-left',
711
+ 'bottom-right': 'bottom-right',
712
+ 'top-left': 'top-left',
713
+ 'top-right': 'top-right',
714
+ 'bottom-center': 'bottom-center',
715
+ 'top-center': 'top-center',
716
+ };
717
+ return map[position] ?? 'bottom-left';
718
+ }
719
+ static getToastRoot(position) {
720
+ const id = `${this.toastRootPrefix}-${position}`;
721
+ const existing = document.getElementById(id);
722
+ if (existing) {
723
+ this.applyAlertLayer(existing, this.nextLayer(this.alertZIndex));
724
+ const layer = this.getToastLayer();
725
+ if (existing.parentElement !== layer) {
726
+ layer.appendChild(existing);
727
+ }
728
+ return existing;
729
+ }
730
+ const root = document.createElement('div');
731
+ root.id = id;
732
+ root.className = `td-toast-root td-toast-root--${position}`;
733
+ this.applyAlertLayer(root, this.nextLayer(this.alertZIndex));
734
+ this.getToastLayer().appendChild(root);
735
+ return root;
736
+ }
737
+ static getToastLayer() {
738
+ const existing = document.getElementById(this.toastHostId);
739
+ if (existing instanceof HTMLElement) {
740
+ return this.bringToastLayerToFront(existing);
741
+ }
742
+ const host = document.createElement('div');
743
+ host.id = this.toastHostId;
744
+ host.className = 'td-toast-layer';
745
+ this.applyAlertLayer(host, this.nextLayer(this.alertZIndex));
746
+ host.setAttribute('aria-hidden', 'true');
747
+ host.setAttribute('popover', 'manual');
748
+ return this.bringToastLayerToFront(host);
749
+ }
750
+ static bringToastLayerToFront(layer) {
751
+ const wrapper = this.getToastWrapper();
752
+ if (layer.parentElement !== wrapper) {
753
+ wrapper.appendChild(layer);
754
+ }
755
+ const toastPopover = layer;
756
+ if (typeof toastPopover.showPopover === 'function' && !toastPopover.matches?.(':popover-open')) {
757
+ toastPopover.showPopover();
758
+ }
759
+ return layer;
760
+ }
761
+ static getToastWrapper() {
762
+ const existing = document.getElementById(this.toastWrapperId);
763
+ if (existing instanceof HTMLElement) {
764
+ const mountTarget = this.getToastMountTarget();
765
+ if (existing.parentElement !== mountTarget) {
766
+ mountTarget.appendChild(existing);
767
+ }
768
+ return existing;
769
+ }
770
+ const wrapper = document.createElement('div');
771
+ wrapper.id = this.toastWrapperId;
772
+ wrapper.className = 'cdk-global-overlay-wrapper td-toast-overlay-wrapper';
773
+ this.applyAlertLayer(wrapper, this.nextLayer(this.alertZIndex));
774
+ this.getToastMountTarget().appendChild(wrapper);
775
+ return wrapper;
776
+ }
777
+ static getToastMountTarget() {
778
+ return document.querySelector('.cdk-overlay-container') ?? document.body;
779
+ }
780
+ static getHost() {
781
+ const existing = document.getElementById(this.hostId);
782
+ if (existing) {
783
+ document.body.appendChild(existing);
784
+ return existing;
785
+ }
786
+ const host = document.createElement('div');
787
+ host.id = this.hostId;
788
+ host.className = 'td-alert-host';
789
+ this.applyAlertLayer(host, this.alertZIndex);
790
+ document.body.appendChild(host);
791
+ return host;
792
+ }
793
+ static applyAlertLayer(element, zIndex) {
794
+ element.style.setProperty('z-index', zIndex, 'important');
795
+ element.style.setProperty('isolation', 'isolate');
796
+ }
797
+ static nextLayer(zIndex) {
798
+ const current = Number.parseInt(zIndex, 10);
799
+ return Number.isFinite(current) ? String(current + 1) : zIndex;
800
+ }
801
+ static getToastQueue(root) {
802
+ if (!this.toastQueue.has(root)) {
803
+ this.toastQueue.set(root, []);
804
+ }
805
+ return this.toastQueue.get(root);
806
+ }
807
+ static getVisibleToastCount(root) {
808
+ return root.querySelectorAll(':scope > .td-toast').length;
809
+ }
810
+ static showNextQueuedToast(root, maxVisible) {
811
+ const queue = this.getToastQueue(root);
812
+ const max = Math.max(1, maxVisible);
813
+ while (this.getVisibleToastCount(root) < max && queue.length > 0) {
814
+ const nextToast = queue.shift();
815
+ if (!nextToast) {
816
+ break;
817
+ }
818
+ root.appendChild(nextToast);
819
+ nextToast.dispatchEvent(new CustomEvent('td-toast-activate'));
820
+ }
821
+ }
822
+ static updateToastQueueIndicator(root) {
823
+ const queue = this.getToastQueue(root);
824
+ const existing = root.querySelector(':scope > .td-toast-queue-indicator');
825
+ if (!queue.length) {
826
+ existing?.remove();
827
+ return;
828
+ }
829
+ const indicator = existing ?? document.createElement('div');
830
+ indicator.className = 'td-toast-queue-indicator';
831
+ indicator.textContent = `+${queue.length} notificación${queue.length === 1 ? '' : 'es'}`;
832
+ root.appendChild(indicator);
833
+ }
834
+ static cleanupToastLayer() {
835
+ const layer = document.getElementById(this.toastHostId);
836
+ if (!(layer instanceof HTMLElement)) {
837
+ return;
838
+ }
839
+ if (layer.querySelector('.td-toast-root')) {
840
+ return;
841
+ }
842
+ const toastPopover = layer;
843
+ if (typeof toastPopover.hidePopover === 'function' && toastPopover.matches?.(':popover-open')) {
844
+ toastPopover.hidePopover();
845
+ }
846
+ layer.remove();
847
+ document.getElementById(this.toastWrapperId)?.remove();
848
+ }
849
+ static getAlertIcon(type) {
850
+ const icons = {
851
+ success: 'check_circle',
852
+ error: 'error',
853
+ warning: 'warning',
854
+ info: 'info',
855
+ question: 'help',
856
+ };
857
+ return icons[type];
858
+ }
859
+ static getToastIcon(type) {
860
+ const icons = {
861
+ success: 'check_circle',
862
+ error: 'error',
863
+ warning: 'warning',
864
+ info: 'info',
865
+ neutral: 'notifications',
866
+ };
867
+ return icons[type];
868
+ }
869
+ static createIcon(name) {
870
+ const definition = TD_ICONOS[name];
871
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
872
+ const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
873
+ svg.setAttribute('viewBox', definition.viewBox || '0 0 24 24');
874
+ svg.setAttribute('aria-hidden', 'true');
875
+ svg.setAttribute('focusable', 'false');
876
+ path.setAttribute('d', definition.path);
877
+ if (definition.estilo === 'linea') {
878
+ path.setAttribute('fill', 'none');
879
+ path.setAttribute('stroke', 'currentColor');
880
+ path.setAttribute('stroke-width', `${definition.grosor || 1.75}`);
881
+ path.setAttribute('stroke-linecap', 'round');
882
+ path.setAttribute('stroke-linejoin', 'round');
883
+ }
884
+ else {
885
+ path.setAttribute('fill', 'currentColor');
886
+ }
887
+ svg.appendChild(path);
888
+ return svg;
889
+ }
890
+ static keepFocusInside(event, container) {
891
+ const focusables = Array.from(container.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')).filter((element) => !element.hasAttribute('disabled'));
892
+ if (!focusables.length)
893
+ return;
894
+ const first = focusables[0];
895
+ const last = focusables[focusables.length - 1];
896
+ const active = document.activeElement;
897
+ if (event.shiftKey && active === first) {
898
+ event.preventDefault();
899
+ last.focus();
900
+ }
901
+ else if (!event.shiftKey && active === last) {
902
+ event.preventDefault();
903
+ first.focus();
904
+ }
905
+ }
906
+ static lockBodyScroll() {
907
+ if (this.scrollLockCount === 0) {
908
+ this.previousBodyOverflow = document.body.style.overflow;
909
+ document.body.style.overflow = 'hidden';
910
+ }
911
+ this.scrollLockCount += 1;
912
+ }
913
+ static unlockBodyScroll() {
914
+ this.scrollLockCount = Math.max(0, this.scrollLockCount - 1);
915
+ if (this.scrollLockCount === 0) {
916
+ document.body.style.overflow = this.previousBodyOverflow;
917
+ }
918
+ }
919
+ static injectStyles() {
920
+ if (document.getElementById(this.styleId))
921
+ return;
922
+ const style = document.createElement('style');
923
+ style.id = this.styleId;
924
+ style.textContent = `
925
+ .td-alert-dialog,
926
+ .td-alert-host,
927
+ .td-toast-overlay-wrapper,
928
+ .td-toast-layer,
929
+ .td-toast-root {
930
+ --td-alert-z-index: var(--td-z-alert, 2147483647);
931
+ box-sizing: border-box;
932
+ font-family: var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
933
+ }
934
+
935
+ .td-alert-host {
936
+ position: fixed;
937
+ inset: 0;
938
+ z-index: var(--td-alert-z-index) !important;
939
+ pointer-events: none;
940
+ isolation: isolate;
941
+ }
942
+
943
+ .td-alert-dialog *,
944
+ .td-toast-overlay-wrapper *,
945
+ .td-toast-layer *,
946
+ .td-toast-root * {
947
+ box-sizing: border-box;
948
+ }
949
+
950
+ .td-toast-overlay-wrapper {
951
+ position: absolute;
952
+ inset: 0;
953
+ display: block;
954
+ width: 100%;
955
+ height: 100%;
956
+ pointer-events: none;
957
+ }
958
+
959
+ .td-toast-layer {
960
+ position: fixed;
961
+ inset: 0;
962
+ display: block;
963
+ width: 100dvw;
964
+ min-width: 100dvw;
965
+ max-width: 100dvw;
966
+ height: 100dvh;
967
+ min-height: 100dvh;
968
+ max-height: 100dvh;
969
+ margin: 0;
970
+ padding: 0;
971
+ border: 0;
972
+ background: transparent;
973
+ overflow: visible;
974
+ pointer-events: none;
975
+ }
976
+
977
+ .td-alert-dialog {
978
+ z-index: var(--td-alert-z-index) !important;
979
+ display: flex;
980
+ align-items: center;
981
+ justify-content: center;
982
+ width: min(100%, 100dvw);
983
+ max-width: 100dvw;
984
+ border: 0;
985
+ margin: auto;
986
+ padding: 1rem;
987
+ pointer-events: auto;
988
+ background: transparent;
989
+ backdrop-filter: none;
990
+ animation: td-alert-backdrop-in 160ms ease-out;
991
+ }
992
+
993
+ .td-alert-dialog::backdrop {
994
+ background: transparent;
995
+ }
996
+
997
+ .td-alert-modal {
998
+ position: relative;
999
+ display: grid;
1000
+ width: min(100%, 455px);
1001
+ overflow: hidden;
1002
+ border: 1px solid color-mix(in srgb, var(--td-alert-glow, var(--td-color-primary, #3157a4)) 18%, rgba(255, 255, 255, 0.82));
1003
+ border-radius: 1.45rem;
1004
+ padding: 1.35rem;
1005
+ color: var(--td-color-text, #202b3d);
1006
+ background:
1007
+ linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.5)),
1008
+ color-mix(in srgb, var(--td-color-surface, #fff) 60%, transparent);
1009
+ text-align: center;
1010
+ box-shadow:
1011
+ 0 22px 58px rgba(15, 23, 42, 0.15),
1012
+ 0 0 0 1px rgba(255, 255, 255, 0.76) inset;
1013
+ backdrop-filter: blur(28px) saturate(155%);
1014
+ -webkit-backdrop-filter: blur(28px) saturate(155%);
1015
+ animation: td-alert-modal-in 210ms cubic-bezier(.16,1,.3,1);
1016
+ }
1017
+
1018
+ .td-alert-modal::before {
1019
+ position: absolute;
1020
+ inset: 0;
1021
+ z-index: 0;
1022
+ border-radius: inherit;
1023
+ background:
1024
+ linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 58%, rgba(255, 255, 255, 0.14));
1025
+ opacity: 0.58;
1026
+ pointer-events: none;
1027
+ content: "";
1028
+ }
1029
+
1030
+ .td-theme-dark .td-alert-modal {
1031
+ border-color: color-mix(in srgb, var(--td-alert-glow, var(--td-color-primary, #8aa7e6)) 22%, rgba(255, 255, 255, 0.16));
1032
+ background:
1033
+ linear-gradient(145deg, rgba(32, 36, 45, 0.78), rgba(17, 20, 26, 0.54)),
1034
+ color-mix(in srgb, var(--td-color-surface, #181b22) 66%, transparent);
1035
+ box-shadow:
1036
+ 0 24px 66px rgba(0, 0, 0, 0.34),
1037
+ 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
1038
+ }
1039
+
1040
+ .td-theme-dark .td-alert-modal::before {
1041
+ background:
1042
+ linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018) 58%, rgba(255, 255, 255, 0.035));
1043
+ }
1044
+
1045
+ .td-alert-modal::after {
1046
+ position: absolute;
1047
+ inset: 1px;
1048
+ z-index: 0;
1049
+ border-radius: calc(1.45rem - 1px);
1050
+ background:
1051
+ linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 46%);
1052
+ opacity: 0.36;
1053
+ pointer-events: none;
1054
+ content: "";
1055
+ }
1056
+
1057
+ .td-alert-accent {
1058
+ display: none;
1059
+ }
1060
+
1061
+ .td-alert-modal--success { --td-alert-glow: var(--td-color-success, #16784a); }
1062
+ .td-alert-modal--error { --td-alert-glow: var(--td-color-danger, #b93a3a); }
1063
+ .td-alert-modal--warning { --td-alert-glow: var(--td-color-warning, #a8660b); }
1064
+ .td-alert-modal--info { --td-alert-glow: var(--td-color-info, #2563a8); }
1065
+ .td-alert-modal--question { --td-alert-glow: var(--td-color-primary, #3157a4); }
1066
+
1067
+ .td-alert-content {
1068
+ min-width: 0;
1069
+ position: relative;
1070
+ z-index: 1;
1071
+ }
1072
+
1073
+ .td-alert-icon {
1074
+ z-index: 1;
1075
+ display: grid;
1076
+ width: 3.45rem;
1077
+ height: 3.45rem;
1078
+ margin: 0 auto 0.9rem;
1079
+ place-items: center;
1080
+ border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
1081
+ border-radius: 1rem;
1082
+ font-size: 1.45rem;
1083
+ font-weight: 900;
1084
+ box-shadow: none;
1085
+ }
1086
+
1087
+ .td-alert-icon svg,
1088
+ .td-toast-icon svg,
1089
+ .td-toast-dismiss svg {
1090
+ width: 1em;
1091
+ height: 1em;
1092
+ display: block;
1093
+ }
1094
+
1095
+ .td-alert-icon--success {
1096
+ color: var(--td-color-success, #16784a);
1097
+ background: var(--td-color-success-soft, #e2f5eb);
1098
+ }
1099
+
1100
+ .td-alert-icon--error {
1101
+ color: var(--td-color-danger, #b93a3a);
1102
+ background: var(--td-color-danger-soft, #fde7e7);
1103
+ }
1104
+
1105
+ .td-alert-icon--warning {
1106
+ color: var(--td-color-warning, #a8660b);
1107
+ background: var(--td-color-warning-soft, #fff2d8);
1108
+ }
1109
+
1110
+ .td-alert-icon--info {
1111
+ color: var(--td-color-info, #2563a8);
1112
+ background: var(--td-color-info-soft, #e4effb);
1113
+ }
1114
+
1115
+ .td-alert-icon--question {
1116
+ color: var(--td-color-primary, #3157a4);
1117
+ background: var(--td-color-primary-soft, #eaf0fb);
1118
+ }
1119
+
1120
+ .td-alert-title {
1121
+ margin: 0;
1122
+ color: var(--td-color-text, #202b3d);
1123
+ font-size: 1.18rem;
1124
+ line-height: 1.25;
1125
+ font-weight: 850;
1126
+ letter-spacing: -0.02em;
1127
+ }
1128
+
1129
+ .td-alert-message {
1130
+ max-width: 23rem;
1131
+ margin: 0.55rem auto 0;
1132
+ color: var(--td-color-text-muted, #66758b);
1133
+ font-size: 0.88rem;
1134
+ line-height: 1.55;
1135
+ }
1136
+
1137
+ .td-alert-actions {
1138
+ display: flex;
1139
+ justify-content: center;
1140
+ gap: 0.65rem;
1141
+ margin-top: 1.45rem;
1142
+ }
1143
+
1144
+ .td-alert-button {
1145
+ min-height: 2.55rem;
1146
+ border: 1px solid transparent;
1147
+ border-radius: 0.9rem;
1148
+ padding: 0.68rem 1.08rem;
1149
+ color: var(--td-color-on-primary, #ffffff);
1150
+ background: var(--td-color-primary, #3157a4);
1151
+ font-size: 0.8rem;
1152
+ font-weight: 800;
1153
+ cursor: pointer;
1154
+ box-shadow: 0 12px 24px color-mix(in srgb, var(--td-color-primary, #3157a4) 22%, transparent);
1155
+ transition: transform 150ms ease, filter 150ms ease, background 150ms ease, box-shadow 150ms ease;
1156
+ }
1157
+
1158
+ .td-alert-button:hover {
1159
+ filter: brightness(1.02);
1160
+ transform: translateY(-2px);
1161
+ }
1162
+
1163
+ .td-alert-button:active {
1164
+ transform: scale(0.98);
1165
+ }
1166
+
1167
+ .td-alert-button:focus-visible {
1168
+ outline: 0;
1169
+ box-shadow: var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, 0.18));
1170
+ }
1171
+
1172
+ .td-alert-button--success { background: var(--td-color-success, #16784a); }
1173
+ .td-alert-button--error { background: var(--td-color-danger, #b93a3a); }
1174
+ .td-alert-button--warning { background: var(--td-color-warning, #a8660b); }
1175
+ .td-alert-button--info { background: var(--td-color-info, #2563a8); }
1176
+ .td-alert-button--question { background: var(--td-color-primary, #3157a4); }
1177
+
1178
+ .td-alert-button--cancel {
1179
+ border-color: var(--td-color-border, #dde3ee);
1180
+ color: var(--td-color-text, #202b3d);
1181
+ background: var(--td-color-surface-soft, #f6f8fb);
1182
+ box-shadow: none;
1183
+ }
1184
+
1185
+ .td-alert-dialog--leaving {
1186
+ animation: td-alert-backdrop-out 150ms ease-in forwards;
1187
+ }
1188
+
1189
+ .td-alert-dialog--leaving .td-alert-modal {
1190
+ animation: td-alert-modal-out 150ms ease-in forwards;
1191
+ }
1192
+
1193
+ .td-toast-root {
1194
+ position: fixed;
1195
+ z-index: calc(var(--td-alert-z-index) + 1) !important;
1196
+ display: grid;
1197
+ width: min(26rem, calc(100vw - 1.5rem));
1198
+ gap: 0.65rem;
1199
+ pointer-events: none;
1200
+ }
1201
+
1202
+ .td-toast-queue-indicator {
1203
+ justify-self: start;
1204
+ max-width: 100%;
1205
+ border: 1px dashed color-mix(in srgb, var(--td-color-border, #dde3ee) 78%, transparent);
1206
+ border-radius: 999px;
1207
+ padding: 0.38rem 0.72rem;
1208
+ color: var(--td-color-text-muted, #66758b);
1209
+ background: color-mix(in srgb, var(--td-color-surface, #ffffff) 82%, transparent);
1210
+ font-size: 0.72rem;
1211
+ font-weight: 700;
1212
+ line-height: 1.2;
1213
+ backdrop-filter: blur(14px);
1214
+ -webkit-backdrop-filter: blur(14px);
1215
+ pointer-events: none;
1216
+ }
1217
+
1218
+ .td-toast-root--bottom-left {
1219
+ bottom: max(1rem, env(safe-area-inset-bottom));
1220
+ left: max(1rem, env(safe-area-inset-left));
1221
+ }
1222
+
1223
+ .td-toast-root--bottom-right {
1224
+ right: max(1rem, env(safe-area-inset-right));
1225
+ bottom: max(1rem, env(safe-area-inset-bottom));
1226
+ }
1227
+
1228
+ .td-toast-root--top-left {
1229
+ top: max(1rem, env(safe-area-inset-top));
1230
+ left: max(1rem, env(safe-area-inset-left));
1231
+ }
1232
+
1233
+ .td-toast-root--top-right {
1234
+ top: max(1rem, env(safe-area-inset-top));
1235
+ right: max(1rem, env(safe-area-inset-right));
1236
+ }
1237
+
1238
+ .td-toast-root--bottom-center {
1239
+ bottom: max(1rem, env(safe-area-inset-bottom));
1240
+ left: 50%;
1241
+ transform: translateX(-50%);
1242
+ }
1243
+
1244
+ .td-toast-root--top-center {
1245
+ top: max(1rem, env(safe-area-inset-top));
1246
+ left: 50%;
1247
+ transform: translateX(-50%);
1248
+ }
1249
+
1250
+ .td-toast {
1251
+ --td-toast-glow: var(--td-color-primary, #3157a4);
1252
+ position: relative;
1253
+ display: grid;
1254
+ grid-template-columns: auto minmax(0, 1fr) auto;
1255
+ align-items: start;
1256
+ gap: 0.72rem;
1257
+ width: 100%;
1258
+ overflow: hidden;
1259
+ border: 1px solid color-mix(in srgb, var(--td-toast-glow) 16%, rgba(255, 255, 255, 0.76));
1260
+ border-radius: 1.05rem;
1261
+ padding: 0.82rem 0.85rem;
1262
+ color: var(--td-color-text, #202b3d);
1263
+ background:
1264
+ linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)),
1265
+ color-mix(in srgb, var(--td-color-surface, #fff) 62%, transparent);
1266
+ box-shadow:
1267
+ 0 18px 42px rgba(15, 23, 42, 0.14),
1268
+ 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
1269
+ backdrop-filter: blur(22px) saturate(145%);
1270
+ -webkit-backdrop-filter: blur(22px) saturate(145%);
1271
+ pointer-events: auto;
1272
+ animation: td-toast-in 180ms cubic-bezier(.2,.8,.2,1);
1273
+ }
1274
+
1275
+ .td-toast::before {
1276
+ position: absolute;
1277
+ inset: 0;
1278
+ border-radius: inherit;
1279
+ background:
1280
+ linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 58%);
1281
+ opacity: 0.56;
1282
+ pointer-events: none;
1283
+ content: "";
1284
+ }
1285
+
1286
+ .td-toast--leaving {
1287
+ animation: td-toast-out 160ms ease-in forwards;
1288
+ }
1289
+
1290
+ .td-toast--success { --td-toast-glow: var(--td-color-success, #16784a); }
1291
+ .td-toast--error { --td-toast-glow: var(--td-color-danger, #b93a3a); }
1292
+ .td-toast--warning { --td-toast-glow: var(--td-color-warning, #a8660b); }
1293
+ .td-toast--info { --td-toast-glow: var(--td-color-info, #2563a8); }
1294
+ .td-toast--neutral { --td-toast-glow: var(--td-color-primary, #3157a4); }
1295
+
1296
+ .td-toast-icon {
1297
+ position: relative;
1298
+ z-index: 1;
1299
+ display: grid;
1300
+ width: 1.9rem;
1301
+ height: 1.9rem;
1302
+ place-items: center;
1303
+ border-radius: var(--td-radius-md, 0.72rem);
1304
+ font-size: 0.92rem;
1305
+ font-weight: 900;
1306
+ }
1307
+
1308
+ .td-toast--success .td-toast-icon {
1309
+ color: var(--td-color-success, #16784a);
1310
+ background: var(--td-color-success-soft, #e2f5eb);
1311
+ }
1312
+ .td-toast--error .td-toast-icon {
1313
+ color: var(--td-color-danger, #b93a3a);
1314
+ background: var(--td-color-danger-soft, #fde7e7);
1315
+ }
1316
+ .td-toast--warning .td-toast-icon {
1317
+ color: var(--td-color-warning, #a8660b);
1318
+ background: var(--td-color-warning-soft, #fff2d8);
1319
+ }
1320
+ .td-toast--info .td-toast-icon {
1321
+ color: var(--td-color-info, #2563a8);
1322
+ background: var(--td-color-info-soft, #e4effb);
1323
+ }
1324
+ .td-toast--neutral .td-toast-icon {
1325
+ color: var(--td-color-primary, #3157a4);
1326
+ background: var(--td-color-primary-soft, #eaf0fb);
1327
+ }
1328
+
1329
+ .td-toast-content {
1330
+ position: relative;
1331
+ z-index: 1;
1332
+ display: grid;
1333
+ min-width: 0;
1334
+ gap: 0.18rem;
1335
+ padding-top: 0.12rem;
1336
+ }
1337
+
1338
+ .td-toast-content strong {
1339
+ overflow: hidden;
1340
+ color: var(--td-color-text, #202b3d);
1341
+ font-size: 0.8rem;
1342
+ font-weight: 850;
1343
+ line-height: 1.25;
1344
+ text-overflow: ellipsis;
1345
+ white-space: nowrap;
1346
+ }
1347
+
1348
+ .td-toast-content small {
1349
+ color: var(--td-color-text-muted, #66758b);
1350
+ font-size: 0.72rem;
1351
+ line-height: 1.45;
1352
+ }
1353
+
1354
+ .td-toast-actions {
1355
+ position: relative;
1356
+ z-index: 1;
1357
+ display: flex;
1358
+ align-items: center;
1359
+ gap: 0.3rem;
1360
+ }
1361
+
1362
+ .td-toast-action,
1363
+ .td-toast-dismiss {
1364
+ border: 0;
1365
+ border-radius: var(--td-radius-md, 0.75rem);
1366
+ color: var(--td-color-primary, #3157a4);
1367
+ background: transparent;
1368
+ font: inherit;
1369
+ font-weight: 800;
1370
+ cursor: pointer;
1371
+ }
1372
+
1373
+ .td-toast-action {
1374
+ padding: 0.44rem 0.54rem;
1375
+ font-size: 0.7rem;
1376
+ }
1377
+
1378
+ .td-toast-dismiss {
1379
+ display: grid;
1380
+ width: 1.7rem;
1381
+ height: 1.7rem;
1382
+ place-items: center;
1383
+ color: var(--td-color-text-muted, #66758b);
1384
+ font-size: 1.2rem;
1385
+ line-height: 1;
1386
+ }
1387
+
1388
+ .td-toast-action:hover,
1389
+ .td-toast-dismiss:hover {
1390
+ background: var(--td-color-surface-soft, #f6f8fb);
1391
+ }
1392
+
1393
+ .td-toast-action:focus-visible,
1394
+ .td-toast-dismiss:focus-visible {
1395
+ outline: 0;
1396
+ box-shadow: var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, 0.18));
1397
+ }
1398
+
1399
+ .td-toast-progress {
1400
+ position: absolute;
1401
+ z-index: 1;
1402
+ right: 0;
1403
+ bottom: 0;
1404
+ left: 0;
1405
+ height: 2px;
1406
+ background: currentColor;
1407
+ opacity: 0.24;
1408
+ transform-origin: left;
1409
+ will-change: transform;
1410
+ }
1411
+
1412
+ .td-theme-dark .td-toast {
1413
+ border-color: color-mix(in srgb, var(--td-toast-glow) 20%, rgba(255, 255, 255, 0.16));
1414
+ background:
1415
+ linear-gradient(145deg, rgba(32, 36, 45, 0.76), rgba(17, 20, 26, 0.52)),
1416
+ color-mix(in srgb, var(--td-color-surface, #181b22) 66%, transparent);
1417
+ box-shadow:
1418
+ 0 20px 48px rgba(0, 0, 0, 0.34),
1419
+ 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
1420
+ }
1421
+
1422
+ .td-theme-dark .td-toast::before {
1423
+ background:
1424
+ linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 58%);
1425
+ }
1426
+
1427
+ @keyframes td-alert-backdrop-in {
1428
+ from { opacity: 0; }
1429
+ to { opacity: 1; }
1430
+ }
1431
+
1432
+ @keyframes td-alert-modal-in {
1433
+ from {
1434
+ opacity: 0;
1435
+ transform: translateY(12px) scale(0.96);
1436
+ }
1437
+ to {
1438
+ opacity: 1;
1439
+ transform: translateY(0) scale(1);
1440
+ }
1441
+ }
1442
+
1443
+ @keyframes td-alert-backdrop-out {
1444
+ from { opacity: 1; }
1445
+ to { opacity: 0; }
1446
+ }
1447
+
1448
+ @keyframes td-alert-modal-out {
1449
+ from {
1450
+ opacity: 1;
1451
+ transform: translateY(0) scale(1);
1452
+ }
1453
+ to {
1454
+ opacity: 0;
1455
+ transform: translateY(8px) scale(0.97);
1456
+ }
1457
+ }
1458
+
1459
+ @keyframes td-toast-in {
1460
+ from {
1461
+ opacity: 0;
1462
+ transform: translateY(10px) scale(0.98);
1463
+ }
1464
+ to {
1465
+ opacity: 1;
1466
+ transform: translateY(0) scale(1);
1467
+ }
1468
+ }
1469
+
1470
+ @keyframes td-toast-out {
1471
+ from {
1472
+ opacity: 1;
1473
+ transform: translateY(0) scale(1);
1474
+ }
1475
+ to {
1476
+ opacity: 0;
1477
+ transform: translateY(8px) scale(0.98);
1478
+ }
1479
+ }
1480
+
1481
+ @keyframes td-toast-progress {
1482
+ from { transform: scaleX(1); }
1483
+ to { transform: scaleX(0); }
1484
+ }
1485
+
1486
+ @media (max-width: 520px) {
1487
+ .td-alert-modal {
1488
+ grid-template-columns: 1fr;
1489
+ border-radius: var(--td-radius-lg, 0.95rem);
1490
+ padding: 1.25rem;
1491
+ }
1492
+
1493
+ .td-alert-icon {
1494
+ width: 3.25rem;
1495
+ height: 3.25rem;
1496
+ }
1497
+
1498
+ .td-alert-actions {
1499
+ justify-content: stretch;
1500
+ flex-direction: column-reverse;
1501
+ }
1502
+
1503
+ .td-alert-button {
1504
+ width: 100%;
1505
+ }
1506
+
1507
+ .td-toast-root {
1508
+ right: 0.75rem;
1509
+ left: 0.75rem;
1510
+ width: auto;
1511
+ transform: none;
1512
+ }
1513
+ }
1514
+ `;
1515
+ document.head.appendChild(style);
1516
+ }
1517
+ }
1518
+ class TdAlerta extends TdAlert {
1519
+ }
1520
+
612
1521
  class TdIconoRegistry {
613
1522
  iconos = new Map(Object.entries(TD_ICONOS));
614
1523
  registrar(iconos) {
@@ -1639,7 +2548,7 @@ class TdDataTable {
1639
2548
  formatearFecha(valor, columna) {
1640
2549
  const fecha = this.normalizarFecha(valor);
1641
2550
  if (!fecha)
1642
- return '—';
2551
+ return '';
1643
2552
  const opcionesPorTipo = {
1644
2553
  fecha: { day: '2-digit', month: '2-digit', year: 'numeric' },
1645
2554
  fechaHora: {
@@ -1697,11 +2606,11 @@ class TdDataTable {
1697
2606
  }
1698
2607
  }
1699
2608
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
1700
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @if (usarMenuAcciones(fila)) {\n <td-menu\n ariaLabel=\"Acciones de fila\"\n icono=\"more_vertical\"\n ancho=\"15rem\"\n [oscuro]=\"oscuro\"\n [items]=\"accionesMenu(fila)\"\n (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n />\n } @else {\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2609
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @if (usarMenuAcciones(fila)) {\n <td-menu\n ariaLabel=\"Acciones de fila\"\n icono=\"more_vertical\"\n ancho=\"15rem\"\n [oscuro]=\"oscuro\"\n [items]=\"accionesMenu(fila)\"\n (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n />\n } @else {\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla{contain:none}.td-tabla__toolbar{align-items:stretch;flex-direction:column;gap:.75rem;padding:.45rem 0 .85rem}.td-tabla__filtros{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}.td-tabla__filtros ::ng-deep>*,.td-tabla__busqueda{width:100%;min-width:0}.td-tabla__busqueda{min-height:3rem;border-radius:var(--td-radius-lg, .9rem)}.td-tabla__superficie{border-radius:var(--td-radius-lg, .9rem)}.td-tabla__resumen{align-items:stretch;flex-direction:column;gap:.65rem;padding:.85rem}.td-tabla__resumen-acciones{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.55rem}.td-tabla__resumen-acciones ::ng-deep>*,.td-tabla__boton{width:100%;min-width:0}.td-tabla__boton{height:2.45rem;justify-content:center;padding:0 .75rem}.td-tabla__boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-tabla__scroll-x{box-shadow:inset -18px 0 18px -22px color-mix(in srgb,var(--texto) 45%,transparent)}.td-tabla__contenido{min-width:max(46rem,max-content)}.td-tabla__encabezado{min-height:2.6rem;font-size:.58rem;letter-spacing:.06em}.td-tabla__encabezado>div,.td-tabla__celda{padding-inline:.75rem}.td-tabla__viewport{min-height:18rem}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}@media(max-width:420px){.td-tabla__resumen-acciones{grid-template-columns:minmax(0,1fr)}.td-tabla__contenido{min-width:max(42rem,max-content)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
1701
2610
  }
1702
2611
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, decorators: [{
1703
2612
  type: Component,
1704
- args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @if (usarMenuAcciones(fila)) {\n <td-menu\n ariaLabel=\"Acciones de fila\"\n icono=\"more_vertical\"\n ancho=\"15rem\"\n [oscuro]=\"oscuro\"\n [items]=\"accionesMenu(fila)\"\n (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n />\n } @else {\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"] }]
2613
+ args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @if (usarMenuAcciones(fila)) {\n <td-menu\n ariaLabel=\"Acciones de fila\"\n icono=\"more_vertical\"\n ancho=\"15rem\"\n [oscuro]=\"oscuro\"\n [items]=\"accionesMenu(fila)\"\n (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n />\n } @else {\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla{contain:none}.td-tabla__toolbar{align-items:stretch;flex-direction:column;gap:.75rem;padding:.45rem 0 .85rem}.td-tabla__filtros{display:grid;grid-template-columns:minmax(0,1fr);gap:.7rem}.td-tabla__filtros ::ng-deep>*,.td-tabla__busqueda{width:100%;min-width:0}.td-tabla__busqueda{min-height:3rem;border-radius:var(--td-radius-lg, .9rem)}.td-tabla__superficie{border-radius:var(--td-radius-lg, .9rem)}.td-tabla__resumen{align-items:stretch;flex-direction:column;gap:.65rem;padding:.85rem}.td-tabla__resumen-acciones{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:.55rem}.td-tabla__resumen-acciones ::ng-deep>*,.td-tabla__boton{width:100%;min-width:0}.td-tabla__boton{height:2.45rem;justify-content:center;padding:0 .75rem}.td-tabla__boton span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-tabla__scroll-x{box-shadow:inset -18px 0 18px -22px color-mix(in srgb,var(--texto) 45%,transparent)}.td-tabla__contenido{min-width:max(46rem,max-content)}.td-tabla__encabezado{min-height:2.6rem;font-size:.58rem;letter-spacing:.06em}.td-tabla__encabezado>div,.td-tabla__celda{padding-inline:.75rem}.td-tabla__viewport{min-height:18rem}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}@media(max-width:420px){.td-tabla__resumen-acciones{grid-template-columns:minmax(0,1fr)}.td-tabla__contenido{min-width:max(42rem,max-content)}}\n"] }]
1705
2614
  }], propDecorators: { viewport: [{
1706
2615
  type: ViewChild,
1707
2616
  args: [CdkVirtualScrollViewport]
@@ -2776,11 +3685,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
2776
3685
 
2777
3686
  class TdDialogActions {
2778
3687
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
2779
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: TdDialogActions, isStandalone: true, selector: "td-dialog-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{bottom:-1.1rem;min-height:auto;align-items:stretch;flex-direction:column-reverse;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.7rem 1.1rem}:host ::ng-deep button{width:100%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
3688
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: TdDialogActions, isStandalone: true, selector: "td-dialog-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep td-button{display:inline-block;min-width:0}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{bottom:-1.1rem;display:grid;grid-auto-flow:row;grid-auto-rows:minmax(2.45rem,auto);grid-template-columns:minmax(0,1fr);min-height:auto;align-items:stretch;justify-content:stretch;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.75rem 1.1rem;gap:.55rem}:host ::ng-deep td-button{display:block;width:100%}:host ::ng-deep td-button:last-of-type{order:-1}:host ::ng-deep button,:host ::ng-deep td-button .td-button{width:100%;min-height:2.45rem}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2780
3689
  }
2781
3690
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogActions, decorators: [{
2782
3691
  type: Component,
2783
- args: [{ selector: 'td-dialog-actions', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{bottom:-1.1rem;min-height:auto;align-items:stretch;flex-direction:column-reverse;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.7rem 1.1rem}:host ::ng-deep button{width:100%}}\n"] }]
3692
+ args: [{ selector: 'td-dialog-actions', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep td-button{display:inline-block;min-width:0}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{bottom:-1.1rem;display:grid;grid-auto-flow:row;grid-auto-rows:minmax(2.45rem,auto);grid-template-columns:minmax(0,1fr);min-height:auto;align-items:stretch;justify-content:stretch;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.75rem 1.1rem;gap:.55rem}:host ::ng-deep td-button{display:block;width:100%}:host ::ng-deep td-button:last-of-type{order:-1}:host ::ng-deep button,:host ::ng-deep td-button .td-button{width:100%;min-height:2.45rem}}\n"] }]
2784
3693
  }] });
2785
3694
 
2786
3695
  class TdDialogClose {
@@ -5001,6 +5910,9 @@ class TdAutocompleteSelect {
5001
5910
  errorDisplay = input('auto', /* @ts-ignore */
5002
5911
  ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
5003
5912
  emptyText = 'No se encontraron resultados';
5913
+ emptyActionText = '';
5914
+ emptyActionDescription = '';
5915
+ emptyActionIcon = 'add';
5004
5916
  clearable = true;
5005
5917
  dark = false;
5006
5918
  scrollBehavior = 'reposition';
@@ -5011,6 +5923,7 @@ class TdAutocompleteSelect {
5011
5923
  compareWith = (first, second) => Object.is(first, second);
5012
5924
  selectionChange = new EventEmitter();
5013
5925
  searchChange = new EventEmitter();
5926
+ emptyAction = new EventEmitter();
5014
5927
  value = model(null, /* @ts-ignore */
5015
5928
  ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
5016
5929
  isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
@@ -5063,6 +5976,9 @@ class TdAutocompleteSelect {
5063
5976
  return [];
5064
5977
  return this.options.filter((option) => this.filterWith(option, normalized));
5065
5978
  }
5979
+ get shouldShowEmptyAction() {
5980
+ return !!this.emptyActionText.trim() && !!this.search.trim();
5981
+ }
5066
5982
  get labelFloating() {
5067
5983
  return (this.hasVisibleLabel &&
5068
5984
  (this.focused() || this.open || !!this.search.trim() || this.value() !== null));
@@ -5159,6 +6075,12 @@ class TdAutocompleteSelect {
5159
6075
  this.formBridge.markTouched(this.touched, this.touch);
5160
6076
  this.cdr.markForCheck();
5161
6077
  }
6078
+ emitEmptyAction(event) {
6079
+ event.stopPropagation();
6080
+ const currentSearch = this.search.trim();
6081
+ this.close();
6082
+ this.emptyAction.emit(currentSearch);
6083
+ }
5162
6084
  handleInput(event) {
5163
6085
  this.search = event.target.value;
5164
6086
  this.value.set(null);
@@ -5375,7 +6297,7 @@ class TdAutocompleteSelect {
5375
6297
  });
5376
6298
  }
5377
6299
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
5378
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", isSignal: false, isRequired: false, transformFunction: null }, iconKey: { classPropertyName: "iconKey", publicName: "iconKey", isSignal: false, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
6300
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, valueKey: { classPropertyName: "valueKey", publicName: "valueKey", isSignal: false, isRequired: false, transformFunction: null }, labelKey: { classPropertyName: "labelKey", publicName: "labelKey", isSignal: false, isRequired: false, transformFunction: null }, descriptionKey: { classPropertyName: "descriptionKey", publicName: "descriptionKey", isSignal: false, isRequired: false, transformFunction: null }, iconKey: { classPropertyName: "iconKey", publicName: "iconKey", isSignal: false, isRequired: false, transformFunction: null }, disabledKey: { classPropertyName: "disabledKey", publicName: "disabledKey", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, emptyActionText: { classPropertyName: "emptyActionText", publicName: "emptyActionText", isSignal: false, isRequired: false, transformFunction: null }, emptyActionDescription: { classPropertyName: "emptyActionDescription", publicName: "emptyActionDescription", isSignal: false, isRequired: false, transformFunction: null }, emptyActionIcon: { classPropertyName: "emptyActionIcon", publicName: "emptyActionIcon", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", emptyAction: "emptyAction", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
5379
6301
  {
5380
6302
  provide: NG_VALUE_ACCESSOR,
5381
6303
  useExisting: forwardRef(() => TdAutocompleteSelect),
@@ -5464,7 +6386,26 @@ class TdAutocompleteSelect {
5464
6386
  role="listbox"
5465
6387
  >
5466
6388
  @if (!filteredOptions.length) {
5467
- <p class="td-select-panel__empty">{{ emptyText }}</p>
6389
+ <div class="td-select-panel__empty-state">
6390
+ <p class="td-select-panel__empty">{{ emptyText }}</p>
6391
+ @if (emptyActionDescription) {
6392
+ <small class="td-select-panel__empty-description">{{ emptyActionDescription }}</small>
6393
+ }
6394
+ @if (shouldShowEmptyAction) {
6395
+ <button
6396
+ type="button"
6397
+ class="td-select-panel__empty-action td-select-panel__empty-action--option"
6398
+ [disabled]="isDisabled()"
6399
+ (mousedown)="$event.preventDefault()"
6400
+ (click)="emitEmptyAction($event)"
6401
+ >
6402
+ @if (emptyActionIcon) {
6403
+ <td-icon [nombre]="emptyActionIcon" />
6404
+ }
6405
+ <span>{{ emptyActionText }}</span>
6406
+ </button>
6407
+ }
6408
+ </div>
5468
6409
  }
5469
6410
  @for (option of filteredOptions; track option.value; let index = $index) {
5470
6411
  <button
@@ -5492,7 +6433,7 @@ class TdAutocompleteSelect {
5492
6433
  }
5493
6434
  </div>
5494
6435
  </ng-template>
5495
- `, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{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 });
6436
+ `, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty-state{display:grid;justify-items:center;gap:.4rem;padding:.95rem .8rem;text-align:center}.td-select-panel__empty{margin:0;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel__empty-description{color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.45}.td-select-panel__empty-action{display:inline-flex;align-items:center;gap:.45rem;min-height:2.2rem;width:auto!important;min-width:0;border:1px solid color-mix(in srgb,var(--td-color-primary, #5746d8) 18%,var(--td-color-border, #e1e5ee));border-radius:.72rem!important;padding:.55rem .8rem!important;color:var(--td-color-primary, #5746d8)!important;background:color-mix(in srgb,var(--td-color-primary-soft, #f4f2ff) 68%,transparent)!important;font-size:.72rem!important;font-weight:800!important;cursor:pointer}.td-select-panel__empty-action--option{justify-content:center;width:100%!important;min-height:2.7rem;border-style:dashed;border-radius:.72rem!important;padding:.65rem .78rem!important;text-align:center}.td-select-panel__empty-action--option>span{flex:0 0 auto!important;text-align:center}.td-select-panel__empty-action--option td-icon{flex:0 0 auto}.td-select-panel__empty-action:hover:not(:disabled){background:color-mix(in srgb,var(--td-color-primary-soft, #f4f2ff) 86%,transparent)!important}.td-select-panel__empty-action:disabled{opacity:.55;cursor:not-allowed}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{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 });
5496
6437
  }
5497
6438
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdAutocompleteSelect, decorators: [{
5498
6439
  type: Component,
@@ -5579,7 +6520,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5579
6520
  role="listbox"
5580
6521
  >
5581
6522
  @if (!filteredOptions.length) {
5582
- <p class="td-select-panel__empty">{{ emptyText }}</p>
6523
+ <div class="td-select-panel__empty-state">
6524
+ <p class="td-select-panel__empty">{{ emptyText }}</p>
6525
+ @if (emptyActionDescription) {
6526
+ <small class="td-select-panel__empty-description">{{ emptyActionDescription }}</small>
6527
+ }
6528
+ @if (shouldShowEmptyAction) {
6529
+ <button
6530
+ type="button"
6531
+ class="td-select-panel__empty-action td-select-panel__empty-action--option"
6532
+ [disabled]="isDisabled()"
6533
+ (mousedown)="$event.preventDefault()"
6534
+ (click)="emitEmptyAction($event)"
6535
+ >
6536
+ @if (emptyActionIcon) {
6537
+ <td-icon [nombre]="emptyActionIcon" />
6538
+ }
6539
+ <span>{{ emptyActionText }}</span>
6540
+ </button>
6541
+ }
6542
+ </div>
5583
6543
  }
5584
6544
  @for (option of filteredOptions; track option.value; let index = $index) {
5585
6545
  <button
@@ -5616,7 +6576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5616
6576
  ], host: {
5617
6577
  '[hidden]': 'hidden()',
5618
6578
  '[attr.aria-busy]': 'pending() ? "true" : null',
5619
- }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
6579
+ }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty-state{display:grid;justify-items:center;gap:.4rem;padding:.95rem .8rem;text-align:center}.td-select-panel__empty{margin:0;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel__empty-description{color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.45}.td-select-panel__empty-action{display:inline-flex;align-items:center;gap:.45rem;min-height:2.2rem;width:auto!important;min-width:0;border:1px solid color-mix(in srgb,var(--td-color-primary, #5746d8) 18%,var(--td-color-border, #e1e5ee));border-radius:.72rem!important;padding:.55rem .8rem!important;color:var(--td-color-primary, #5746d8)!important;background:color-mix(in srgb,var(--td-color-primary-soft, #f4f2ff) 68%,transparent)!important;font-size:.72rem!important;font-weight:800!important;cursor:pointer}.td-select-panel__empty-action--option{justify-content:center;width:100%!important;min-height:2.7rem;border-style:dashed;border-radius:.72rem!important;padding:.65rem .78rem!important;text-align:center}.td-select-panel__empty-action--option>span{flex:0 0 auto!important;text-align:center}.td-select-panel__empty-action--option td-icon{flex:0 0 auto}.td-select-panel__empty-action:hover:not(:disabled){background:color-mix(in srgb,var(--td-color-primary-soft, #f4f2ff) 86%,transparent)!important}.td-select-panel__empty-action:disabled{opacity:.55;cursor:not-allowed}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
5620
6580
  }], ctorParameters: () => [], propDecorators: { searchInput: [{
5621
6581
  type: ViewChild,
5622
6582
  args: ['searchInput']
@@ -5648,6 +6608,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5648
6608
  type: Input
5649
6609
  }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], emptyText: [{
5650
6610
  type: Input
6611
+ }], emptyActionText: [{
6612
+ type: Input
6613
+ }], emptyActionDescription: [{
6614
+ type: Input
6615
+ }], emptyActionIcon: [{
6616
+ type: Input
5651
6617
  }], clearable: [{
5652
6618
  type: Input
5653
6619
  }], dark: [{
@@ -5668,6 +6634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5668
6634
  type: Output
5669
6635
  }], searchChange: [{
5670
6636
  type: Output
6637
+ }], emptyAction: [{
6638
+ type: Output
5671
6639
  }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
5672
6640
 
5673
6641
  let selectSequence = 0;
@@ -5714,6 +6682,9 @@ class TdSelect {
5714
6682
  errorDisplay = input('auto', /* @ts-ignore */
5715
6683
  ...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
5716
6684
  emptyText = 'No hay opciones disponibles';
6685
+ emptyActionText = '';
6686
+ emptyActionDescription = '';
6687
+ emptyActionIcon = 'add';
5717
6688
  clearable = false;
5718
6689
  dark = false;
5719
6690
  scrollBehavior = 'reposition';
@@ -5721,6 +6692,7 @@ class TdSelect {
5721
6692
  appearance = 'outline';
5722
6693
  compareWith = (first, second) => Object.is(first, second);
5723
6694
  selectionChange = new EventEmitter();
6695
+ emptyAction = new EventEmitter();
5724
6696
  value = model(null, /* @ts-ignore */
5725
6697
  ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
5726
6698
  isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
@@ -5827,6 +6799,11 @@ class TdSelect {
5827
6799
  event.stopPropagation();
5828
6800
  this.setValue(null);
5829
6801
  }
6802
+ emitEmptyAction(event) {
6803
+ event.stopPropagation();
6804
+ this.close();
6805
+ this.emptyAction.emit();
6806
+ }
5830
6807
  handleKeydown(event) {
5831
6808
  if (event.key === 'Escape') {
5832
6809
  event.preventDefault();
@@ -5960,7 +6937,7 @@ class TdSelect {
5960
6937
  });
5961
6938
  }
5962
6939
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
5963
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
6940
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, emptyActionText: { classPropertyName: "emptyActionText", publicName: "emptyActionText", isSignal: false, isRequired: false, transformFunction: null }, emptyActionDescription: { classPropertyName: "emptyActionDescription", publicName: "emptyActionDescription", isSignal: false, isRequired: false, transformFunction: null }, emptyActionIcon: { classPropertyName: "emptyActionIcon", publicName: "emptyActionIcon", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", emptyAction: "emptyAction", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
5964
6941
  {
5965
6942
  provide: NG_VALUE_ACCESSOR,
5966
6943
  useExisting: forwardRef(() => TdSelect),
@@ -6053,7 +7030,25 @@ class TdSelect {
6053
7030
  role="listbox"
6054
7031
  >
6055
7032
  @if (!options.length) {
6056
- <p class="td-select-panel__empty">{{ emptyText }}</p>
7033
+ <div class="td-select-panel__empty-state">
7034
+ <p class="td-select-panel__empty">{{ emptyText }}</p>
7035
+ @if (emptyActionDescription) {
7036
+ <small class="td-select-panel__empty-description">{{ emptyActionDescription }}</small>
7037
+ }
7038
+ @if (emptyActionText) {
7039
+ <button
7040
+ type="button"
7041
+ class="td-select-panel__empty-action td-select-panel__empty-action--option"
7042
+ [disabled]="isDisabled()"
7043
+ (click)="emitEmptyAction($event)"
7044
+ >
7045
+ @if (emptyActionIcon) {
7046
+ <td-icon [nombre]="emptyActionIcon" />
7047
+ }
7048
+ <span>{{ emptyActionText }}</span>
7049
+ </button>
7050
+ }
7051
+ </div>
6057
7052
  }
6058
7053
  @for (option of options; track option.value; let index = $index) {
6059
7054
  <button
@@ -6081,7 +7076,7 @@ class TdSelect {
6081
7076
  }
6082
7077
  </div>
6083
7078
  </ng-template>
6084
- `, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{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 });
7079
+ `, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty-state{display:grid;justify-items:center;gap:.4rem;padding:.95rem .8rem;text-align:center}.td-select-panel__empty{margin:0;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel__empty-description{color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.45}.td-select-panel__empty-action{display:inline-flex;align-items:center;gap:.45rem;min-height:2.2rem;width:auto!important;min-width:0;border:1px solid color-mix(in srgb,var(--td-color-primary, #5746d8) 18%,var(--td-color-border, #e1e5ee));border-radius:.72rem!important;padding:.55rem .8rem!important;color:var(--td-color-primary, #5746d8)!important;background:color-mix(in srgb,var(--td-color-primary-soft, #f4f2ff) 68%,transparent)!important;font-size:.72rem!important;font-weight:800!important;cursor:pointer}.td-select-panel__empty-action--option{justify-content:center;width:100%!important;min-height:2.7rem;border-style:dashed;border-radius:.72rem!important;padding:.65rem .78rem!important;text-align:center}.td-select-panel__empty-action--option>span{flex:0 0 auto!important;text-align:center}.td-select-panel__empty-action--option td-icon{flex:0 0 auto}.td-select-panel__empty-action:hover:not(:disabled){background:color-mix(in srgb,var(--td-color-primary-soft, #f4f2ff) 86%,transparent)!important}.td-select-panel__empty-action:disabled{opacity:.55;cursor:not-allowed}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{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 });
6085
7080
  }
6086
7081
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSelect, decorators: [{
6087
7082
  type: Component,
@@ -6172,7 +7167,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
6172
7167
  role="listbox"
6173
7168
  >
6174
7169
  @if (!options.length) {
6175
- <p class="td-select-panel__empty">{{ emptyText }}</p>
7170
+ <div class="td-select-panel__empty-state">
7171
+ <p class="td-select-panel__empty">{{ emptyText }}</p>
7172
+ @if (emptyActionDescription) {
7173
+ <small class="td-select-panel__empty-description">{{ emptyActionDescription }}</small>
7174
+ }
7175
+ @if (emptyActionText) {
7176
+ <button
7177
+ type="button"
7178
+ class="td-select-panel__empty-action td-select-panel__empty-action--option"
7179
+ [disabled]="isDisabled()"
7180
+ (click)="emitEmptyAction($event)"
7181
+ >
7182
+ @if (emptyActionIcon) {
7183
+ <td-icon [nombre]="emptyActionIcon" />
7184
+ }
7185
+ <span>{{ emptyActionText }}</span>
7186
+ </button>
7187
+ }
7188
+ </div>
6176
7189
  }
6177
7190
  @for (option of options; track option.value; let index = $index) {
6178
7191
  <button
@@ -6209,7 +7222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
6209
7222
  ], host: {
6210
7223
  '[hidden]': 'hidden()',
6211
7224
  '[attr.aria-busy]': 'pending() ? "true" : null',
6212
- }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
7225
+ }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty-state{display:grid;justify-items:center;gap:.4rem;padding:.95rem .8rem;text-align:center}.td-select-panel__empty{margin:0;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel__empty-description{color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.45}.td-select-panel__empty-action{display:inline-flex;align-items:center;gap:.45rem;min-height:2.2rem;width:auto!important;min-width:0;border:1px solid color-mix(in srgb,var(--td-color-primary, #5746d8) 18%,var(--td-color-border, #e1e5ee));border-radius:.72rem!important;padding:.55rem .8rem!important;color:var(--td-color-primary, #5746d8)!important;background:color-mix(in srgb,var(--td-color-primary-soft, #f4f2ff) 68%,transparent)!important;font-size:.72rem!important;font-weight:800!important;cursor:pointer}.td-select-panel__empty-action--option{justify-content:center;width:100%!important;min-height:2.7rem;border-style:dashed;border-radius:.72rem!important;padding:.65rem .78rem!important;text-align:center}.td-select-panel__empty-action--option>span{flex:0 0 auto!important;text-align:center}.td-select-panel__empty-action--option td-icon{flex:0 0 auto}.td-select-panel__empty-action:hover:not(:disabled){background:color-mix(in srgb,var(--td-color-primary-soft, #f4f2ff) 86%,transparent)!important}.td-select-panel__empty-action:disabled{opacity:.55;cursor:not-allowed}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
6213
7226
  }], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
6214
7227
  type: ViewChild,
6215
7228
  args: [CdkConnectedOverlay]
@@ -6231,6 +7244,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
6231
7244
  type: Input
6232
7245
  }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], emptyText: [{
6233
7246
  type: Input
7247
+ }], emptyActionText: [{
7248
+ type: Input
7249
+ }], emptyActionDescription: [{
7250
+ type: Input
7251
+ }], emptyActionIcon: [{
7252
+ type: Input
6234
7253
  }], clearable: [{
6235
7254
  type: Input
6236
7255
  }], dark: [{
@@ -6245,6 +7264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
6245
7264
  type: Input
6246
7265
  }], selectionChange: [{
6247
7266
  type: Output
7267
+ }], emptyAction: [{
7268
+ type: Output
6248
7269
  }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
6249
7270
 
6250
7271
  class TdSidebar {
@@ -7089,5 +8110,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
7089
8110
  * Generated bundle index. Do not edit.
7090
8111
  */
7091
8112
 
7092
- export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdBadge, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileUpload, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdRadioGroup, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TdTooltip, TelcomdevUi, createTdFormControlBridge };
8113
+ export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlert, TdAlerta, TdAutocompleteSelect, TdBadge, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileUpload, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdRadioGroup, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TdTooltip, TelcomdevUi, createTdFormControlBridge };
7093
8114
  //# sourceMappingURL=telcomdev-ui.mjs.map