@telcomdev/ui 0.1.25 → 0.1.27
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 +477 -102
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/telcomdev-ui.d.ts +31 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, booleanAttribute, EventEmitter, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, HostListener, Directive, EnvironmentInjector, DestroyRef, effect, TemplateRef, ViewChildren, ContentChildren,
|
|
2
|
+
import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, booleanAttribute, EventEmitter, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, ElementRef, HostListener, Directive, EnvironmentInjector, DestroyRef, effect, TemplateRef, ViewChildren, ContentChildren, ViewContainerRef, Renderer2, numberAttribute } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
5
5
|
import { FORM_FIELD } from '@angular/forms/signals';
|
|
@@ -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,20 +719,133 @@ 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'));
|
|
661
820
|
}
|
|
662
821
|
}
|
|
822
|
+
static updateToastQueueIndicator(root) {
|
|
823
|
+
const queue = this.getToastQueue(root);
|
|
824
|
+
const existing = root.querySelector(':scope > .td-toast-queue-indicator');
|
|
825
|
+
if (!queue.length) {
|
|
826
|
+
existing?.remove();
|
|
827
|
+
return;
|
|
828
|
+
}
|
|
829
|
+
const indicator = existing ?? document.createElement('div');
|
|
830
|
+
indicator.className = 'td-toast-queue-indicator';
|
|
831
|
+
indicator.textContent = `+${queue.length} notificación${queue.length === 1 ? '' : 'es'}`;
|
|
832
|
+
root.appendChild(indicator);
|
|
833
|
+
}
|
|
834
|
+
static cleanupToastLayer() {
|
|
835
|
+
const layer = document.getElementById(this.toastHostId);
|
|
836
|
+
if (!(layer instanceof HTMLElement)) {
|
|
837
|
+
return;
|
|
838
|
+
}
|
|
839
|
+
if (layer.querySelector('.td-toast-root')) {
|
|
840
|
+
return;
|
|
841
|
+
}
|
|
842
|
+
const toastPopover = layer;
|
|
843
|
+
if (typeof toastPopover.hidePopover === 'function' && toastPopover.matches?.(':popover-open')) {
|
|
844
|
+
toastPopover.hidePopover();
|
|
845
|
+
}
|
|
846
|
+
layer.remove();
|
|
847
|
+
document.getElementById(this.toastWrapperId)?.remove();
|
|
848
|
+
}
|
|
663
849
|
static getAlertIcon(type) {
|
|
664
850
|
const icons = {
|
|
665
851
|
success: 'check_circle',
|
|
@@ -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));
|
|
@@ -3256,16 +3492,40 @@ class TdDialogRef {
|
|
|
3256
3492
|
class TdDialogPanel {
|
|
3257
3493
|
payload = inject(DIALOG_DATA);
|
|
3258
3494
|
dialogRef = inject(TdDialogRef);
|
|
3495
|
+
contentHost;
|
|
3496
|
+
ngAfterViewInit() {
|
|
3497
|
+
if (this.payload.config.autoFocus === false) {
|
|
3498
|
+
return;
|
|
3499
|
+
}
|
|
3500
|
+
queueMicrotask(() => this.focusFirstInteractiveElement());
|
|
3501
|
+
window.setTimeout(() => this.focusFirstInteractiveElement(), 40);
|
|
3502
|
+
}
|
|
3259
3503
|
get draggableEnabled() {
|
|
3260
3504
|
return !!this.payload.config.draggable && !this.payload.fullscreen && !this.isMobileLike();
|
|
3261
3505
|
}
|
|
3506
|
+
focusFirstInteractiveElement() {
|
|
3507
|
+
const host = this.contentHost?.nativeElement;
|
|
3508
|
+
if (!host) {
|
|
3509
|
+
return;
|
|
3510
|
+
}
|
|
3511
|
+
const target = host.querySelector([
|
|
3512
|
+
'[data-td-autofocus]',
|
|
3513
|
+
'[cdkFocusInitial]',
|
|
3514
|
+
'input:not([disabled]):not([type="hidden"])',
|
|
3515
|
+
'textarea:not([disabled])',
|
|
3516
|
+
'select:not([disabled])',
|
|
3517
|
+
'button:not([disabled])',
|
|
3518
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
3519
|
+
].join(', '));
|
|
3520
|
+
target?.focus?.();
|
|
3521
|
+
}
|
|
3262
3522
|
isMobileLike() {
|
|
3263
3523
|
return typeof window !== 'undefined' &&
|
|
3264
3524
|
typeof window.matchMedia === 'function' &&
|
|
3265
3525
|
window.matchMedia('(max-width: 600px), (pointer: coarse)').matches;
|
|
3266
3526
|
}
|
|
3267
3527
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3268
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDialogPanel, isStandalone: true, selector: "td-dialog-panel", ngImport: i0, template: `
|
|
3528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDialogPanel, isStandalone: true, selector: "td-dialog-panel", viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
3269
3529
|
<section
|
|
3270
3530
|
class="td-dialog"
|
|
3271
3531
|
cdkDrag
|
|
@@ -3313,7 +3573,7 @@ class TdDialogPanel {
|
|
|
3313
3573
|
</header>
|
|
3314
3574
|
}
|
|
3315
3575
|
|
|
3316
|
-
<div class="td-dialog__contenido">
|
|
3576
|
+
<div #contentHost class="td-dialog__contenido">
|
|
3317
3577
|
<ng-container *ngComponentOutlet="payload.component" />
|
|
3318
3578
|
</div>
|
|
3319
3579
|
</section>
|
|
@@ -3369,12 +3629,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
3369
3629
|
</header>
|
|
3370
3630
|
}
|
|
3371
3631
|
|
|
3372
|
-
<div class="td-dialog__contenido">
|
|
3632
|
+
<div #contentHost class="td-dialog__contenido">
|
|
3373
3633
|
<ng-container *ngComponentOutlet="payload.component" />
|
|
3374
3634
|
</div>
|
|
3375
3635
|
</section>
|
|
3376
3636
|
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:var(--td-radius-xl, 1rem);outline:none;box-shadow:var(--td-shadow-lg, 0 28px 75px rgba(15, 23, 42, .24));animation:td-dialog-enter .18s cubic-bezier(.2,.8,.2,1)}:host-context(.td-dialog-overlay--fullscreen){height:100%;max-height:100%;border-radius:0}*{box-sizing:border-box}.td-dialog{--td-dialog-surface: var(--td-color-surface, #fff);--td-dialog-footer: var(--td-color-surface-soft, #fafbfc);--td-dialog-border: var(--td-color-border, #e6e9f0);--td-dialog-text: var(--td-color-text, #263147);--td-dialog-muted: var(--td-color-text-muted, #748096);display:flex;width:100%;max-height:inherit;flex-direction:column;overflow:hidden;color:var(--td-dialog-text);background:var(--td-dialog-surface);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-dialog--oscuro{--td-dialog-surface: var(--td-color-surface, #19191f);--td-dialog-footer: var(--td-color-surface-soft, #202028);--td-dialog-border: var(--td-color-border, #303039);--td-dialog-text: var(--td-color-text, #ededf0);--td-dialog-muted: var(--td-color-text-muted, #a1a1aa)}.td-dialog__header{display:flex;min-height:4.4rem;flex:0 0 auto;align-items:center;gap:.85rem;border-bottom:1px solid var(--td-dialog-border);padding:1rem 1.25rem 1rem 1.5rem;background:var(--td-dialog-surface)}.td-dialog__drag-zone{display:flex;min-width:0;flex:1;align-items:center;gap:.85rem}.td-dialog--draggable .td-dialog__drag-zone{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.td-dialog--draggable .td-dialog__drag-zone:active{cursor:grabbing}.td-dialog__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:var(--td-radius-md, .75rem);color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #eeecff)}.td-dialog--oscuro .td-dialog__icono{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292540)}.td-dialog__titulos{min-width:0;flex:1}.td-dialog__titulos h2{margin:0;font-size:1rem;line-height:1.3;letter-spacing:-.015em}.td-dialog__titulos p{margin:.2rem 0 0;color:var(--td-dialog-muted);font-size:.73rem;line-height:1.45}.td-dialog__cerrar{display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .65rem);color:var(--td-dialog-muted);background:transparent;cursor:pointer}.td-dialog__cerrar:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-dialog--oscuro .td-dialog__cerrar:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292931)}.td-dialog__contenido{display:flex;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:1.5rem;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent) transparent;scrollbar-width:thin}.td-dialog__contenido ::ng-deep>*{display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido ::ng-deep :has(>td-dialog-actions){display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido::-webkit-scrollbar{width:.42rem}.td-dialog__contenido::-webkit-scrollbar-track{background:transparent}.td-dialog__contenido::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent)}.td-dialog__contenido::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--td-dialog-muted) 58%,transparent)}.td-dialog--pantalla{height:100%}@keyframes td-dialog-enter{0%{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}}@media(max-width:600px){:host{border-radius:var(--td-radius-xl, 1rem)}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"] }]
|
|
3377
|
-
}]
|
|
3637
|
+
}], propDecorators: { contentHost: [{
|
|
3638
|
+
type: ViewChild,
|
|
3639
|
+
args: ['contentHost', { read: ElementRef }]
|
|
3640
|
+
}] } });
|
|
3378
3641
|
|
|
3379
3642
|
class TdDialog {
|
|
3380
3643
|
dialog = inject(Dialog);
|
|
@@ -5674,6 +5937,9 @@ class TdAutocompleteSelect {
|
|
|
5674
5937
|
errorDisplay = input('auto', /* @ts-ignore */
|
|
5675
5938
|
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
5676
5939
|
emptyText = 'No se encontraron resultados';
|
|
5940
|
+
emptyActionText = '';
|
|
5941
|
+
emptyActionDescription = '';
|
|
5942
|
+
emptyActionIcon = 'add';
|
|
5677
5943
|
clearable = true;
|
|
5678
5944
|
dark = false;
|
|
5679
5945
|
scrollBehavior = 'reposition';
|
|
@@ -5684,6 +5950,7 @@ class TdAutocompleteSelect {
|
|
|
5684
5950
|
compareWith = (first, second) => Object.is(first, second);
|
|
5685
5951
|
selectionChange = new EventEmitter();
|
|
5686
5952
|
searchChange = new EventEmitter();
|
|
5953
|
+
emptyAction = new EventEmitter();
|
|
5687
5954
|
value = model(null, /* @ts-ignore */
|
|
5688
5955
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
5689
5956
|
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
@@ -5736,6 +6003,9 @@ class TdAutocompleteSelect {
|
|
|
5736
6003
|
return [];
|
|
5737
6004
|
return this.options.filter((option) => this.filterWith(option, normalized));
|
|
5738
6005
|
}
|
|
6006
|
+
get shouldShowEmptyAction() {
|
|
6007
|
+
return !!this.emptyActionText.trim() && !!this.search.trim();
|
|
6008
|
+
}
|
|
5739
6009
|
get labelFloating() {
|
|
5740
6010
|
return (this.hasVisibleLabel &&
|
|
5741
6011
|
(this.focused() || this.open || !!this.search.trim() || this.value() !== null));
|
|
@@ -5832,6 +6102,12 @@ class TdAutocompleteSelect {
|
|
|
5832
6102
|
this.formBridge.markTouched(this.touched, this.touch);
|
|
5833
6103
|
this.cdr.markForCheck();
|
|
5834
6104
|
}
|
|
6105
|
+
emitEmptyAction(event) {
|
|
6106
|
+
event.stopPropagation();
|
|
6107
|
+
const currentSearch = this.search.trim();
|
|
6108
|
+
this.close();
|
|
6109
|
+
this.emptyAction.emit(currentSearch);
|
|
6110
|
+
}
|
|
5835
6111
|
handleInput(event) {
|
|
5836
6112
|
this.search = event.target.value;
|
|
5837
6113
|
this.value.set(null);
|
|
@@ -6048,7 +6324,7 @@ class TdAutocompleteSelect {
|
|
|
6048
6324
|
});
|
|
6049
6325
|
}
|
|
6050
6326
|
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: [
|
|
6327
|
+
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
6328
|
{
|
|
6053
6329
|
provide: NG_VALUE_ACCESSOR,
|
|
6054
6330
|
useExisting: forwardRef(() => TdAutocompleteSelect),
|
|
@@ -6137,7 +6413,26 @@ class TdAutocompleteSelect {
|
|
|
6137
6413
|
role="listbox"
|
|
6138
6414
|
>
|
|
6139
6415
|
@if (!filteredOptions.length) {
|
|
6140
|
-
<
|
|
6416
|
+
<div class="td-select-panel__empty-state">
|
|
6417
|
+
<p class="td-select-panel__empty">{{ emptyText }}</p>
|
|
6418
|
+
@if (emptyActionDescription) {
|
|
6419
|
+
<small class="td-select-panel__empty-description">{{ emptyActionDescription }}</small>
|
|
6420
|
+
}
|
|
6421
|
+
@if (shouldShowEmptyAction) {
|
|
6422
|
+
<button
|
|
6423
|
+
type="button"
|
|
6424
|
+
class="td-select-panel__empty-action td-select-panel__empty-action--option"
|
|
6425
|
+
[disabled]="isDisabled()"
|
|
6426
|
+
(mousedown)="$event.preventDefault()"
|
|
6427
|
+
(click)="emitEmptyAction($event)"
|
|
6428
|
+
>
|
|
6429
|
+
@if (emptyActionIcon) {
|
|
6430
|
+
<td-icon [nombre]="emptyActionIcon" />
|
|
6431
|
+
}
|
|
6432
|
+
<span>{{ emptyActionText }}</span>
|
|
6433
|
+
</button>
|
|
6434
|
+
}
|
|
6435
|
+
</div>
|
|
6141
6436
|
}
|
|
6142
6437
|
@for (option of filteredOptions; track option.value; let index = $index) {
|
|
6143
6438
|
<button
|
|
@@ -6165,7 +6460,7 @@ class TdAutocompleteSelect {
|
|
|
6165
6460
|
}
|
|
6166
6461
|
</div>
|
|
6167
6462
|
</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 });
|
|
6463
|
+
`, 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:min(100%,16rem)!important;min-height:2.7rem;border-style:dashed;border-radius:.72rem!important;padding:.65rem .78rem!important;margin-inline:auto;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
6464
|
}
|
|
6170
6465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdAutocompleteSelect, decorators: [{
|
|
6171
6466
|
type: Component,
|
|
@@ -6252,7 +6547,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6252
6547
|
role="listbox"
|
|
6253
6548
|
>
|
|
6254
6549
|
@if (!filteredOptions.length) {
|
|
6255
|
-
<
|
|
6550
|
+
<div class="td-select-panel__empty-state">
|
|
6551
|
+
<p class="td-select-panel__empty">{{ emptyText }}</p>
|
|
6552
|
+
@if (emptyActionDescription) {
|
|
6553
|
+
<small class="td-select-panel__empty-description">{{ emptyActionDescription }}</small>
|
|
6554
|
+
}
|
|
6555
|
+
@if (shouldShowEmptyAction) {
|
|
6556
|
+
<button
|
|
6557
|
+
type="button"
|
|
6558
|
+
class="td-select-panel__empty-action td-select-panel__empty-action--option"
|
|
6559
|
+
[disabled]="isDisabled()"
|
|
6560
|
+
(mousedown)="$event.preventDefault()"
|
|
6561
|
+
(click)="emitEmptyAction($event)"
|
|
6562
|
+
>
|
|
6563
|
+
@if (emptyActionIcon) {
|
|
6564
|
+
<td-icon [nombre]="emptyActionIcon" />
|
|
6565
|
+
}
|
|
6566
|
+
<span>{{ emptyActionText }}</span>
|
|
6567
|
+
</button>
|
|
6568
|
+
}
|
|
6569
|
+
</div>
|
|
6256
6570
|
}
|
|
6257
6571
|
@for (option of filteredOptions; track option.value; let index = $index) {
|
|
6258
6572
|
<button
|
|
@@ -6289,7 +6603,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6289
6603
|
], host: {
|
|
6290
6604
|
'[hidden]': 'hidden()',
|
|
6291
6605
|
'[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;
|
|
6606
|
+
}, 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:min(100%,16rem)!important;min-height:2.7rem;border-style:dashed;border-radius:.72rem!important;padding:.65rem .78rem!important;margin-inline:auto;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
6607
|
}], ctorParameters: () => [], propDecorators: { searchInput: [{
|
|
6294
6608
|
type: ViewChild,
|
|
6295
6609
|
args: ['searchInput']
|
|
@@ -6321,6 +6635,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6321
6635
|
type: Input
|
|
6322
6636
|
}], 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
6637
|
type: Input
|
|
6638
|
+
}], emptyActionText: [{
|
|
6639
|
+
type: Input
|
|
6640
|
+
}], emptyActionDescription: [{
|
|
6641
|
+
type: Input
|
|
6642
|
+
}], emptyActionIcon: [{
|
|
6643
|
+
type: Input
|
|
6324
6644
|
}], clearable: [{
|
|
6325
6645
|
type: Input
|
|
6326
6646
|
}], dark: [{
|
|
@@ -6341,6 +6661,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6341
6661
|
type: Output
|
|
6342
6662
|
}], searchChange: [{
|
|
6343
6663
|
type: Output
|
|
6664
|
+
}], emptyAction: [{
|
|
6665
|
+
type: Output
|
|
6344
6666
|
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
6345
6667
|
|
|
6346
6668
|
let selectSequence = 0;
|
|
@@ -6387,6 +6709,9 @@ class TdSelect {
|
|
|
6387
6709
|
errorDisplay = input('auto', /* @ts-ignore */
|
|
6388
6710
|
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
6389
6711
|
emptyText = 'No hay opciones disponibles';
|
|
6712
|
+
emptyActionText = '';
|
|
6713
|
+
emptyActionDescription = '';
|
|
6714
|
+
emptyActionIcon = 'add';
|
|
6390
6715
|
clearable = false;
|
|
6391
6716
|
dark = false;
|
|
6392
6717
|
scrollBehavior = 'reposition';
|
|
@@ -6394,6 +6719,7 @@ class TdSelect {
|
|
|
6394
6719
|
appearance = 'outline';
|
|
6395
6720
|
compareWith = (first, second) => Object.is(first, second);
|
|
6396
6721
|
selectionChange = new EventEmitter();
|
|
6722
|
+
emptyAction = new EventEmitter();
|
|
6397
6723
|
value = model(null, /* @ts-ignore */
|
|
6398
6724
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
6399
6725
|
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
@@ -6500,6 +6826,11 @@ class TdSelect {
|
|
|
6500
6826
|
event.stopPropagation();
|
|
6501
6827
|
this.setValue(null);
|
|
6502
6828
|
}
|
|
6829
|
+
emitEmptyAction(event) {
|
|
6830
|
+
event.stopPropagation();
|
|
6831
|
+
this.close();
|
|
6832
|
+
this.emptyAction.emit();
|
|
6833
|
+
}
|
|
6503
6834
|
handleKeydown(event) {
|
|
6504
6835
|
if (event.key === 'Escape') {
|
|
6505
6836
|
event.preventDefault();
|
|
@@ -6633,7 +6964,7 @@ class TdSelect {
|
|
|
6633
6964
|
});
|
|
6634
6965
|
}
|
|
6635
6966
|
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: [
|
|
6967
|
+
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
6968
|
{
|
|
6638
6969
|
provide: NG_VALUE_ACCESSOR,
|
|
6639
6970
|
useExisting: forwardRef(() => TdSelect),
|
|
@@ -6726,7 +7057,25 @@ class TdSelect {
|
|
|
6726
7057
|
role="listbox"
|
|
6727
7058
|
>
|
|
6728
7059
|
@if (!options.length) {
|
|
6729
|
-
<
|
|
7060
|
+
<div class="td-select-panel__empty-state">
|
|
7061
|
+
<p class="td-select-panel__empty">{{ emptyText }}</p>
|
|
7062
|
+
@if (emptyActionDescription) {
|
|
7063
|
+
<small class="td-select-panel__empty-description">{{ emptyActionDescription }}</small>
|
|
7064
|
+
}
|
|
7065
|
+
@if (emptyActionText) {
|
|
7066
|
+
<button
|
|
7067
|
+
type="button"
|
|
7068
|
+
class="td-select-panel__empty-action td-select-panel__empty-action--option"
|
|
7069
|
+
[disabled]="isDisabled()"
|
|
7070
|
+
(click)="emitEmptyAction($event)"
|
|
7071
|
+
>
|
|
7072
|
+
@if (emptyActionIcon) {
|
|
7073
|
+
<td-icon [nombre]="emptyActionIcon" />
|
|
7074
|
+
}
|
|
7075
|
+
<span>{{ emptyActionText }}</span>
|
|
7076
|
+
</button>
|
|
7077
|
+
}
|
|
7078
|
+
</div>
|
|
6730
7079
|
}
|
|
6731
7080
|
@for (option of options; track option.value; let index = $index) {
|
|
6732
7081
|
<button
|
|
@@ -6754,7 +7103,7 @@ class TdSelect {
|
|
|
6754
7103
|
}
|
|
6755
7104
|
</div>
|
|
6756
7105
|
</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 });
|
|
7106
|
+
`, 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:min(100%,16rem)!important;min-height:2.7rem;border-style:dashed;border-radius:.72rem!important;padding:.65rem .78rem!important;margin-inline:auto;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
7107
|
}
|
|
6759
7108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSelect, decorators: [{
|
|
6760
7109
|
type: Component,
|
|
@@ -6845,7 +7194,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6845
7194
|
role="listbox"
|
|
6846
7195
|
>
|
|
6847
7196
|
@if (!options.length) {
|
|
6848
|
-
<
|
|
7197
|
+
<div class="td-select-panel__empty-state">
|
|
7198
|
+
<p class="td-select-panel__empty">{{ emptyText }}</p>
|
|
7199
|
+
@if (emptyActionDescription) {
|
|
7200
|
+
<small class="td-select-panel__empty-description">{{ emptyActionDescription }}</small>
|
|
7201
|
+
}
|
|
7202
|
+
@if (emptyActionText) {
|
|
7203
|
+
<button
|
|
7204
|
+
type="button"
|
|
7205
|
+
class="td-select-panel__empty-action td-select-panel__empty-action--option"
|
|
7206
|
+
[disabled]="isDisabled()"
|
|
7207
|
+
(click)="emitEmptyAction($event)"
|
|
7208
|
+
>
|
|
7209
|
+
@if (emptyActionIcon) {
|
|
7210
|
+
<td-icon [nombre]="emptyActionIcon" />
|
|
7211
|
+
}
|
|
7212
|
+
<span>{{ emptyActionText }}</span>
|
|
7213
|
+
</button>
|
|
7214
|
+
}
|
|
7215
|
+
</div>
|
|
6849
7216
|
}
|
|
6850
7217
|
@for (option of options; track option.value; let index = $index) {
|
|
6851
7218
|
<button
|
|
@@ -6882,7 +7249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6882
7249
|
], host: {
|
|
6883
7250
|
'[hidden]': 'hidden()',
|
|
6884
7251
|
'[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;
|
|
7252
|
+
}, 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:min(100%,16rem)!important;min-height:2.7rem;border-style:dashed;border-radius:.72rem!important;padding:.65rem .78rem!important;margin-inline:auto;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
7253
|
}], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
|
|
6887
7254
|
type: ViewChild,
|
|
6888
7255
|
args: [CdkConnectedOverlay]
|
|
@@ -6904,6 +7271,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6904
7271
|
type: Input
|
|
6905
7272
|
}], 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
7273
|
type: Input
|
|
7274
|
+
}], emptyActionText: [{
|
|
7275
|
+
type: Input
|
|
7276
|
+
}], emptyActionDescription: [{
|
|
7277
|
+
type: Input
|
|
7278
|
+
}], emptyActionIcon: [{
|
|
7279
|
+
type: Input
|
|
6907
7280
|
}], clearable: [{
|
|
6908
7281
|
type: Input
|
|
6909
7282
|
}], dark: [{
|
|
@@ -6918,6 +7291,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6918
7291
|
type: Input
|
|
6919
7292
|
}], selectionChange: [{
|
|
6920
7293
|
type: Output
|
|
7294
|
+
}], emptyAction: [{
|
|
7295
|
+
type: Output
|
|
6921
7296
|
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
6922
7297
|
|
|
6923
7298
|
class TdSidebar {
|