@telcomdev/ui 0.1.25 → 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.
- package/fesm2022/telcomdev-ui.mjs +445 -97
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/telcomdev-ui.d.ts +31 -3
|
@@ -265,7 +265,12 @@ const TD_ICONOS_NOMBRES = Object.freeze(Object.keys(TD_ICONOS));
|
|
|
265
265
|
|
|
266
266
|
class TdAlert {
|
|
267
267
|
static styleId = 'td-alert-styles';
|
|
268
|
+
static hostId = 'td-alert-host';
|
|
269
|
+
static toastWrapperId = 'td-toast-wrapper';
|
|
270
|
+
static toastHostId = 'td-toast-host';
|
|
268
271
|
static toastRootPrefix = 'td-toast-root';
|
|
272
|
+
static alertZIndex = '2147483647';
|
|
273
|
+
static toastQueue = new WeakMap();
|
|
269
274
|
static scrollLockCount = 0;
|
|
270
275
|
static previousBodyOverflow = '';
|
|
271
276
|
static success(message, title = 'Operación exitosa') {
|
|
@@ -332,8 +337,11 @@ class TdAlert {
|
|
|
332
337
|
const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
|
|
333
338
|
return new Promise((resolve) => {
|
|
334
339
|
this.lockBodyScroll();
|
|
335
|
-
const
|
|
336
|
-
backdrop
|
|
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');
|
|
337
345
|
const modal = document.createElement('div');
|
|
338
346
|
modal.className = `td-alert-modal td-alert-modal--${config.type}`;
|
|
339
347
|
modal.setAttribute('role', 'dialog');
|
|
@@ -368,8 +376,11 @@ class TdAlert {
|
|
|
368
376
|
return;
|
|
369
377
|
closed = true;
|
|
370
378
|
document.removeEventListener('keydown', onKeyDown);
|
|
371
|
-
backdrop.classList.add('td-alert-
|
|
379
|
+
backdrop.classList.add('td-alert-dialog--leaving');
|
|
372
380
|
window.setTimeout(() => {
|
|
381
|
+
if (typeof backdrop.close === 'function' && backdrop.open) {
|
|
382
|
+
backdrop.close();
|
|
383
|
+
}
|
|
373
384
|
backdrop.remove();
|
|
374
385
|
this.unlockBodyScroll();
|
|
375
386
|
previouslyFocused?.focus?.();
|
|
@@ -409,7 +420,13 @@ class TdAlert {
|
|
|
409
420
|
modal.appendChild(icon);
|
|
410
421
|
modal.appendChild(content);
|
|
411
422
|
backdrop.appendChild(modal);
|
|
412
|
-
|
|
423
|
+
host.appendChild(backdrop);
|
|
424
|
+
if (typeof backdrop.showModal === 'function') {
|
|
425
|
+
backdrop.showModal();
|
|
426
|
+
}
|
|
427
|
+
else {
|
|
428
|
+
backdrop.setAttribute('open', 'true');
|
|
429
|
+
}
|
|
413
430
|
if (config.autoFocus) {
|
|
414
431
|
confirmButton.focus();
|
|
415
432
|
}
|
|
@@ -426,7 +443,6 @@ class TdAlert {
|
|
|
426
443
|
const config = this.normalizeToastOptions({ ...options, message });
|
|
427
444
|
return new Promise((resolve) => {
|
|
428
445
|
const root = this.getToastRoot(config.position);
|
|
429
|
-
this.trimVisibleToasts(root, config.maxVisible);
|
|
430
446
|
const toast = document.createElement('section');
|
|
431
447
|
toast.className = `td-toast td-toast--${config.type}`;
|
|
432
448
|
toast.setAttribute('role', config.type === 'error' ? 'alert' : 'status');
|
|
@@ -447,9 +463,31 @@ class TdAlert {
|
|
|
447
463
|
const actions = document.createElement('span');
|
|
448
464
|
actions.className = 'td-toast-actions';
|
|
449
465
|
let timeoutId;
|
|
466
|
+
let frameId;
|
|
450
467
|
let remainingDuration = config.duration;
|
|
468
|
+
let progressRatio = 1;
|
|
451
469
|
let timerStartedAt = 0;
|
|
452
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
|
+
};
|
|
453
491
|
const close = (result) => {
|
|
454
492
|
if (closed)
|
|
455
493
|
return;
|
|
@@ -457,11 +495,18 @@ class TdAlert {
|
|
|
457
495
|
if (timeoutId !== undefined) {
|
|
458
496
|
window.clearTimeout(timeoutId);
|
|
459
497
|
}
|
|
498
|
+
if (frameId !== undefined) {
|
|
499
|
+
window.cancelAnimationFrame(frameId);
|
|
500
|
+
}
|
|
460
501
|
toast.classList.add('td-toast--leaving');
|
|
461
502
|
window.setTimeout(() => {
|
|
503
|
+
const queue = this.getToastQueue(root);
|
|
462
504
|
toast.remove();
|
|
463
|
-
|
|
505
|
+
this.showNextQueuedToast(root, config.maxVisible);
|
|
506
|
+
this.updateToastQueueIndicator(root);
|
|
507
|
+
if (!root.querySelector('.td-toast') && queue.length === 0) {
|
|
464
508
|
root.remove();
|
|
509
|
+
this.cleanupToastLayer();
|
|
465
510
|
}
|
|
466
511
|
resolve(result);
|
|
467
512
|
}, 160);
|
|
@@ -473,6 +518,14 @@ class TdAlert {
|
|
|
473
518
|
window.clearTimeout(timeoutId);
|
|
474
519
|
timeoutId = undefined;
|
|
475
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
|
+
}
|
|
476
529
|
toast.classList.add('td-toast--paused');
|
|
477
530
|
};
|
|
478
531
|
const resumeTimer = () => {
|
|
@@ -482,6 +535,9 @@ class TdAlert {
|
|
|
482
535
|
timerStartedAt = Date.now();
|
|
483
536
|
timeoutId = window.setTimeout(() => close(false), remainingDuration);
|
|
484
537
|
toast.classList.remove('td-toast--paused');
|
|
538
|
+
if (progress) {
|
|
539
|
+
frameId = window.requestAnimationFrame(updateProgress);
|
|
540
|
+
}
|
|
485
541
|
};
|
|
486
542
|
if (config.actionText) {
|
|
487
543
|
const action = document.createElement('button');
|
|
@@ -503,20 +559,30 @@ class TdAlert {
|
|
|
503
559
|
toast.appendChild(icon);
|
|
504
560
|
toast.appendChild(content);
|
|
505
561
|
toast.appendChild(actions);
|
|
506
|
-
if (
|
|
507
|
-
const progress = document.createElement('span');
|
|
508
|
-
progress.className = 'td-toast-progress';
|
|
509
|
-
progress.style.animationDuration = `${config.duration}ms`;
|
|
562
|
+
if (progress) {
|
|
510
563
|
toast.appendChild(progress);
|
|
511
564
|
}
|
|
512
|
-
|
|
513
|
-
|
|
565
|
+
const activateToast = () => {
|
|
566
|
+
if (activated) {
|
|
567
|
+
return;
|
|
568
|
+
}
|
|
569
|
+
activated = true;
|
|
514
570
|
toast.addEventListener('pointerenter', pauseTimer);
|
|
515
571
|
toast.addEventListener('pointerleave', resumeTimer);
|
|
516
572
|
toast.addEventListener('focusin', pauseTimer);
|
|
517
573
|
toast.addEventListener('focusout', resumeTimer);
|
|
518
|
-
|
|
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;
|
|
519
583
|
}
|
|
584
|
+
root.appendChild(toast);
|
|
585
|
+
activateToast();
|
|
520
586
|
});
|
|
521
587
|
}
|
|
522
588
|
static toastSuccess(message, title = 'Guardado') {
|
|
@@ -589,11 +655,13 @@ class TdAlert {
|
|
|
589
655
|
static normalizeToastOptions(options) {
|
|
590
656
|
const legacy = options;
|
|
591
657
|
const modern = options;
|
|
658
|
+
const explicitPosition = modern.position ?? legacy.posicion;
|
|
659
|
+
const fallbackPosition = this.hasBlockingOverlayOpen() ? 'top-right' : 'bottom-left';
|
|
592
660
|
return {
|
|
593
661
|
title: modern.title ?? legacy.titulo ?? '',
|
|
594
662
|
message: modern.message ?? legacy.mensaje ?? '',
|
|
595
663
|
type: this.normalizeToastType(modern.type ?? legacy.tipo ?? 'neutral'),
|
|
596
|
-
position: this.normalizeToastPosition(
|
|
664
|
+
position: this.normalizeToastPosition(explicitPosition ?? fallbackPosition),
|
|
597
665
|
duration: modern.duration ?? legacy.duracion ?? 4200,
|
|
598
666
|
actionText: modern.actionText ?? legacy.textoAccion ?? '',
|
|
599
667
|
dismissible: modern.dismissible ?? legacy.cerrable ?? true,
|
|
@@ -601,6 +669,11 @@ class TdAlert {
|
|
|
601
669
|
maxVisible: modern.maxVisible ?? legacy.maximoVisible ?? 4,
|
|
602
670
|
};
|
|
603
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
|
+
}
|
|
604
677
|
static normalizeAlertType(type) {
|
|
605
678
|
const map = {
|
|
606
679
|
exito: 'success',
|
|
@@ -646,19 +719,132 @@ class TdAlert {
|
|
|
646
719
|
static getToastRoot(position) {
|
|
647
720
|
const id = `${this.toastRootPrefix}-${position}`;
|
|
648
721
|
const existing = document.getElementById(id);
|
|
649
|
-
if (existing)
|
|
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
|
+
}
|
|
650
728
|
return existing;
|
|
729
|
+
}
|
|
651
730
|
const root = document.createElement('div');
|
|
652
731
|
root.id = id;
|
|
653
732
|
root.className = `td-toast-root td-toast-root--${position}`;
|
|
654
|
-
|
|
733
|
+
this.applyAlertLayer(root, this.nextLayer(this.alertZIndex));
|
|
734
|
+
this.getToastLayer().appendChild(root);
|
|
655
735
|
return root;
|
|
656
736
|
}
|
|
657
|
-
static
|
|
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);
|
|
658
812
|
const max = Math.max(1, maxVisible);
|
|
659
|
-
while (root.
|
|
660
|
-
|
|
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;
|
|
661
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();
|
|
662
848
|
}
|
|
663
849
|
static getAlertIcon(type) {
|
|
664
850
|
const icons = {
|
|
@@ -736,30 +922,77 @@ class TdAlert {
|
|
|
736
922
|
const style = document.createElement('style');
|
|
737
923
|
style.id = this.styleId;
|
|
738
924
|
style.textContent = `
|
|
739
|
-
.td-alert-
|
|
740
|
-
.td-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
}
|
|
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
|
+
}
|
|
763
996
|
|
|
764
997
|
.td-alert-modal {
|
|
765
998
|
position: relative;
|
|
@@ -949,22 +1182,38 @@ class TdAlert {
|
|
|
949
1182
|
box-shadow: none;
|
|
950
1183
|
}
|
|
951
1184
|
|
|
952
|
-
.td-alert-
|
|
953
|
-
animation: td-alert-backdrop-out 150ms ease-in forwards;
|
|
954
|
-
}
|
|
955
|
-
|
|
956
|
-
.td-alert-
|
|
957
|
-
animation: td-alert-modal-out 150ms ease-in forwards;
|
|
958
|
-
}
|
|
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
|
+
}
|
|
959
1192
|
|
|
960
|
-
.td-toast-root {
|
|
961
|
-
position: fixed;
|
|
962
|
-
z-index: calc(var(--td-alert-z-index) + 1);
|
|
963
|
-
display: grid;
|
|
964
|
-
width: min(26rem, calc(100vw - 1.5rem));
|
|
965
|
-
gap: 0.65rem;
|
|
966
|
-
pointer-events: none;
|
|
967
|
-
}
|
|
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
|
+
}
|
|
968
1217
|
|
|
969
1218
|
.td-toast-root--bottom-left {
|
|
970
1219
|
bottom: max(1rem, env(safe-area-inset-bottom));
|
|
@@ -1034,24 +1283,11 @@ class TdAlert {
|
|
|
1034
1283
|
content: "";
|
|
1035
1284
|
}
|
|
1036
1285
|
|
|
1037
|
-
.td-toast
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
width: 3px;
|
|
1041
|
-
background: var(--td-toast-glow);
|
|
1042
|
-
opacity: 0.9;
|
|
1043
|
-
content: "";
|
|
1044
|
-
}
|
|
1045
|
-
|
|
1046
|
-
.td-toast--leaving {
|
|
1047
|
-
animation: td-toast-out 160ms ease-in forwards;
|
|
1048
|
-
}
|
|
1049
|
-
|
|
1050
|
-
.td-toast--paused .td-toast-progress {
|
|
1051
|
-
animation-play-state: paused;
|
|
1052
|
-
}
|
|
1286
|
+
.td-toast--leaving {
|
|
1287
|
+
animation: td-toast-out 160ms ease-in forwards;
|
|
1288
|
+
}
|
|
1053
1289
|
|
|
1054
|
-
.td-toast--success { --td-toast-glow: var(--td-color-success, #16784a); }
|
|
1290
|
+
.td-toast--success { --td-toast-glow: var(--td-color-success, #16784a); }
|
|
1055
1291
|
.td-toast--error { --td-toast-glow: var(--td-color-danger, #b93a3a); }
|
|
1056
1292
|
.td-toast--warning { --td-toast-glow: var(--td-color-warning, #a8660b); }
|
|
1057
1293
|
.td-toast--info { --td-toast-glow: var(--td-color-info, #2563a8); }
|
|
@@ -1160,18 +1396,18 @@ class TdAlert {
|
|
|
1160
1396
|
box-shadow: var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, 0.18));
|
|
1161
1397
|
}
|
|
1162
1398
|
|
|
1163
|
-
.td-toast-progress {
|
|
1164
|
-
position: absolute;
|
|
1165
|
-
z-index: 1;
|
|
1166
|
-
right: 0;
|
|
1167
|
-
bottom: 0;
|
|
1168
|
-
left: 0;
|
|
1169
|
-
height: 2px;
|
|
1170
|
-
background: currentColor;
|
|
1171
|
-
opacity: 0.24;
|
|
1172
|
-
transform-origin: left;
|
|
1173
|
-
|
|
1174
|
-
}
|
|
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
|
+
}
|
|
1175
1411
|
|
|
1176
1412
|
.td-theme-dark .td-toast {
|
|
1177
1413
|
border-color: color-mix(in srgb, var(--td-toast-glow) 20%, rgba(255, 255, 255, 0.16));
|
|
@@ -5674,6 +5910,9 @@ class TdAutocompleteSelect {
|
|
|
5674
5910
|
errorDisplay = input('auto', /* @ts-ignore */
|
|
5675
5911
|
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
5676
5912
|
emptyText = 'No se encontraron resultados';
|
|
5913
|
+
emptyActionText = '';
|
|
5914
|
+
emptyActionDescription = '';
|
|
5915
|
+
emptyActionIcon = 'add';
|
|
5677
5916
|
clearable = true;
|
|
5678
5917
|
dark = false;
|
|
5679
5918
|
scrollBehavior = 'reposition';
|
|
@@ -5684,6 +5923,7 @@ class TdAutocompleteSelect {
|
|
|
5684
5923
|
compareWith = (first, second) => Object.is(first, second);
|
|
5685
5924
|
selectionChange = new EventEmitter();
|
|
5686
5925
|
searchChange = new EventEmitter();
|
|
5926
|
+
emptyAction = new EventEmitter();
|
|
5687
5927
|
value = model(null, /* @ts-ignore */
|
|
5688
5928
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5689
5929
|
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
@@ -5736,6 +5976,9 @@ class TdAutocompleteSelect {
|
|
|
5736
5976
|
return [];
|
|
5737
5977
|
return this.options.filter((option) => this.filterWith(option, normalized));
|
|
5738
5978
|
}
|
|
5979
|
+
get shouldShowEmptyAction() {
|
|
5980
|
+
return !!this.emptyActionText.trim() && !!this.search.trim();
|
|
5981
|
+
}
|
|
5739
5982
|
get labelFloating() {
|
|
5740
5983
|
return (this.hasVisibleLabel &&
|
|
5741
5984
|
(this.focused() || this.open || !!this.search.trim() || this.value() !== null));
|
|
@@ -5832,6 +6075,12 @@ class TdAutocompleteSelect {
|
|
|
5832
6075
|
this.formBridge.markTouched(this.touched, this.touch);
|
|
5833
6076
|
this.cdr.markForCheck();
|
|
5834
6077
|
}
|
|
6078
|
+
emitEmptyAction(event) {
|
|
6079
|
+
event.stopPropagation();
|
|
6080
|
+
const currentSearch = this.search.trim();
|
|
6081
|
+
this.close();
|
|
6082
|
+
this.emptyAction.emit(currentSearch);
|
|
6083
|
+
}
|
|
5835
6084
|
handleInput(event) {
|
|
5836
6085
|
this.search = event.target.value;
|
|
5837
6086
|
this.value.set(null);
|
|
@@ -6048,7 +6297,7 @@ class TdAutocompleteSelect {
|
|
|
6048
6297
|
});
|
|
6049
6298
|
}
|
|
6050
6299
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6051
|
-
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: [
|
|
6052
6301
|
{
|
|
6053
6302
|
provide: NG_VALUE_ACCESSOR,
|
|
6054
6303
|
useExisting: forwardRef(() => TdAutocompleteSelect),
|
|
@@ -6137,7 +6386,26 @@ class TdAutocompleteSelect {
|
|
|
6137
6386
|
role="listbox"
|
|
6138
6387
|
>
|
|
6139
6388
|
@if (!filteredOptions.length) {
|
|
6140
|
-
<
|
|
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>
|
|
6141
6409
|
}
|
|
6142
6410
|
@for (option of filteredOptions; track option.value; let index = $index) {
|
|
6143
6411
|
<button
|
|
@@ -6165,7 +6433,7 @@ class TdAutocompleteSelect {
|
|
|
6165
6433
|
}
|
|
6166
6434
|
</div>
|
|
6167
6435
|
</ng-template>
|
|
6168
|
-
`, 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 });
|
|
6169
6437
|
}
|
|
6170
6438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdAutocompleteSelect, decorators: [{
|
|
6171
6439
|
type: Component,
|
|
@@ -6252,7 +6520,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6252
6520
|
role="listbox"
|
|
6253
6521
|
>
|
|
6254
6522
|
@if (!filteredOptions.length) {
|
|
6255
|
-
<
|
|
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>
|
|
6256
6543
|
}
|
|
6257
6544
|
@for (option of filteredOptions; track option.value; let index = $index) {
|
|
6258
6545
|
<button
|
|
@@ -6289,7 +6576,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6289
6576
|
], host: {
|
|
6290
6577
|
'[hidden]': 'hidden()',
|
|
6291
6578
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
6292
|
-
}, 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;
|
|
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"] }]
|
|
6293
6580
|
}], ctorParameters: () => [], propDecorators: { searchInput: [{
|
|
6294
6581
|
type: ViewChild,
|
|
6295
6582
|
args: ['searchInput']
|
|
@@ -6321,6 +6608,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6321
6608
|
type: Input
|
|
6322
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: [{
|
|
6323
6610
|
type: Input
|
|
6611
|
+
}], emptyActionText: [{
|
|
6612
|
+
type: Input
|
|
6613
|
+
}], emptyActionDescription: [{
|
|
6614
|
+
type: Input
|
|
6615
|
+
}], emptyActionIcon: [{
|
|
6616
|
+
type: Input
|
|
6324
6617
|
}], clearable: [{
|
|
6325
6618
|
type: Input
|
|
6326
6619
|
}], dark: [{
|
|
@@ -6341,6 +6634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6341
6634
|
type: Output
|
|
6342
6635
|
}], searchChange: [{
|
|
6343
6636
|
type: Output
|
|
6637
|
+
}], emptyAction: [{
|
|
6638
|
+
type: Output
|
|
6344
6639
|
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
6345
6640
|
|
|
6346
6641
|
let selectSequence = 0;
|
|
@@ -6387,6 +6682,9 @@ class TdSelect {
|
|
|
6387
6682
|
errorDisplay = input('auto', /* @ts-ignore */
|
|
6388
6683
|
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
6389
6684
|
emptyText = 'No hay opciones disponibles';
|
|
6685
|
+
emptyActionText = '';
|
|
6686
|
+
emptyActionDescription = '';
|
|
6687
|
+
emptyActionIcon = 'add';
|
|
6390
6688
|
clearable = false;
|
|
6391
6689
|
dark = false;
|
|
6392
6690
|
scrollBehavior = 'reposition';
|
|
@@ -6394,6 +6692,7 @@ class TdSelect {
|
|
|
6394
6692
|
appearance = 'outline';
|
|
6395
6693
|
compareWith = (first, second) => Object.is(first, second);
|
|
6396
6694
|
selectionChange = new EventEmitter();
|
|
6695
|
+
emptyAction = new EventEmitter();
|
|
6397
6696
|
value = model(null, /* @ts-ignore */
|
|
6398
6697
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
6399
6698
|
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
@@ -6500,6 +6799,11 @@ class TdSelect {
|
|
|
6500
6799
|
event.stopPropagation();
|
|
6501
6800
|
this.setValue(null);
|
|
6502
6801
|
}
|
|
6802
|
+
emitEmptyAction(event) {
|
|
6803
|
+
event.stopPropagation();
|
|
6804
|
+
this.close();
|
|
6805
|
+
this.emptyAction.emit();
|
|
6806
|
+
}
|
|
6503
6807
|
handleKeydown(event) {
|
|
6504
6808
|
if (event.key === 'Escape') {
|
|
6505
6809
|
event.preventDefault();
|
|
@@ -6633,7 +6937,7 @@ class TdSelect {
|
|
|
6633
6937
|
});
|
|
6634
6938
|
}
|
|
6635
6939
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6636
|
-
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: [
|
|
6637
6941
|
{
|
|
6638
6942
|
provide: NG_VALUE_ACCESSOR,
|
|
6639
6943
|
useExisting: forwardRef(() => TdSelect),
|
|
@@ -6726,7 +7030,25 @@ class TdSelect {
|
|
|
6726
7030
|
role="listbox"
|
|
6727
7031
|
>
|
|
6728
7032
|
@if (!options.length) {
|
|
6729
|
-
<
|
|
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>
|
|
6730
7052
|
}
|
|
6731
7053
|
@for (option of options; track option.value; let index = $index) {
|
|
6732
7054
|
<button
|
|
@@ -6754,7 +7076,7 @@ class TdSelect {
|
|
|
6754
7076
|
}
|
|
6755
7077
|
</div>
|
|
6756
7078
|
</ng-template>
|
|
6757
|
-
`, 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 });
|
|
6758
7080
|
}
|
|
6759
7081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSelect, decorators: [{
|
|
6760
7082
|
type: Component,
|
|
@@ -6845,7 +7167,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6845
7167
|
role="listbox"
|
|
6846
7168
|
>
|
|
6847
7169
|
@if (!options.length) {
|
|
6848
|
-
<
|
|
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>
|
|
6849
7189
|
}
|
|
6850
7190
|
@for (option of options; track option.value; let index = $index) {
|
|
6851
7191
|
<button
|
|
@@ -6882,7 +7222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6882
7222
|
], host: {
|
|
6883
7223
|
'[hidden]': 'hidden()',
|
|
6884
7224
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
6885
|
-
}, 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;
|
|
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"] }]
|
|
6886
7226
|
}], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
|
|
6887
7227
|
type: ViewChild,
|
|
6888
7228
|
args: [CdkConnectedOverlay]
|
|
@@ -6904,6 +7244,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6904
7244
|
type: Input
|
|
6905
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: [{
|
|
6906
7246
|
type: Input
|
|
7247
|
+
}], emptyActionText: [{
|
|
7248
|
+
type: Input
|
|
7249
|
+
}], emptyActionDescription: [{
|
|
7250
|
+
type: Input
|
|
7251
|
+
}], emptyActionIcon: [{
|
|
7252
|
+
type: Input
|
|
6907
7253
|
}], clearable: [{
|
|
6908
7254
|
type: Input
|
|
6909
7255
|
}], dark: [{
|
|
@@ -6918,6 +7264,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6918
7264
|
type: Input
|
|
6919
7265
|
}], selectionChange: [{
|
|
6920
7266
|
type: Output
|
|
7267
|
+
}], emptyAction: [{
|
|
7268
|
+
type: Output
|
|
6921
7269
|
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
6922
7270
|
|
|
6923
7271
|
class TdSidebar {
|