@telcomdev/ui 0.1.0 → 0.1.2
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 +585 -92
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +15 -1
- package/types/telcomdev-ui.d.ts +92 -6
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, inject,
|
|
2
|
+
import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, ViewChild, InjectionToken, HostListener, Directive, DestroyRef, TemplateRef, ViewChildren, ContentChildren, effect } 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';
|
|
@@ -365,44 +365,6 @@ class TdAlerta {
|
|
|
365
365
|
}
|
|
366
366
|
}
|
|
367
367
|
|
|
368
|
-
/**
|
|
369
|
-
* Puente reutilizable entre Signal Forms y ControlValueAccessor.
|
|
370
|
-
*
|
|
371
|
-
* Los inputs del contrato se declaran en cada componente porque el compilador
|
|
372
|
-
* de Signal Forms de Angular 21 necesita encontrarlos directamente allí.
|
|
373
|
-
*/
|
|
374
|
-
function createTdFormControlBridge() {
|
|
375
|
-
const injector = inject(Injector);
|
|
376
|
-
const cdr = inject(ChangeDetectorRef);
|
|
377
|
-
const cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
378
|
-
let onCvaTouched = () => undefined;
|
|
379
|
-
const usesSignalForms = () => !!injector.get(FORM_FIELD, null, { self: true, optional: true });
|
|
380
|
-
return {
|
|
381
|
-
get usesSignalForms() {
|
|
382
|
-
return usesSignalForms();
|
|
383
|
-
},
|
|
384
|
-
isDisabled(fieldDisabled) {
|
|
385
|
-
return usesSignalForms() ? fieldDisabled : fieldDisabled || cvaDisabled();
|
|
386
|
-
},
|
|
387
|
-
registerOnTouched(fn) {
|
|
388
|
-
onCvaTouched = fn;
|
|
389
|
-
},
|
|
390
|
-
setDisabledState(disabled) {
|
|
391
|
-
if (!usesSignalForms())
|
|
392
|
-
cvaDisabled.set(disabled);
|
|
393
|
-
cdr.markForCheck();
|
|
394
|
-
},
|
|
395
|
-
markTouched(touched, touch) {
|
|
396
|
-
// Angular prioriza el CVA cuando el control también publica NG_VALUE_ACCESSOR,
|
|
397
|
-
// incluso si está enlazado mediante [formField]. Mantener esta llamada permite
|
|
398
|
-
// que Signal Forms marque el field como touched sin perder compatibilidad clásica.
|
|
399
|
-
onCvaTouched();
|
|
400
|
-
touched.set(true);
|
|
401
|
-
touch.emit();
|
|
402
|
-
},
|
|
403
|
-
};
|
|
404
|
-
}
|
|
405
|
-
|
|
406
368
|
const TD_ICONOS = {
|
|
407
369
|
home: {
|
|
408
370
|
path: 'M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V10.5Z',
|
|
@@ -738,6 +700,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
738
700
|
args: ['style.--td-icon-size']
|
|
739
701
|
}] } });
|
|
740
702
|
|
|
703
|
+
class TdButton {
|
|
704
|
+
variant = 'solid';
|
|
705
|
+
tone = 'primary';
|
|
706
|
+
size = 'md';
|
|
707
|
+
type = 'button';
|
|
708
|
+
icon = '';
|
|
709
|
+
iconPosition = 'start';
|
|
710
|
+
disabled = false;
|
|
711
|
+
loading = false;
|
|
712
|
+
block = false;
|
|
713
|
+
ariaLabel = '';
|
|
714
|
+
pressed = new EventEmitter();
|
|
715
|
+
handleClick(event) {
|
|
716
|
+
if (this.disabled || this.loading)
|
|
717
|
+
return;
|
|
718
|
+
this.pressed.emit(event);
|
|
719
|
+
}
|
|
720
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
721
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdButton, isStandalone: true, selector: "td-button", inputs: { variant: "variant", tone: "tone", size: "size", type: "type", icon: "icon", iconPosition: "iconPosition", disabled: "disabled", loading: "loading", block: "block", ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { pressed: "pressed" }, ngImport: i0, template: `
|
|
722
|
+
<button
|
|
723
|
+
class="td-button"
|
|
724
|
+
[class]="'td-button td-button--' + variant + ' td-button--' + tone + ' td-button--' + size"
|
|
725
|
+
[class.td-button--block]="block"
|
|
726
|
+
[class.td-button--loading]="loading"
|
|
727
|
+
[type]="type"
|
|
728
|
+
[disabled]="disabled || loading"
|
|
729
|
+
[attr.aria-label]="ariaLabel || null"
|
|
730
|
+
[attr.aria-busy]="loading ? 'true' : null"
|
|
731
|
+
(click)="handleClick($event)"
|
|
732
|
+
>
|
|
733
|
+
@if (loading) {
|
|
734
|
+
<span class="td-button__spinner" aria-hidden="true"></span>
|
|
735
|
+
} @else if (icon && iconPosition === 'start') {
|
|
736
|
+
<td-icon [nombre]="icon" />
|
|
737
|
+
}
|
|
738
|
+
|
|
739
|
+
<span class="td-button__content"><ng-content /></span>
|
|
740
|
+
|
|
741
|
+
@if (!loading && icon && iconPosition === 'end') {
|
|
742
|
+
<td-icon [nombre]="icon" />
|
|
743
|
+
}
|
|
744
|
+
</button>
|
|
745
|
+
`, isInline: true, styles: [":host{display:inline-block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
746
|
+
}
|
|
747
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdButton, decorators: [{
|
|
748
|
+
type: Component,
|
|
749
|
+
args: [{ selector: 'td-button', imports: [TdIcon], template: `
|
|
750
|
+
<button
|
|
751
|
+
class="td-button"
|
|
752
|
+
[class]="'td-button td-button--' + variant + ' td-button--' + tone + ' td-button--' + size"
|
|
753
|
+
[class.td-button--block]="block"
|
|
754
|
+
[class.td-button--loading]="loading"
|
|
755
|
+
[type]="type"
|
|
756
|
+
[disabled]="disabled || loading"
|
|
757
|
+
[attr.aria-label]="ariaLabel || null"
|
|
758
|
+
[attr.aria-busy]="loading ? 'true' : null"
|
|
759
|
+
(click)="handleClick($event)"
|
|
760
|
+
>
|
|
761
|
+
@if (loading) {
|
|
762
|
+
<span class="td-button__spinner" aria-hidden="true"></span>
|
|
763
|
+
} @else if (icon && iconPosition === 'start') {
|
|
764
|
+
<td-icon [nombre]="icon" />
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
<span class="td-button__content"><ng-content /></span>
|
|
768
|
+
|
|
769
|
+
@if (!loading && icon && iconPosition === 'end') {
|
|
770
|
+
<td-icon [nombre]="icon" />
|
|
771
|
+
}
|
|
772
|
+
</button>
|
|
773
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
774
|
+
}], propDecorators: { variant: [{
|
|
775
|
+
type: Input
|
|
776
|
+
}], tone: [{
|
|
777
|
+
type: Input
|
|
778
|
+
}], size: [{
|
|
779
|
+
type: Input
|
|
780
|
+
}], type: [{
|
|
781
|
+
type: Input
|
|
782
|
+
}], icon: [{
|
|
783
|
+
type: Input
|
|
784
|
+
}], iconPosition: [{
|
|
785
|
+
type: Input
|
|
786
|
+
}], disabled: [{
|
|
787
|
+
type: Input
|
|
788
|
+
}], loading: [{
|
|
789
|
+
type: Input
|
|
790
|
+
}], block: [{
|
|
791
|
+
type: Input
|
|
792
|
+
}], ariaLabel: [{
|
|
793
|
+
type: Input,
|
|
794
|
+
args: [{ alias: 'aria-label' }]
|
|
795
|
+
}], pressed: [{
|
|
796
|
+
type: Output
|
|
797
|
+
}] } });
|
|
798
|
+
|
|
799
|
+
/**
|
|
800
|
+
* Puente reutilizable entre Signal Forms y ControlValueAccessor.
|
|
801
|
+
*
|
|
802
|
+
* Los inputs del contrato se declaran en cada componente porque el compilador
|
|
803
|
+
* de Signal Forms de Angular 21 necesita encontrarlos directamente allí.
|
|
804
|
+
*/
|
|
805
|
+
function createTdFormControlBridge() {
|
|
806
|
+
const injector = inject(Injector);
|
|
807
|
+
const cdr = inject(ChangeDetectorRef);
|
|
808
|
+
const cvaDisabled = signal(false, ...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
809
|
+
let onCvaTouched = () => undefined;
|
|
810
|
+
const usesSignalForms = () => !!injector.get(FORM_FIELD, null, { self: true, optional: true });
|
|
811
|
+
return {
|
|
812
|
+
get usesSignalForms() {
|
|
813
|
+
return usesSignalForms();
|
|
814
|
+
},
|
|
815
|
+
isDisabled(fieldDisabled) {
|
|
816
|
+
return usesSignalForms() ? fieldDisabled : fieldDisabled || cvaDisabled();
|
|
817
|
+
},
|
|
818
|
+
registerOnTouched(fn) {
|
|
819
|
+
onCvaTouched = fn;
|
|
820
|
+
},
|
|
821
|
+
setDisabledState(disabled) {
|
|
822
|
+
if (!usesSignalForms())
|
|
823
|
+
cvaDisabled.set(disabled);
|
|
824
|
+
cdr.markForCheck();
|
|
825
|
+
},
|
|
826
|
+
markTouched(touched, touch) {
|
|
827
|
+
// Angular prioriza el CVA cuando el control también publica NG_VALUE_ACCESSOR,
|
|
828
|
+
// incluso si está enlazado mediante [formField]. Mantener esta llamada permite
|
|
829
|
+
// que Signal Forms marque el field como touched sin perder compatibilidad clásica.
|
|
830
|
+
onCvaTouched();
|
|
831
|
+
touched.set(true);
|
|
832
|
+
touch.emit();
|
|
833
|
+
},
|
|
834
|
+
};
|
|
835
|
+
}
|
|
836
|
+
|
|
741
837
|
let checkboxSequence = 0;
|
|
742
838
|
class TdCheckbox {
|
|
743
839
|
cdr = inject(ChangeDetectorRef);
|
|
@@ -865,7 +961,7 @@ class TdCheckbox {
|
|
|
865
961
|
{{ displayError() || hint() }}
|
|
866
962
|
</p>
|
|
867
963
|
}
|
|
868
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: #fff;--td-checkbox-border: #cfd5e1;--td-checkbox-text: #263147;--td-checkbox-muted: #748096;display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: #19191f;--td-checkbox-border: #555563;--td-checkbox-text: #ededf0;--td-checkbox-muted: #a1a1aa;color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius:.38rem;color:#fff;background:var(--td-checkbox-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-checkbox:hover:not(.td-checkbox--disabled):not(.td-checkbox--readonly) .td-checkbox__box{border-color
|
|
964
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: var(--td-color-surface, #fff);--td-checkbox-border: var(--td-color-border-strong, #cfd5e1);--td-checkbox-text: var(--td-color-text, #263147);--td-checkbox-muted: var(--td-color-text-muted, #748096);display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: var(--td-color-surface, #19191f);--td-checkbox-border: var(--td-color-border-strong, #555563);--td-checkbox-text: var(--td-color-text, #ededf0);--td-checkbox-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius:.38rem;color:#fff;background:var(--td-checkbox-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-checkbox:hover:not(.td-checkbox--disabled):not(.td-checkbox--readonly) .td-checkbox__box{border-color:var(--td-color-primary, #5746d8)}.td-checkbox--checked .td-checkbox__box{border-color:var(--td-color-primary, #5746d8);background:var(--td-color-primary, #5746d8)}input:focus-visible+.td-checkbox__box{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .16))}input:active+.td-checkbox__box{transform:scale(.94)}.td-checkbox--error .td-checkbox__box{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-checkbox--disabled{opacity:.56;cursor:not-allowed}.td-checkbox--readonly{cursor:default}.td-checkbox__content{display:grid;min-width:0;gap:.15rem}.td-checkbox__label{font-size:.78rem;font-weight:700;line-height:1.35}.td-checkbox__description{color:var(--td-checkbox-muted);font-size:.68rem;line-height:1.4}.td-checkbox__message{margin:.35rem 0 0 1.97rem;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-checkbox__message--error{color:var(--td-color-danger, #c43636)}.td-checkbox--dark+.td-checkbox__message{color:#a1a1aa}.td-checkbox--dark+.td-checkbox__message--error{color:#f28b8b}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
869
965
|
}
|
|
870
966
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdCheckbox, decorators: [{
|
|
871
967
|
type: Component,
|
|
@@ -927,7 +1023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
927
1023
|
], host: {
|
|
928
1024
|
'[hidden]': 'hidden()',
|
|
929
1025
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
930
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: #fff;--td-checkbox-border: #cfd5e1;--td-checkbox-text: #263147;--td-checkbox-muted: #748096;display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: #19191f;--td-checkbox-border: #555563;--td-checkbox-text: #ededf0;--td-checkbox-muted: #a1a1aa;color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius:.38rem;color:#fff;background:var(--td-checkbox-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-checkbox:hover:not(.td-checkbox--disabled):not(.td-checkbox--readonly) .td-checkbox__box{border-color
|
|
1026
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: var(--td-color-surface, #fff);--td-checkbox-border: var(--td-color-border-strong, #cfd5e1);--td-checkbox-text: var(--td-color-text, #263147);--td-checkbox-muted: var(--td-color-text-muted, #748096);display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: var(--td-color-surface, #19191f);--td-checkbox-border: var(--td-color-border-strong, #555563);--td-checkbox-text: var(--td-color-text, #ededf0);--td-checkbox-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius:.38rem;color:#fff;background:var(--td-checkbox-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-checkbox:hover:not(.td-checkbox--disabled):not(.td-checkbox--readonly) .td-checkbox__box{border-color:var(--td-color-primary, #5746d8)}.td-checkbox--checked .td-checkbox__box{border-color:var(--td-color-primary, #5746d8);background:var(--td-color-primary, #5746d8)}input:focus-visible+.td-checkbox__box{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .16))}input:active+.td-checkbox__box{transform:scale(.94)}.td-checkbox--error .td-checkbox__box{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-checkbox--disabled{opacity:.56;cursor:not-allowed}.td-checkbox--readonly{cursor:default}.td-checkbox__content{display:grid;min-width:0;gap:.15rem}.td-checkbox__label{font-size:.78rem;font-weight:700;line-height:1.35}.td-checkbox__description{color:var(--td-checkbox-muted);font-size:.68rem;line-height:1.4}.td-checkbox__message{margin:.35rem 0 0 1.97rem;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-checkbox__message--error{color:var(--td-color-danger, #c43636)}.td-checkbox--dark+.td-checkbox__message{color:#a1a1aa}.td-checkbox--dark+.td-checkbox__message--error{color:#f28b8b}\n"] }]
|
|
931
1027
|
}], propDecorators: { nativeInput: [{
|
|
932
1028
|
type: ViewChild,
|
|
933
1029
|
args: ['nativeInput']
|
|
@@ -1045,11 +1141,11 @@ class TdDataTable {
|
|
|
1045
1141
|
}
|
|
1046
1142
|
trackFila = (_indice, fila) => fila[this.campoId] ?? fila;
|
|
1047
1143
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1048
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div\n class=\"td-tabla__encabezado\"\n role=\"row\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scrolledIndexChange)=\"alCambiarIndice()\"\n >\n <div\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1144
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div\n class=\"td-tabla__encabezado\"\n role=\"row\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scrolledIndexChange)=\"alCambiarIndice()\"\n >\n <div\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:#fff;background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:#fff;background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:#fff;background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1049
1145
|
}
|
|
1050
1146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, decorators: [{
|
|
1051
1147
|
type: Component,
|
|
1052
|
-
args: [{ selector: 'td-data-table', imports: [FormsModule, ScrollingModule, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div\n class=\"td-tabla__encabezado\"\n role=\"row\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scrolledIndexChange)=\"alCambiarIndice()\"\n >\n <div\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: #fff;--fondo-suave: #f8fafc;--borde: #e4e8f0;--texto: #263147;--suave: #748096;--hover: #f7f8fc;--acento: #5746d8;color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: #15151b;--fondo-suave: #1b1b22;--borde: #2d2d36;--texto: #ededf0;--suave: #9393a0;--hover: #202028;--acento: #a89cf7}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833;font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}.td-tabla__boton--exito{color:#fff;background:#168447}.td-tabla__boton--advertencia{color:#fff;background:#b66d05}.td-tabla__boton--peligro{color:#fff;background:#d33f3f}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:#4f46e5;background:#eeecff}.td-tabla__chip--exito{color:#13713a;background:#dff7e8}.td-tabla__chip--advertencia{color:#9a5a05;background:#fff0cf}.td-tabla__chip--peligro{color:#b53434;background:#fee5e5}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:#168447}.td-tabla__accion--peligro{color:#dc3e3e}.td-tabla__accion--advertencia{color:#b66d05}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"] }]
|
|
1148
|
+
args: [{ selector: 'td-data-table', imports: [FormsModule, ScrollingModule, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div\n class=\"td-tabla__encabezado\"\n role=\"row\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scrolledIndexChange)=\"alCambiarIndice()\"\n >\n <div\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:#fff;background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:#fff;background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:#fff;background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"] }]
|
|
1053
1149
|
}], propDecorators: { viewport: [{
|
|
1054
1150
|
type: ViewChild,
|
|
1055
1151
|
args: [CdkVirtualScrollViewport]
|
|
@@ -1637,7 +1733,7 @@ class TdDatePicker {
|
|
|
1637
1733
|
</footer>
|
|
1638
1734
|
</section>
|
|
1639
1735
|
</ng-template>
|
|
1640
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-date-picker{--td-date-bg: #fff;--td-date-border: #dfe3eb;--td-date-text: #263147;--td-date-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius:.78rem;background:var(--td-date-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-date-picker--dark{--td-date-bg: #19191f;--td-date-border: #34343e;--td-date-text: #ededf0;--td-date-muted: #a1a1aa}.td-date-picker:hover:not(.td-date-picker--disabled){border-color
|
|
1736
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-date-picker{--td-date-bg: var(--td-color-surface, #fff);--td-date-border: var(--td-color-border, #dfe3eb);--td-date-text: var(--td-color-text, #263147);--td-date-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius:.78rem;background:var(--td-date-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-date-picker--dark{--td-date-bg: var(--td-color-surface, #19191f);--td-date-border: var(--td-color-border, #34343e);--td-date-text: var(--td-color-text, #ededf0);--td-date-muted: var(--td-color-text-muted, #a1a1aa)}.td-date-picker:hover:not(.td-date-picker--disabled){border-color:var(--td-color-primary-hover, #8d80e8)}.td-date-picker--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-date-picker--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-date-picker--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-date-picker>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;padding:0 .35rem;color:var(--td-date-muted);background:var(--td-date-bg);font-size:.65rem;font-weight:750;line-height:1}.td-date-picker--open>label{color:var(--td-color-primary, #5746d8)}.td-date-picker--error>label{color:var(--td-color-danger, #d33f3f)}.td-date-picker__trigger{display:flex;width:100%;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-date-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-date-picker__trigger>span:not(.td-date-picker__clear){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-date-picker__placeholder{color:color-mix(in srgb,var(--td-date-muted) 72%,transparent)}.td-date-picker__trigger>td-icon{color:var(--td-date-muted)}.td-date-picker__chevron{transition:transform .14s ease}.td-date-picker__chevron--open{transform:rotate(180deg)}.td-date-picker__clear{display:grid;width:1.8rem;height:1.8rem;flex:0 0 auto;place-items:center;border-radius:.45rem;color:var(--td-date-muted)}.td-date-picker__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-date-picker__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem}.td-date-picker__message--error{color:var(--td-color-danger, #c43636)}.td-calendar{width:min(21rem,100vw - 1rem);overflow:hidden;border:1px solid var(--td-color-border, #e1e5ee);border-radius:1rem;padding:.8rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 22px 55px rgba(15, 23, 42, .2));font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-calendar-in .14s ease-out}.td-calendar--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-calendar__header{display:grid;grid-template-columns:2.35rem 1fr 2.35rem;align-items:center;gap:.35rem}.td-calendar__header button,.td-calendar__footer button{border:0;color:inherit;background:transparent;cursor:pointer}.td-calendar__header button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.65rem}.td-calendar__header .td-calendar__period{display:inline-flex;width:auto;min-width:0;height:2.35rem;align-items:center;justify-content:center;gap:.35rem;padding:0 .65rem;font-size:.82rem;font-weight:800}.td-calendar__header button:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-calendar--dark .td-calendar__header button:hover{background:var(--td-color-primary-soft, #2b293d)}.td-calendar__range-summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.55rem;margin:.65rem 0 .35rem;border-radius:.72rem;padding:.55rem .65rem;background:var(--td-color-surface-soft, #f7f7fb)}.td-calendar--dark .td-calendar__range-summary{background:var(--td-color-surface-muted, #292931)}.td-calendar__range-summary span{min-width:0}.td-calendar__range-summary span:last-child{text-align:right}.td-calendar__range-summary small,.td-calendar__range-summary strong{display:block}.td-calendar__range-summary small{color:var(--td-color-text-muted, #748096);font-size:.58rem}.td-calendar__range-summary strong{overflow:hidden;margin-top:.12rem;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.td-calendar__weekdays,.td-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.td-calendar__weekdays{margin-top:.55rem}.td-calendar__weekdays span{padding:.35rem 0;color:var(--td-color-text-subtle, #8791a4);font-size:.59rem;font-weight:800;text-align:center}.td-calendar__day{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:0;border-radius:.6rem;color:inherit;background:transparent;font:650 .7rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__day:hover:not(:disabled){color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0eeff)}.td-calendar__day--outside{color:#b4bac6}.td-calendar__day--today{box-shadow:inset 0 0 0 1px var(--td-color-primary-hover, #8d80e8)}.td-calendar__day--range{border-radius:0;color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #efedff)}.td-calendar__day--selected,.td-calendar__day--range-start,.td-calendar__day--range-end{border-radius:.6rem;color:#fff;background:var(--td-color-primary, #5746d8);box-shadow:var(--td-shadow-sm, 0 5px 12px rgba(87, 70, 216, .24))}.td-calendar__day:disabled{opacity:.3;cursor:not-allowed}.td-calendar__selector-grid{display:grid;min-height:15.75rem;align-content:center;gap:.45rem;padding:.75rem .15rem}.td-calendar__selector-grid--months,.td-calendar__selector-grid--years{grid-template-columns:repeat(3,minmax(0,1fr))}.td-calendar__selector-grid button{min-height:3.15rem;border:0;border-radius:.7rem;color:inherit;background:transparent;font:700 .72rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__selector-grid button:hover:not(:disabled){color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0eeff)}.td-calendar--dark .td-calendar__selector-grid button:hover:not(:disabled){color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #2b293d)}.td-calendar__selector-grid button:disabled{opacity:.28;cursor:not-allowed}.td-calendar__selector--active{color:#fff!important;background:var(--td-color-primary, #5746d8)!important;box-shadow:var(--td-shadow-sm, 0 5px 12px rgba(87, 70, 216, .22))}.td-calendar__selector--today:not(.td-calendar__selector--active){box-shadow:inset 0 0 0 1px var(--td-color-primary-hover, #8d80e8)}.td-calendar__footer{display:flex;justify-content:space-between;margin-top:.55rem;border-top:1px solid var(--td-color-border, #e6e9f0);padding-top:.55rem}.td-calendar--dark .td-calendar__footer{border-color:var(--td-color-border, #34343e)}.td-calendar__text-action{border-radius:.5rem!important;padding:.45rem .6rem;color:var(--td-color-primary, #5746d8)!important;font-size:.68rem;font-weight:750}.td-calendar__text-action:hover{background:var(--td-color-primary-soft, #f2f0ff)!important}@keyframes td-calendar-in{0%{opacity:0;transform:translateY(-.25rem) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.td-calendar{width:calc(100vw - 1rem);border-radius:.9rem}}@media(prefers-reduced-motion:reduce){.td-calendar{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1641
1737
|
}
|
|
1642
1738
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDatePicker, decorators: [{
|
|
1643
1739
|
type: Component,
|
|
@@ -1819,7 +1915,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1819
1915
|
], host: {
|
|
1820
1916
|
'[hidden]': 'hidden()',
|
|
1821
1917
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
1822
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-date-picker{--td-date-bg: #fff;--td-date-border: #dfe3eb;--td-date-text: #263147;--td-date-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius:.78rem;background:var(--td-date-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-date-picker--dark{--td-date-bg: #19191f;--td-date-border: #34343e;--td-date-text: #ededf0;--td-date-muted: #a1a1aa}.td-date-picker:hover:not(.td-date-picker--disabled){border-color
|
|
1918
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-date-picker{--td-date-bg: var(--td-color-surface, #fff);--td-date-border: var(--td-color-border, #dfe3eb);--td-date-text: var(--td-color-text, #263147);--td-date-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius:.78rem;background:var(--td-date-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-date-picker--dark{--td-date-bg: var(--td-color-surface, #19191f);--td-date-border: var(--td-color-border, #34343e);--td-date-text: var(--td-color-text, #ededf0);--td-date-muted: var(--td-color-text-muted, #a1a1aa)}.td-date-picker:hover:not(.td-date-picker--disabled){border-color:var(--td-color-primary-hover, #8d80e8)}.td-date-picker--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-date-picker--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-date-picker--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-date-picker>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;padding:0 .35rem;color:var(--td-date-muted);background:var(--td-date-bg);font-size:.65rem;font-weight:750;line-height:1}.td-date-picker--open>label{color:var(--td-color-primary, #5746d8)}.td-date-picker--error>label{color:var(--td-color-danger, #d33f3f)}.td-date-picker__trigger{display:flex;width:100%;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-date-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-date-picker__trigger>span:not(.td-date-picker__clear){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-date-picker__placeholder{color:color-mix(in srgb,var(--td-date-muted) 72%,transparent)}.td-date-picker__trigger>td-icon{color:var(--td-date-muted)}.td-date-picker__chevron{transition:transform .14s ease}.td-date-picker__chevron--open{transform:rotate(180deg)}.td-date-picker__clear{display:grid;width:1.8rem;height:1.8rem;flex:0 0 auto;place-items:center;border-radius:.45rem;color:var(--td-date-muted)}.td-date-picker__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-date-picker__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem}.td-date-picker__message--error{color:var(--td-color-danger, #c43636)}.td-calendar{width:min(21rem,100vw - 1rem);overflow:hidden;border:1px solid var(--td-color-border, #e1e5ee);border-radius:1rem;padding:.8rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 22px 55px rgba(15, 23, 42, .2));font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-calendar-in .14s ease-out}.td-calendar--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-calendar__header{display:grid;grid-template-columns:2.35rem 1fr 2.35rem;align-items:center;gap:.35rem}.td-calendar__header button,.td-calendar__footer button{border:0;color:inherit;background:transparent;cursor:pointer}.td-calendar__header button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.65rem}.td-calendar__header .td-calendar__period{display:inline-flex;width:auto;min-width:0;height:2.35rem;align-items:center;justify-content:center;gap:.35rem;padding:0 .65rem;font-size:.82rem;font-weight:800}.td-calendar__header button:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-calendar--dark .td-calendar__header button:hover{background:var(--td-color-primary-soft, #2b293d)}.td-calendar__range-summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.55rem;margin:.65rem 0 .35rem;border-radius:.72rem;padding:.55rem .65rem;background:var(--td-color-surface-soft, #f7f7fb)}.td-calendar--dark .td-calendar__range-summary{background:var(--td-color-surface-muted, #292931)}.td-calendar__range-summary span{min-width:0}.td-calendar__range-summary span:last-child{text-align:right}.td-calendar__range-summary small,.td-calendar__range-summary strong{display:block}.td-calendar__range-summary small{color:var(--td-color-text-muted, #748096);font-size:.58rem}.td-calendar__range-summary strong{overflow:hidden;margin-top:.12rem;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.td-calendar__weekdays,.td-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.td-calendar__weekdays{margin-top:.55rem}.td-calendar__weekdays span{padding:.35rem 0;color:var(--td-color-text-subtle, #8791a4);font-size:.59rem;font-weight:800;text-align:center}.td-calendar__day{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:0;border-radius:.6rem;color:inherit;background:transparent;font:650 .7rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__day:hover:not(:disabled){color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0eeff)}.td-calendar__day--outside{color:#b4bac6}.td-calendar__day--today{box-shadow:inset 0 0 0 1px var(--td-color-primary-hover, #8d80e8)}.td-calendar__day--range{border-radius:0;color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #efedff)}.td-calendar__day--selected,.td-calendar__day--range-start,.td-calendar__day--range-end{border-radius:.6rem;color:#fff;background:var(--td-color-primary, #5746d8);box-shadow:var(--td-shadow-sm, 0 5px 12px rgba(87, 70, 216, .24))}.td-calendar__day:disabled{opacity:.3;cursor:not-allowed}.td-calendar__selector-grid{display:grid;min-height:15.75rem;align-content:center;gap:.45rem;padding:.75rem .15rem}.td-calendar__selector-grid--months,.td-calendar__selector-grid--years{grid-template-columns:repeat(3,minmax(0,1fr))}.td-calendar__selector-grid button{min-height:3.15rem;border:0;border-radius:.7rem;color:inherit;background:transparent;font:700 .72rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__selector-grid button:hover:not(:disabled){color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0eeff)}.td-calendar--dark .td-calendar__selector-grid button:hover:not(:disabled){color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #2b293d)}.td-calendar__selector-grid button:disabled{opacity:.28;cursor:not-allowed}.td-calendar__selector--active{color:#fff!important;background:var(--td-color-primary, #5746d8)!important;box-shadow:var(--td-shadow-sm, 0 5px 12px rgba(87, 70, 216, .22))}.td-calendar__selector--today:not(.td-calendar__selector--active){box-shadow:inset 0 0 0 1px var(--td-color-primary-hover, #8d80e8)}.td-calendar__footer{display:flex;justify-content:space-between;margin-top:.55rem;border-top:1px solid var(--td-color-border, #e6e9f0);padding-top:.55rem}.td-calendar--dark .td-calendar__footer{border-color:var(--td-color-border, #34343e)}.td-calendar__text-action{border-radius:.5rem!important;padding:.45rem .6rem;color:var(--td-color-primary, #5746d8)!important;font-size:.68rem;font-weight:750}.td-calendar__text-action:hover{background:var(--td-color-primary-soft, #f2f0ff)!important}@keyframes td-calendar-in{0%{opacity:0;transform:translateY(-.25rem) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.td-calendar{width:calc(100vw - 1rem);border-radius:.9rem}}@media(prefers-reduced-motion:reduce){.td-calendar{animation:none}}\n"] }]
|
|
1823
1919
|
}], propDecorators: { label: [{
|
|
1824
1920
|
type: Input
|
|
1825
1921
|
}], placeholder: [{
|
|
@@ -1914,7 +2010,7 @@ class TdDialogPanel {
|
|
|
1914
2010
|
<ng-container *ngComponentOutlet="payload.component" />
|
|
1915
2011
|
</div>
|
|
1916
2012
|
</section>
|
|
1917
|
-
`, isInline: true, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px #0f172a3d,0 8px 24px #0f172a1f;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: #fff;--td-dialog-footer: #fafbfc;--td-dialog-border: #e6e9f0;--td-dialog-text: #263147;--td-dialog-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:Inter,ui-sans-serif,system-ui,sans-serif}.td-dialog--oscuro{--td-dialog-surface: #19191f;--td-dialog-footer: #202028;--td-dialog-border: #303039;--td-dialog-text: #ededf0;--td-dialog-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__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:.75rem;color
|
|
2013
|
+
`, isInline: true, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px #0f172a3d,0 8px 24px #0f172a1f;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: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__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:.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:.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:1rem}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1918
2014
|
}
|
|
1919
2015
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPanel, decorators: [{
|
|
1920
2016
|
type: Component,
|
|
@@ -1963,7 +2059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1963
2059
|
<ng-container *ngComponentOutlet="payload.component" />
|
|
1964
2060
|
</div>
|
|
1965
2061
|
</section>
|
|
1966
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px #0f172a3d,0 8px 24px #0f172a1f;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: #fff;--td-dialog-footer: #fafbfc;--td-dialog-border: #e6e9f0;--td-dialog-text: #263147;--td-dialog-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:Inter,ui-sans-serif,system-ui,sans-serif}.td-dialog--oscuro{--td-dialog-surface: #19191f;--td-dialog-footer: #202028;--td-dialog-border: #303039;--td-dialog-text: #ededf0;--td-dialog-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__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:.75rem;color
|
|
2062
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px #0f172a3d,0 8px 24px #0f172a1f;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: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__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:.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:.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:1rem}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"] }]
|
|
1967
2063
|
}] });
|
|
1968
2064
|
|
|
1969
2065
|
class TdDialog {
|
|
@@ -2086,11 +2182,11 @@ class TdFooter {
|
|
|
2086
2182
|
compacto = false;
|
|
2087
2183
|
anio = new Date().getFullYear();
|
|
2088
2184
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2089
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdFooter, isStandalone: true, selector: "td-footer", inputs: { empresa: "empresa", texto: "texto", version: "version", oscuro: "oscuro", compacto: "compacto", anio: "anio" }, ngImport: i0, template: "<footer\n class=\"td-footer\"\n [class.td-footer--oscuro]=\"oscuro\"\n [class.td-footer--compacto]=\"compacto\"\n>\n <div class=\"td-footer__identidad\">\n <span>\u00A9 {{ anio }} {{ empresa }}</span>\n @if (texto) {\n <small>{{ texto }}</small>\n }\n </div>\n\n <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n <ng-content select=\"[tdFooterLinks]\" />\n </nav>\n\n <div class=\"td-footer__final\">\n <ng-content select=\"[tdFooterActions]\" />\n @if (version) {\n <span class=\"td-footer__version\">v{{ version }}</span>\n }\n </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: #fff;--td-footer-borde: #e2e8f0;--td-footer-texto: #475569;--td-footer-suave: #94a3b8;display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem}.td-footer--oscuro{--td-footer-fondo: #111116;--td-footer-borde: #29292f;--td-footer-texto: #d4d4d8;--td-footer-suave: #71717a}.td-footer--compacto{min-height:3.25rem;padding-block:.65rem}.td-footer__identidad{display:flex;min-width:0;flex-wrap:wrap;gap:.3rem .75rem;align-items:center}.td-footer__identidad span{font-weight:700}.td-footer__identidad small{color:var(--td-footer-suave);font-size:inherit}.td-footer__enlaces{display:flex;align-items:center;justify-content:center;gap:1rem}.td-footer__final{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}.td-footer__version{border:1px solid var(--td-footer-borde);border-radius:999px;padding:.22rem .55rem;color:var(--td-footer-suave);font:700 .65rem/1 ui-monospace,monospace}@media(max-width:720px){.td-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.td-footer__identidad,.td-footer__final{justify-content:center}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2185
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdFooter, isStandalone: true, selector: "td-footer", inputs: { empresa: "empresa", texto: "texto", version: "version", oscuro: "oscuro", compacto: "compacto", anio: "anio" }, ngImport: i0, template: "<footer\n class=\"td-footer\"\n [class.td-footer--oscuro]=\"oscuro\"\n [class.td-footer--compacto]=\"compacto\"\n>\n <div class=\"td-footer__identidad\">\n <span>\u00A9 {{ anio }} {{ empresa }}</span>\n @if (texto) {\n <small>{{ texto }}</small>\n }\n </div>\n\n <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n <ng-content select=\"[tdFooterLinks]\" />\n </nav>\n\n <div class=\"td-footer__final\">\n <ng-content select=\"[tdFooterActions]\" />\n @if (version) {\n <span class=\"td-footer__version\">v{{ version }}</span>\n }\n </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: var(--td-color-surface, #fff);--td-footer-borde: var(--td-color-border, #e2e8f0);--td-footer-texto: var(--td-color-text-muted, #475569);--td-footer-suave: var(--td-color-text-subtle, #94a3b8);display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem}.td-footer--oscuro{--td-footer-fondo: var(--td-color-surface, #111116);--td-footer-borde: var(--td-color-border, #29292f);--td-footer-texto: var(--td-color-text, #d4d4d8);--td-footer-suave: var(--td-color-text-muted, #71717a)}.td-footer--compacto{min-height:3.25rem;padding-block:.65rem}.td-footer__identidad{display:flex;min-width:0;flex-wrap:wrap;gap:.3rem .75rem;align-items:center}.td-footer__identidad span{font-weight:700}.td-footer__identidad small{color:var(--td-footer-suave);font-size:inherit}.td-footer__enlaces{display:flex;align-items:center;justify-content:center;gap:1rem}.td-footer__final{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}.td-footer__version{border:1px solid var(--td-footer-borde);border-radius:999px;padding:.22rem .55rem;color:var(--td-footer-suave);font:700 .65rem/1 ui-monospace,monospace}@media(max-width:720px){.td-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.td-footer__identidad,.td-footer__final{justify-content:center}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2090
2186
|
}
|
|
2091
2187
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdFooter, decorators: [{
|
|
2092
2188
|
type: Component,
|
|
2093
|
-
args: [{ selector: 'td-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer\n class=\"td-footer\"\n [class.td-footer--oscuro]=\"oscuro\"\n [class.td-footer--compacto]=\"compacto\"\n>\n <div class=\"td-footer__identidad\">\n <span>\u00A9 {{ anio }} {{ empresa }}</span>\n @if (texto) {\n <small>{{ texto }}</small>\n }\n </div>\n\n <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n <ng-content select=\"[tdFooterLinks]\" />\n </nav>\n\n <div class=\"td-footer__final\">\n <ng-content select=\"[tdFooterActions]\" />\n @if (version) {\n <span class=\"td-footer__version\">v{{ version }}</span>\n }\n </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: #fff;--td-footer-borde: #e2e8f0;--td-footer-texto: #475569;--td-footer-suave: #94a3b8;display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem}.td-footer--oscuro{--td-footer-fondo: #111116;--td-footer-borde: #29292f;--td-footer-texto: #d4d4d8;--td-footer-suave: #71717a}.td-footer--compacto{min-height:3.25rem;padding-block:.65rem}.td-footer__identidad{display:flex;min-width:0;flex-wrap:wrap;gap:.3rem .75rem;align-items:center}.td-footer__identidad span{font-weight:700}.td-footer__identidad small{color:var(--td-footer-suave);font-size:inherit}.td-footer__enlaces{display:flex;align-items:center;justify-content:center;gap:1rem}.td-footer__final{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}.td-footer__version{border:1px solid var(--td-footer-borde);border-radius:999px;padding:.22rem .55rem;color:var(--td-footer-suave);font:700 .65rem/1 ui-monospace,monospace}@media(max-width:720px){.td-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.td-footer__identidad,.td-footer__final{justify-content:center}}\n"] }]
|
|
2189
|
+
args: [{ selector: 'td-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer\n class=\"td-footer\"\n [class.td-footer--oscuro]=\"oscuro\"\n [class.td-footer--compacto]=\"compacto\"\n>\n <div class=\"td-footer__identidad\">\n <span>\u00A9 {{ anio }} {{ empresa }}</span>\n @if (texto) {\n <small>{{ texto }}</small>\n }\n </div>\n\n <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n <ng-content select=\"[tdFooterLinks]\" />\n </nav>\n\n <div class=\"td-footer__final\">\n <ng-content select=\"[tdFooterActions]\" />\n @if (version) {\n <span class=\"td-footer__version\">v{{ version }}</span>\n }\n </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: var(--td-color-surface, #fff);--td-footer-borde: var(--td-color-border, #e2e8f0);--td-footer-texto: var(--td-color-text-muted, #475569);--td-footer-suave: var(--td-color-text-subtle, #94a3b8);display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:.75rem}.td-footer--oscuro{--td-footer-fondo: var(--td-color-surface, #111116);--td-footer-borde: var(--td-color-border, #29292f);--td-footer-texto: var(--td-color-text, #d4d4d8);--td-footer-suave: var(--td-color-text-muted, #71717a)}.td-footer--compacto{min-height:3.25rem;padding-block:.65rem}.td-footer__identidad{display:flex;min-width:0;flex-wrap:wrap;gap:.3rem .75rem;align-items:center}.td-footer__identidad span{font-weight:700}.td-footer__identidad small{color:var(--td-footer-suave);font-size:inherit}.td-footer__enlaces{display:flex;align-items:center;justify-content:center;gap:1rem}.td-footer__final{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}.td-footer__version{border:1px solid var(--td-footer-borde);border-radius:999px;padding:.22rem .55rem;color:var(--td-footer-suave);font:700 .65rem/1 ui-monospace,monospace}@media(max-width:720px){.td-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.td-footer__identidad,.td-footer__final{justify-content:center}}\n"] }]
|
|
2094
2190
|
}], propDecorators: { empresa: [{
|
|
2095
2191
|
type: Input
|
|
2096
2192
|
}], texto: [{
|
|
@@ -2154,11 +2250,11 @@ class TdHeader {
|
|
|
2154
2250
|
this.panelPerfilAbierto = false;
|
|
2155
2251
|
}
|
|
2156
2252
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2157
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdHeader, isStandalone: true, selector: "td-header", inputs: { menuAbierto: "menuAbierto", mostrarMenu: "mostrarMenu", usuario: "usuario", cargo: "cargo", avatarUrl: "avatarUrl", notificaciones: "notificaciones", oscuro: "oscuro", fijo: "fijo" }, outputs: { menuToggle: "menuToggle", notificacionSeleccionada: "notificacionSeleccionada", verTodasNotificaciones: "verTodasNotificaciones", accionPerfil: "accionPerfil" }, host: { listeners: { "document:keydown.escape": "cerrarConEscape()" } }, ngImport: i0, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: rgba(255, 255, 255, .92);--borde: #e5e9f1;--texto: #172036;--suave: #7b8498;--hover: #f3f5fa;--acento: #5746d8;position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:0 8px 30px #232a440d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: rgba(18, 18, 24, .94);--borde: #2b2c35;--texto: #f5f5f6;--suave: #92929f;--hover: #272730;--acento: #a89cf7}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:.75rem;padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:999px;padding:0 .15rem;color:#fff;background:#ef4444;font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:.8rem;padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:.7rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:1rem;color:var(--texto);background:var(--fondo);box-shadow:0 22px 55px #0f172a2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:#dc2626}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2253
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdHeader, isStandalone: true, selector: "td-header", inputs: { menuAbierto: "menuAbierto", mostrarMenu: "mostrarMenu", usuario: "usuario", cargo: "cargo", avatarUrl: "avatarUrl", notificaciones: "notificaciones", oscuro: "oscuro", fijo: "fijo" }, outputs: { menuToggle: "menuToggle", notificacionSeleccionada: "notificacionSeleccionada", verTodasNotificaciones: "verTodasNotificaciones", accionPerfil: "accionPerfil" }, host: { listeners: { "document:keydown.escape": "cerrarConEscape()" } }, ngImport: i0, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:0 8px 30px #232a440d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:.75rem;padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:999px;padding:0 .15rem;color:#fff;background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:.8rem;padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:.7rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:1rem;color:var(--texto);background:var(--fondo);box-shadow:0 22px 55px #0f172a2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2158
2254
|
}
|
|
2159
2255
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdHeader, decorators: [{
|
|
2160
2256
|
type: Component,
|
|
2161
|
-
args: [{ selector: 'td-header', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: rgba(255, 255, 255, .92);--borde: #e5e9f1;--texto: #172036;--suave: #7b8498;--hover: #f3f5fa;--acento: #5746d8;position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:0 8px 30px #232a440d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: rgba(18, 18, 24, .94);--borde: #2b2c35;--texto: #f5f5f6;--suave: #92929f;--hover: #272730;--acento: #a89cf7}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:.75rem;padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:999px;padding:0 .15rem;color:#fff;background:#ef4444;font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:.8rem;padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:.7rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:1rem;color:var(--texto);background:var(--fondo);box-shadow:0 22px 55px #0f172a2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:#dc2626}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"] }]
|
|
2257
|
+
args: [{ selector: 'td-header', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:0 8px 30px #232a440d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:.75rem;padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:999px;padding:0 .15rem;color:#fff;background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:.8rem;padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:.7rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:1rem;color:var(--texto);background:var(--fondo);box-shadow:0 22px 55px #0f172a2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"] }]
|
|
2162
2258
|
}], propDecorators: { menuAbierto: [{
|
|
2163
2259
|
type: Input
|
|
2164
2260
|
}], mostrarMenu: [{
|
|
@@ -2221,6 +2317,11 @@ class TdInput {
|
|
|
2221
2317
|
dark = false;
|
|
2222
2318
|
showCounter = input(true, ...(ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []));
|
|
2223
2319
|
emptyValue = 'auto';
|
|
2320
|
+
sanitize = 'none';
|
|
2321
|
+
sanitizeValue = null;
|
|
2322
|
+
mask = 'none';
|
|
2323
|
+
integerDigits = null;
|
|
2324
|
+
decimalDigits = null;
|
|
2224
2325
|
minValue = input(undefined, { ...(ngDevMode ? { debugName: "minValue" } : /* istanbul ignore next */ {}), alias: 'min' });
|
|
2225
2326
|
maxValue = input(undefined, { ...(ngDevMode ? { debugName: "maxValue" } : /* istanbul ignore next */ {}), alias: 'max' });
|
|
2226
2327
|
minLength = input(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
|
|
@@ -2256,6 +2357,18 @@ class TdInput {
|
|
|
2256
2357
|
return patterns[0].source;
|
|
2257
2358
|
return patterns.map((item) => `(?=${item.source})`).join('') + '.*';
|
|
2258
2359
|
}, ...(ngDevMode ? [{ debugName: "resolvedPattern" }] : /* istanbul ignore next */ []));
|
|
2360
|
+
resolvedInputMode = computed(() => {
|
|
2361
|
+
if (this.mask === 'time' || this.mask === 'time-seconds')
|
|
2362
|
+
return 'numeric';
|
|
2363
|
+
if (this.isDecimalMask())
|
|
2364
|
+
return 'decimal';
|
|
2365
|
+
const presets = this.sanitizePresets();
|
|
2366
|
+
if (presets.includes('digits'))
|
|
2367
|
+
return 'numeric';
|
|
2368
|
+
if (presets.includes('decimal'))
|
|
2369
|
+
return 'decimal';
|
|
2370
|
+
return null;
|
|
2371
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedInputMode" }] : /* istanbul ignore next */ []));
|
|
2259
2372
|
focused = false;
|
|
2260
2373
|
passwordVisible = false;
|
|
2261
2374
|
get inputId() {
|
|
@@ -2279,7 +2392,7 @@ class TdInput {
|
|
|
2279
2392
|
this.value.set(value);
|
|
2280
2393
|
}
|
|
2281
2394
|
else {
|
|
2282
|
-
this.value.set(String(value));
|
|
2395
|
+
this.value.set(this.transformTextValue(String(value)));
|
|
2283
2396
|
}
|
|
2284
2397
|
this.cdr.markForCheck();
|
|
2285
2398
|
}
|
|
@@ -2297,21 +2410,26 @@ class TdInput {
|
|
|
2297
2410
|
}
|
|
2298
2411
|
handleInput(event) {
|
|
2299
2412
|
const inputElement = event.target;
|
|
2300
|
-
this.
|
|
2413
|
+
const transformedValue = this.transformTextValue(inputElement.value);
|
|
2414
|
+
if (inputElement.value !== transformedValue) {
|
|
2415
|
+
inputElement.value = transformedValue;
|
|
2416
|
+
}
|
|
2417
|
+
this.setValue(this.parseInputValue(transformedValue, inputElement));
|
|
2301
2418
|
}
|
|
2302
2419
|
handleBlur() {
|
|
2303
2420
|
this.focused = false;
|
|
2421
|
+
this.completeMaskOnBlur();
|
|
2304
2422
|
this.formBridge.markTouched(this.touched, this.touch);
|
|
2305
2423
|
}
|
|
2306
2424
|
clear() {
|
|
2307
2425
|
this.setValue(this.resolveEmptyValue());
|
|
2308
2426
|
}
|
|
2309
|
-
parseInputValue(inputElement) {
|
|
2310
|
-
if (!
|
|
2427
|
+
parseInputValue(value, inputElement) {
|
|
2428
|
+
if (!value) {
|
|
2311
2429
|
return this.resolveEmptyValue();
|
|
2312
2430
|
}
|
|
2313
2431
|
if (this.type !== 'number' || !this.formBridge.usesSignalForms) {
|
|
2314
|
-
return
|
|
2432
|
+
return value;
|
|
2315
2433
|
}
|
|
2316
2434
|
const numericValue = inputElement.valueAsNumber;
|
|
2317
2435
|
return Number.isNaN(numericValue) ? null : numericValue;
|
|
@@ -2325,12 +2443,178 @@ class TdInput {
|
|
|
2325
2443
|
return null;
|
|
2326
2444
|
return this.receivedNullValue ? null : '';
|
|
2327
2445
|
}
|
|
2446
|
+
transformTextValue(value) {
|
|
2447
|
+
if (!value)
|
|
2448
|
+
return value;
|
|
2449
|
+
const sanitized = this.applySanitize(value);
|
|
2450
|
+
return this.applyMask(sanitized);
|
|
2451
|
+
}
|
|
2452
|
+
applySanitize(value) {
|
|
2453
|
+
const customValue = this.sanitizeValue ? this.sanitizeValue(value) : value;
|
|
2454
|
+
return this.sanitizePresets().reduce((current, preset) => this.applySanitizePreset(current, preset), customValue);
|
|
2455
|
+
}
|
|
2456
|
+
sanitizePresets() {
|
|
2457
|
+
const sanitize = this.sanitize;
|
|
2458
|
+
return typeof sanitize === 'string' ? [sanitize] : [...sanitize];
|
|
2459
|
+
}
|
|
2460
|
+
applySanitizePreset(value, preset) {
|
|
2461
|
+
switch (preset) {
|
|
2462
|
+
case 'digits':
|
|
2463
|
+
return value.replace(/\D/g, '');
|
|
2464
|
+
case 'letters':
|
|
2465
|
+
return value.replace(/[^\p{L}\s]/gu, '');
|
|
2466
|
+
case 'alphanumeric':
|
|
2467
|
+
return value.replace(/[^\p{L}\p{N}]/gu, '');
|
|
2468
|
+
case 'decimal':
|
|
2469
|
+
return this.sanitizeDecimal(value);
|
|
2470
|
+
case 'uppercase':
|
|
2471
|
+
return value.toUpperCase();
|
|
2472
|
+
case 'lowercase':
|
|
2473
|
+
return value.toLowerCase();
|
|
2474
|
+
case 'trim':
|
|
2475
|
+
return value.trim();
|
|
2476
|
+
default:
|
|
2477
|
+
return value;
|
|
2478
|
+
}
|
|
2479
|
+
}
|
|
2480
|
+
sanitizeDecimal(value) {
|
|
2481
|
+
const normalized = value.replace(',', '.').replace(/[^\d.]/g, '');
|
|
2482
|
+
const [integerPart, ...decimalParts] = normalized.split('.');
|
|
2483
|
+
const integerValue = this.limitDigits(integerPart, this.integerDigits);
|
|
2484
|
+
if (!decimalParts.length)
|
|
2485
|
+
return integerValue;
|
|
2486
|
+
const decimalValue = this.limitDigits(decimalParts.join(''), this.decimalDigits);
|
|
2487
|
+
return decimalValue.length || normalized.endsWith('.')
|
|
2488
|
+
? `${integerValue}.${decimalValue}`
|
|
2489
|
+
: integerValue;
|
|
2490
|
+
}
|
|
2491
|
+
limitDigits(value, limit) {
|
|
2492
|
+
if (limit === null || limit === undefined || limit < 0)
|
|
2493
|
+
return value;
|
|
2494
|
+
return value.slice(0, limit);
|
|
2495
|
+
}
|
|
2496
|
+
applyMask(value) {
|
|
2497
|
+
if (this.mask === 'time')
|
|
2498
|
+
return this.maskTime(value);
|
|
2499
|
+
if (this.mask === 'time-seconds')
|
|
2500
|
+
return this.maskTimeSeconds(value);
|
|
2501
|
+
if (this.isDecimalMask())
|
|
2502
|
+
return this.maskDecimal(value);
|
|
2503
|
+
return value;
|
|
2504
|
+
}
|
|
2505
|
+
maskDecimal(value) {
|
|
2506
|
+
const config = this.resolveDecimalMaskConfig();
|
|
2507
|
+
const scale = config.decimalDigits;
|
|
2508
|
+
const integerLimit = config.integerDigits;
|
|
2509
|
+
const maxDigits = integerLimit && integerLimit > 0
|
|
2510
|
+
? integerLimit + scale
|
|
2511
|
+
: null;
|
|
2512
|
+
const digits = this.limitDigits(value.replace(/\D/g, '').replace(/^0+(?=\d)/, ''), maxDigits);
|
|
2513
|
+
if (!digits)
|
|
2514
|
+
return '';
|
|
2515
|
+
if (scale === 0)
|
|
2516
|
+
return this.limitDigits(digits, integerLimit);
|
|
2517
|
+
const padded = digits.padStart(scale + 1, '0');
|
|
2518
|
+
const splitIndex = padded.length - scale;
|
|
2519
|
+
const integerPart = this.limitDigits(padded.slice(0, splitIndex), integerLimit);
|
|
2520
|
+
const decimalPart = padded.slice(splitIndex);
|
|
2521
|
+
return `${integerPart || '0'}.${decimalPart}`;
|
|
2522
|
+
}
|
|
2523
|
+
isDecimalMask() {
|
|
2524
|
+
return this.mask === 'decimal' || this.mask.startsWith('decimal(');
|
|
2525
|
+
}
|
|
2526
|
+
resolveDecimalMaskConfig() {
|
|
2527
|
+
const parsed = this.parseDecimalMask();
|
|
2528
|
+
const integerDigits = this.integerDigits ?? parsed?.integerDigits ?? null;
|
|
2529
|
+
const decimalDigits = this.decimalDigits ?? parsed?.decimalDigits ?? 2;
|
|
2530
|
+
return {
|
|
2531
|
+
integerDigits: integerDigits !== null ? Math.max(0, Math.trunc(integerDigits)) : null,
|
|
2532
|
+
decimalDigits: Math.max(0, Math.trunc(decimalDigits)),
|
|
2533
|
+
};
|
|
2534
|
+
}
|
|
2535
|
+
parseDecimalMask() {
|
|
2536
|
+
if (!this.mask.startsWith('decimal('))
|
|
2537
|
+
return null;
|
|
2538
|
+
const match = /^decimal\((\d+)[,.](\d+)\)$/.exec(this.mask.trim());
|
|
2539
|
+
if (!match) {
|
|
2540
|
+
if (typeof ngDevMode === 'undefined' || ngDevMode) {
|
|
2541
|
+
console.warn(`[TdInput] Máscara decimal inválida: "${this.mask}". Usa decimal(enteros,decimales), por ejemplo decimal(10,2).`);
|
|
2542
|
+
}
|
|
2543
|
+
return null;
|
|
2544
|
+
}
|
|
2545
|
+
return {
|
|
2546
|
+
integerDigits: Number(match[1]),
|
|
2547
|
+
decimalDigits: Number(match[2]),
|
|
2548
|
+
};
|
|
2549
|
+
}
|
|
2550
|
+
maskTime(value) {
|
|
2551
|
+
const digits = value.replace(/\D/g, '').slice(0, 4);
|
|
2552
|
+
if (digits.length <= 2)
|
|
2553
|
+
return digits;
|
|
2554
|
+
return `${digits.slice(0, 2)}:${digits.slice(2)}`;
|
|
2555
|
+
}
|
|
2556
|
+
maskTimeSeconds(value) {
|
|
2557
|
+
const digits = value.replace(/\D/g, '').slice(0, 6);
|
|
2558
|
+
if (digits.length <= 2)
|
|
2559
|
+
return digits;
|
|
2560
|
+
if (digits.length <= 4)
|
|
2561
|
+
return `${digits.slice(0, 2)}:${digits.slice(2)}`;
|
|
2562
|
+
return `${digits.slice(0, 2)}:${digits.slice(2, 4)}:${digits.slice(4)}`;
|
|
2563
|
+
}
|
|
2564
|
+
completeMaskOnBlur() {
|
|
2565
|
+
if (this.mask !== 'time' && this.mask !== 'time-seconds')
|
|
2566
|
+
return;
|
|
2567
|
+
const currentValue = String(this.value() ?? '');
|
|
2568
|
+
if (!currentValue)
|
|
2569
|
+
return;
|
|
2570
|
+
const completedValue = this.mask === 'time'
|
|
2571
|
+
? this.completeTimeValue(currentValue)
|
|
2572
|
+
: this.completeTimeSecondsValue(currentValue);
|
|
2573
|
+
if (completedValue !== currentValue) {
|
|
2574
|
+
this.setValue(completedValue);
|
|
2575
|
+
if (this.nativeInput) {
|
|
2576
|
+
this.nativeInput.nativeElement.value = completedValue;
|
|
2577
|
+
}
|
|
2578
|
+
this.cdr.markForCheck();
|
|
2579
|
+
}
|
|
2580
|
+
}
|
|
2581
|
+
completeTimeValue(value) {
|
|
2582
|
+
const digits = value.replace(/\D/g, '').slice(0, 4);
|
|
2583
|
+
if (!digits)
|
|
2584
|
+
return '';
|
|
2585
|
+
const padded = digits.length === 1
|
|
2586
|
+
? `0${digits}00`
|
|
2587
|
+
: digits.padEnd(4, '0');
|
|
2588
|
+
const hour = this.clampNumber(Number(padded.slice(0, 2)), 0, 23);
|
|
2589
|
+
const minute = this.clampNumber(Number(padded.slice(2, 4)), 0, 59);
|
|
2590
|
+
return `${this.padTimePart(hour)}:${this.padTimePart(minute)}`;
|
|
2591
|
+
}
|
|
2592
|
+
completeTimeSecondsValue(value) {
|
|
2593
|
+
const digits = value.replace(/\D/g, '').slice(0, 6);
|
|
2594
|
+
if (!digits)
|
|
2595
|
+
return '';
|
|
2596
|
+
const padded = digits.length === 1
|
|
2597
|
+
? `0${digits}0000`
|
|
2598
|
+
: digits.padEnd(6, '0');
|
|
2599
|
+
const hour = this.clampNumber(Number(padded.slice(0, 2)), 0, 23);
|
|
2600
|
+
const minute = this.clampNumber(Number(padded.slice(2, 4)), 0, 59);
|
|
2601
|
+
const second = this.clampNumber(Number(padded.slice(4, 6)), 0, 59);
|
|
2602
|
+
return `${this.padTimePart(hour)}:${this.padTimePart(minute)}:${this.padTimePart(second)}`;
|
|
2603
|
+
}
|
|
2604
|
+
clampNumber(value, min, max) {
|
|
2605
|
+
if (Number.isNaN(value))
|
|
2606
|
+
return min;
|
|
2607
|
+
return Math.min(max, Math.max(min, value));
|
|
2608
|
+
}
|
|
2609
|
+
padTimePart(value) {
|
|
2610
|
+
return String(value).padStart(2, '0');
|
|
2611
|
+
}
|
|
2328
2612
|
setValue(value) {
|
|
2329
2613
|
this.value.set(value);
|
|
2330
2614
|
this.onChange(value);
|
|
2331
2615
|
}
|
|
2332
2616
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2333
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
2617
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, 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 }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: false, isRequired: false, transformFunction: null }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: false, isRequired: false, transformFunction: null }, sanitizeValue: { classPropertyName: "sanitizeValue", publicName: "sanitizeValue", isSignal: false, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: false, isRequired: false, transformFunction: null }, integerDigits: { classPropertyName: "integerDigits", publicName: "integerDigits", isSignal: false, isRequired: false, transformFunction: null }, decimalDigits: { classPropertyName: "decimalDigits", publicName: "decimalDigits", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
2334
2618
|
{
|
|
2335
2619
|
provide: NG_VALUE_ACCESSOR,
|
|
2336
2620
|
useExisting: forwardRef(() => TdInput),
|
|
@@ -2368,6 +2652,7 @@ class TdInput {
|
|
|
2368
2652
|
[attr.minlength]="resolvedMinLength()"
|
|
2369
2653
|
[attr.maxlength]="resolvedMaxLength()"
|
|
2370
2654
|
[attr.pattern]="resolvedPattern()"
|
|
2655
|
+
[attr.inputmode]="resolvedInputMode()"
|
|
2371
2656
|
[attr.aria-describedby]="descriptionId"
|
|
2372
2657
|
[attr.aria-invalid]="hasError()"
|
|
2373
2658
|
(input)="handleInput($event)"
|
|
@@ -2417,7 +2702,7 @@ class TdInput {
|
|
|
2417
2702
|
}
|
|
2418
2703
|
</div>
|
|
2419
2704
|
}
|
|
2420
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb
|
|
2705
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-muted, #748096);position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: var(--td-color-surface, #19191f);--td-input-border: var(--td-color-border, #34343e);--td-input-text: var(--td-color-text, #ededf0);--td-input-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-input-border))}.td-input--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-input--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-input--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:var(--td-color-primary, #5746d8)}.td-input--error label{color:var(--td-color-danger, #d33f3f)}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-input--dark .td-input__action:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292931)}.td-input__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-input__message{min-width:0;flex:1 1 auto;margin:0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-input__message--error{color:var(--td-color-danger, #c43636)}.td-input__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:var(--td-color-primary, #5746d8);font-weight:700}.td-input--dark+.td-input__support .td-input__message,.td-input--dark+.td-input__support .td-input__counter{color:#a1a1aa}.td-input--dark+.td-input__support .td-input__message--error{color:#f28b8b}.td-input--dark+.td-input__support .td-input__counter--limit{color:#b9b0fa}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2421
2706
|
}
|
|
2422
2707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, decorators: [{
|
|
2423
2708
|
type: Component,
|
|
@@ -2453,6 +2738,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2453
2738
|
[attr.minlength]="resolvedMinLength()"
|
|
2454
2739
|
[attr.maxlength]="resolvedMaxLength()"
|
|
2455
2740
|
[attr.pattern]="resolvedPattern()"
|
|
2741
|
+
[attr.inputmode]="resolvedInputMode()"
|
|
2456
2742
|
[attr.aria-describedby]="descriptionId"
|
|
2457
2743
|
[attr.aria-invalid]="hasError()"
|
|
2458
2744
|
(input)="handleInput($event)"
|
|
@@ -2511,7 +2797,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2511
2797
|
], host: {
|
|
2512
2798
|
'[hidden]': 'hidden()',
|
|
2513
2799
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
2514
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb
|
|
2800
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-muted, #748096);position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: var(--td-color-surface, #19191f);--td-input-border: var(--td-color-border, #34343e);--td-input-text: var(--td-color-text, #ededf0);--td-input-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-input-border))}.td-input--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-input--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:0 0 0 3px color-mix(in srgb,var(--td-color-danger, #d33f3f) 16%,transparent)}.td-input--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:var(--td-color-primary, #5746d8)}.td-input--error label{color:var(--td-color-danger, #d33f3f)}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-input--dark .td-input__action:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292931)}.td-input__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-input__message{min-width:0;flex:1 1 auto;margin:0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-input__message--error{color:var(--td-color-danger, #c43636)}.td-input__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:var(--td-color-primary, #5746d8);font-weight:700}.td-input--dark+.td-input__support .td-input__message,.td-input--dark+.td-input__support .td-input__counter{color:#a1a1aa}.td-input--dark+.td-input__support .td-input__message--error{color:#f28b8b}.td-input--dark+.td-input__support .td-input__counter--limit{color:#b9b0fa}\n"] }]
|
|
2515
2801
|
}], propDecorators: { nativeInput: [{
|
|
2516
2802
|
type: ViewChild,
|
|
2517
2803
|
args: ['nativeInput']
|
|
@@ -2535,6 +2821,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2535
2821
|
type: Input
|
|
2536
2822
|
}], showCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounter", required: false }] }], emptyValue: [{
|
|
2537
2823
|
type: Input
|
|
2824
|
+
}], sanitize: [{
|
|
2825
|
+
type: Input
|
|
2826
|
+
}], sanitizeValue: [{
|
|
2827
|
+
type: Input
|
|
2828
|
+
}], mask: [{
|
|
2829
|
+
type: Input
|
|
2830
|
+
}], integerDigits: [{
|
|
2831
|
+
type: Input
|
|
2832
|
+
}], decimalDigits: [{
|
|
2833
|
+
type: Input
|
|
2538
2834
|
}], minValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], maxValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], pattern: [{ type: i0.Input, args: [{ isSignal: true, alias: "pattern", required: false }] }], step: [{
|
|
2539
2835
|
type: Input
|
|
2540
2836
|
}], minlength: [{
|
|
@@ -2553,6 +2849,7 @@ class TdAutocompleteSelect {
|
|
|
2553
2849
|
generatedId = `td-autocomplete-${++autocompleteSequence}`;
|
|
2554
2850
|
searchInput;
|
|
2555
2851
|
connectedOverlay;
|
|
2852
|
+
panel;
|
|
2556
2853
|
label = 'Buscar y seleccionar';
|
|
2557
2854
|
placeholder = 'Escribe para buscar...';
|
|
2558
2855
|
options = [];
|
|
@@ -2574,6 +2871,7 @@ class TdAutocompleteSelect {
|
|
|
2574
2871
|
clearable = true;
|
|
2575
2872
|
dark = false;
|
|
2576
2873
|
scrollBehavior = 'reposition';
|
|
2874
|
+
overflowText = 'ellipsis';
|
|
2577
2875
|
minimumCharacters = 0;
|
|
2578
2876
|
filterWith = (option, search) => `${option.label} ${option.description ?? ''}`.toLocaleLowerCase().includes(search);
|
|
2579
2877
|
compareWith = (first, second) => Object.is(first, second);
|
|
@@ -2647,6 +2945,7 @@ class TdAutocompleteSelect {
|
|
|
2647
2945
|
return;
|
|
2648
2946
|
this.open = true;
|
|
2649
2947
|
this.activeIndex = this.firstEnabledIndex();
|
|
2948
|
+
this.scheduleOverflowTextMeasurement();
|
|
2650
2949
|
}
|
|
2651
2950
|
close() {
|
|
2652
2951
|
this.open = false;
|
|
@@ -2662,6 +2961,7 @@ class TdAutocompleteSelect {
|
|
|
2662
2961
|
this.searchChange.emit(this.search);
|
|
2663
2962
|
this.openPanel();
|
|
2664
2963
|
this.activeIndex = this.firstEnabledIndex();
|
|
2964
|
+
this.scheduleOverflowTextMeasurement();
|
|
2665
2965
|
}
|
|
2666
2966
|
select(option) {
|
|
2667
2967
|
if (option.disabled)
|
|
@@ -2689,13 +2989,21 @@ class TdAutocompleteSelect {
|
|
|
2689
2989
|
}
|
|
2690
2990
|
else if (event.key === 'ArrowDown') {
|
|
2691
2991
|
event.preventDefault();
|
|
2692
|
-
this.
|
|
2693
|
-
|
|
2992
|
+
if (!this.open) {
|
|
2993
|
+
this.openPanel();
|
|
2994
|
+
}
|
|
2995
|
+
else {
|
|
2996
|
+
this.moveActive(1);
|
|
2997
|
+
}
|
|
2694
2998
|
}
|
|
2695
2999
|
else if (event.key === 'ArrowUp') {
|
|
2696
3000
|
event.preventDefault();
|
|
2697
|
-
this.
|
|
2698
|
-
|
|
3001
|
+
if (!this.open) {
|
|
3002
|
+
this.openPanel();
|
|
3003
|
+
}
|
|
3004
|
+
else {
|
|
3005
|
+
this.moveActive(-1);
|
|
3006
|
+
}
|
|
2699
3007
|
}
|
|
2700
3008
|
else if (event.key === 'Enter' && this.open && this.activeIndex >= 0) {
|
|
2701
3009
|
event.preventDefault();
|
|
@@ -2704,6 +3012,12 @@ class TdAutocompleteSelect {
|
|
|
2704
3012
|
this.select(option);
|
|
2705
3013
|
}
|
|
2706
3014
|
}
|
|
3015
|
+
handleOverlayKeydown(event) {
|
|
3016
|
+
if (event.key === 'Escape') {
|
|
3017
|
+
event.preventDefault();
|
|
3018
|
+
this.close();
|
|
3019
|
+
}
|
|
3020
|
+
}
|
|
2707
3021
|
moveActive(direction) {
|
|
2708
3022
|
const options = this.filteredOptions;
|
|
2709
3023
|
if (!options.length)
|
|
@@ -2713,6 +3027,7 @@ class TdAutocompleteSelect {
|
|
|
2713
3027
|
next = (next + direction + options.length) % options.length;
|
|
2714
3028
|
if (!options[next]?.disabled) {
|
|
2715
3029
|
this.activeIndex = next;
|
|
3030
|
+
this.scrollActiveOptionIntoView();
|
|
2716
3031
|
return;
|
|
2717
3032
|
}
|
|
2718
3033
|
}
|
|
@@ -2720,14 +3035,48 @@ class TdAutocompleteSelect {
|
|
|
2720
3035
|
firstEnabledIndex() {
|
|
2721
3036
|
return this.filteredOptions.findIndex((option) => !option.disabled);
|
|
2722
3037
|
}
|
|
3038
|
+
scrollActiveOptionIntoView() {
|
|
3039
|
+
const panel = this.panel?.nativeElement;
|
|
3040
|
+
if (!panel || this.activeIndex < 0)
|
|
3041
|
+
return;
|
|
3042
|
+
const options = panel.querySelectorAll('button[role="option"]');
|
|
3043
|
+
options[this.activeIndex]?.scrollIntoView({ block: 'nearest' });
|
|
3044
|
+
}
|
|
3045
|
+
scheduleOverflowTextMeasurement() {
|
|
3046
|
+
const win = this.document.defaultView;
|
|
3047
|
+
if (this.overflowText !== 'marquee' || !win)
|
|
3048
|
+
return;
|
|
3049
|
+
win.requestAnimationFrame(() => {
|
|
3050
|
+
win.requestAnimationFrame(() => this.measureOverflowText());
|
|
3051
|
+
});
|
|
3052
|
+
}
|
|
3053
|
+
measureOverflowText() {
|
|
3054
|
+
if (this.overflowText !== 'marquee')
|
|
3055
|
+
return;
|
|
3056
|
+
const panel = this.panel?.nativeElement;
|
|
3057
|
+
if (!panel)
|
|
3058
|
+
return;
|
|
3059
|
+
panel
|
|
3060
|
+
.querySelectorAll('strong, small')
|
|
3061
|
+
.forEach((element) => {
|
|
3062
|
+
element.classList.remove('td-select-panel__text--overflow');
|
|
3063
|
+
element.style.removeProperty('--td-select-marquee-window');
|
|
3064
|
+
const width = element.clientWidth;
|
|
3065
|
+
const overflows = element.scrollWidth > width + 1;
|
|
3066
|
+
if (overflows) {
|
|
3067
|
+
element.classList.add('td-select-panel__text--overflow');
|
|
3068
|
+
element.style.setProperty('--td-select-marquee-window', `${width}px`);
|
|
3069
|
+
}
|
|
3070
|
+
});
|
|
3071
|
+
}
|
|
2723
3072
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2724
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, 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 }, 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 }, 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: [
|
|
3073
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, 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 }, 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 }, 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: [
|
|
2725
3074
|
{
|
|
2726
3075
|
provide: NG_VALUE_ACCESSOR,
|
|
2727
3076
|
useExisting: forwardRef(() => TdAutocompleteSelect),
|
|
2728
3077
|
multi: true,
|
|
2729
3078
|
},
|
|
2730
|
-
], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: `
|
|
3079
|
+
], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: `
|
|
2731
3080
|
<div
|
|
2732
3081
|
cdkOverlayOrigin
|
|
2733
3082
|
#origin="cdkOverlayOrigin"
|
|
@@ -2788,12 +3137,15 @@ class TdAutocompleteSelect {
|
|
|
2788
3137
|
[cdkConnectedOverlayViewportMargin]="8"
|
|
2789
3138
|
[cdkConnectedOverlayPush]="true"
|
|
2790
3139
|
(overlayOutsideClick)="close()"
|
|
2791
|
-
(overlayKeydown)="
|
|
3140
|
+
(overlayKeydown)="handleOverlayKeydown($event)"
|
|
2792
3141
|
(detach)="close()"
|
|
2793
3142
|
>
|
|
2794
3143
|
<div
|
|
3144
|
+
#panel
|
|
2795
3145
|
class="td-select-panel"
|
|
2796
3146
|
[class.td-select-panel--dark]="dark"
|
|
3147
|
+
[class.td-select-panel--wrap]="overflowText === 'wrap'"
|
|
3148
|
+
[class.td-select-panel--marquee]="overflowText === 'marquee'"
|
|
2797
3149
|
[id]="listId"
|
|
2798
3150
|
role="listbox"
|
|
2799
3151
|
>
|
|
@@ -2808,7 +3160,6 @@ class TdAutocompleteSelect {
|
|
|
2808
3160
|
[class.td-select-panel__option--selected]="compare(option.value, value())"
|
|
2809
3161
|
[disabled]="option.disabled"
|
|
2810
3162
|
(mousedown)="$event.preventDefault()"
|
|
2811
|
-
(mouseenter)="activeIndex = index"
|
|
2812
3163
|
(click)="select(option)"
|
|
2813
3164
|
>
|
|
2814
3165
|
@if (option.icon) {
|
|
@@ -2827,7 +3178,7 @@ class TdAutocompleteSelect {
|
|
|
2827
3178
|
}
|
|
2828
3179
|
</div>
|
|
2829
3180
|
</ng-template>
|
|
2830
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb
|
|
3181
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;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:.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: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>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__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:.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:.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: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:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#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:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#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 });
|
|
2831
3182
|
}
|
|
2832
3183
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, decorators: [{
|
|
2833
3184
|
type: Component,
|
|
@@ -2892,12 +3243,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2892
3243
|
[cdkConnectedOverlayViewportMargin]="8"
|
|
2893
3244
|
[cdkConnectedOverlayPush]="true"
|
|
2894
3245
|
(overlayOutsideClick)="close()"
|
|
2895
|
-
(overlayKeydown)="
|
|
3246
|
+
(overlayKeydown)="handleOverlayKeydown($event)"
|
|
2896
3247
|
(detach)="close()"
|
|
2897
3248
|
>
|
|
2898
3249
|
<div
|
|
3250
|
+
#panel
|
|
2899
3251
|
class="td-select-panel"
|
|
2900
3252
|
[class.td-select-panel--dark]="dark"
|
|
3253
|
+
[class.td-select-panel--wrap]="overflowText === 'wrap'"
|
|
3254
|
+
[class.td-select-panel--marquee]="overflowText === 'marquee'"
|
|
2901
3255
|
[id]="listId"
|
|
2902
3256
|
role="listbox"
|
|
2903
3257
|
>
|
|
@@ -2912,7 +3266,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2912
3266
|
[class.td-select-panel__option--selected]="compare(option.value, value())"
|
|
2913
3267
|
[disabled]="option.disabled"
|
|
2914
3268
|
(mousedown)="$event.preventDefault()"
|
|
2915
|
-
(mouseenter)="activeIndex = index"
|
|
2916
3269
|
(click)="select(option)"
|
|
2917
3270
|
>
|
|
2918
3271
|
@if (option.icon) {
|
|
@@ -2940,13 +3293,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2940
3293
|
], host: {
|
|
2941
3294
|
'[hidden]': 'hidden()',
|
|
2942
3295
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
2943
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb
|
|
3296
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-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:.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: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>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__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:.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:.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: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:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#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:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#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"] }]
|
|
2944
3297
|
}], ctorParameters: () => [], propDecorators: { searchInput: [{
|
|
2945
3298
|
type: ViewChild,
|
|
2946
3299
|
args: ['searchInput']
|
|
2947
3300
|
}], connectedOverlay: [{
|
|
2948
3301
|
type: ViewChild,
|
|
2949
3302
|
args: [CdkConnectedOverlay]
|
|
3303
|
+
}], panel: [{
|
|
3304
|
+
type: ViewChild,
|
|
3305
|
+
args: ['panel']
|
|
2950
3306
|
}], label: [{
|
|
2951
3307
|
type: Input
|
|
2952
3308
|
}], placeholder: [{
|
|
@@ -2963,6 +3319,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2963
3319
|
type: Input
|
|
2964
3320
|
}], scrollBehavior: [{
|
|
2965
3321
|
type: Input
|
|
3322
|
+
}], overflowText: [{
|
|
3323
|
+
type: Input
|
|
2966
3324
|
}], minimumCharacters: [{
|
|
2967
3325
|
type: Input
|
|
2968
3326
|
}], filterWith: [{
|
|
@@ -2985,6 +3343,7 @@ class TdSelect {
|
|
|
2985
3343
|
generatedId = `td-select-${++selectSequence}`;
|
|
2986
3344
|
connectedOverlay;
|
|
2987
3345
|
trigger;
|
|
3346
|
+
panel;
|
|
2988
3347
|
label = 'Seleccionar';
|
|
2989
3348
|
placeholder = 'Selecciona una opción';
|
|
2990
3349
|
options = [];
|
|
@@ -3006,6 +3365,7 @@ class TdSelect {
|
|
|
3006
3365
|
clearable = false;
|
|
3007
3366
|
dark = false;
|
|
3008
3367
|
scrollBehavior = 'reposition';
|
|
3368
|
+
overflowText = 'ellipsis';
|
|
3009
3369
|
compareWith = (first, second) => Object.is(first, second);
|
|
3010
3370
|
selectionChange = new EventEmitter();
|
|
3011
3371
|
value = model(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
@@ -3084,12 +3444,6 @@ class TdSelect {
|
|
|
3084
3444
|
this.setValue(null);
|
|
3085
3445
|
}
|
|
3086
3446
|
handleKeydown(event) {
|
|
3087
|
-
if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
|
|
3088
|
-
event.preventDefault();
|
|
3089
|
-
this.openPanel();
|
|
3090
|
-
}
|
|
3091
|
-
}
|
|
3092
|
-
handleOverlayKeydown(event) {
|
|
3093
3447
|
if (event.key === 'Escape') {
|
|
3094
3448
|
event.preventDefault();
|
|
3095
3449
|
this.close();
|
|
@@ -3097,23 +3451,46 @@ class TdSelect {
|
|
|
3097
3451
|
}
|
|
3098
3452
|
if (event.key === 'ArrowDown') {
|
|
3099
3453
|
event.preventDefault();
|
|
3100
|
-
this.
|
|
3454
|
+
if (!this.open) {
|
|
3455
|
+
this.openPanel();
|
|
3456
|
+
}
|
|
3457
|
+
else {
|
|
3458
|
+
this.moveActive(1);
|
|
3459
|
+
}
|
|
3460
|
+
return;
|
|
3101
3461
|
}
|
|
3102
|
-
|
|
3462
|
+
if (event.key === 'ArrowUp') {
|
|
3103
3463
|
event.preventDefault();
|
|
3104
|
-
this.
|
|
3464
|
+
if (!this.open) {
|
|
3465
|
+
this.openPanel();
|
|
3466
|
+
}
|
|
3467
|
+
else {
|
|
3468
|
+
this.moveActive(-1);
|
|
3469
|
+
}
|
|
3470
|
+
return;
|
|
3105
3471
|
}
|
|
3106
|
-
|
|
3472
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
3107
3473
|
event.preventDefault();
|
|
3474
|
+
if (!this.open) {
|
|
3475
|
+
this.openPanel();
|
|
3476
|
+
return;
|
|
3477
|
+
}
|
|
3108
3478
|
const option = this.options[this.activeIndex];
|
|
3109
3479
|
if (option)
|
|
3110
3480
|
this.select(option);
|
|
3111
3481
|
}
|
|
3112
3482
|
}
|
|
3483
|
+
handleOverlayKeydown(event) {
|
|
3484
|
+
if (event.key === 'Escape') {
|
|
3485
|
+
event.preventDefault();
|
|
3486
|
+
this.close();
|
|
3487
|
+
}
|
|
3488
|
+
}
|
|
3113
3489
|
openPanel() {
|
|
3114
3490
|
this.open = true;
|
|
3115
3491
|
const selectedIndex = this.options.findIndex((option) => this.compare(option.value, this.value()));
|
|
3116
3492
|
this.activeIndex = selectedIndex >= 0 ? selectedIndex : this.firstEnabledIndex();
|
|
3493
|
+
this.scheduleOverflowTextMeasurement();
|
|
3117
3494
|
}
|
|
3118
3495
|
moveActive(direction) {
|
|
3119
3496
|
if (!this.options.length)
|
|
@@ -3123,6 +3500,7 @@ class TdSelect {
|
|
|
3123
3500
|
next = (next + direction + this.options.length) % this.options.length;
|
|
3124
3501
|
if (!this.options[next]?.disabled) {
|
|
3125
3502
|
this.activeIndex = next;
|
|
3503
|
+
this.scrollActiveOptionIntoView();
|
|
3126
3504
|
return;
|
|
3127
3505
|
}
|
|
3128
3506
|
}
|
|
@@ -3135,14 +3513,48 @@ class TdSelect {
|
|
|
3135
3513
|
this.onChange(value);
|
|
3136
3514
|
this.selectionChange.emit(value);
|
|
3137
3515
|
}
|
|
3516
|
+
scrollActiveOptionIntoView() {
|
|
3517
|
+
const panel = this.panel?.nativeElement;
|
|
3518
|
+
if (!panel || this.activeIndex < 0)
|
|
3519
|
+
return;
|
|
3520
|
+
const options = panel.querySelectorAll('button[role="option"]');
|
|
3521
|
+
options[this.activeIndex]?.scrollIntoView({ block: 'nearest' });
|
|
3522
|
+
}
|
|
3523
|
+
scheduleOverflowTextMeasurement() {
|
|
3524
|
+
const win = this.document.defaultView;
|
|
3525
|
+
if (this.overflowText !== 'marquee' || !win)
|
|
3526
|
+
return;
|
|
3527
|
+
win.requestAnimationFrame(() => {
|
|
3528
|
+
win.requestAnimationFrame(() => this.measureOverflowText());
|
|
3529
|
+
});
|
|
3530
|
+
}
|
|
3531
|
+
measureOverflowText() {
|
|
3532
|
+
if (this.overflowText !== 'marquee')
|
|
3533
|
+
return;
|
|
3534
|
+
const panel = this.panel?.nativeElement;
|
|
3535
|
+
if (!panel)
|
|
3536
|
+
return;
|
|
3537
|
+
panel
|
|
3538
|
+
.querySelectorAll('strong, small')
|
|
3539
|
+
.forEach((element) => {
|
|
3540
|
+
element.classList.remove('td-select-panel__text--overflow');
|
|
3541
|
+
element.style.removeProperty('--td-select-marquee-window');
|
|
3542
|
+
const width = element.clientWidth;
|
|
3543
|
+
const overflows = element.scrollWidth > width + 1;
|
|
3544
|
+
if (overflows) {
|
|
3545
|
+
element.classList.add('td-select-panel__text--overflow');
|
|
3546
|
+
element.style.setProperty('--td-select-marquee-window', `${width}px`);
|
|
3547
|
+
}
|
|
3548
|
+
});
|
|
3549
|
+
}
|
|
3138
3550
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3139
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, 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 }, 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 }, 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: [
|
|
3551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, 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 }, 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 }, 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: [
|
|
3140
3552
|
{
|
|
3141
3553
|
provide: NG_VALUE_ACCESSOR,
|
|
3142
3554
|
useExisting: forwardRef(() => TdSelect),
|
|
3143
3555
|
multi: true,
|
|
3144
3556
|
},
|
|
3145
|
-
], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], ngImport: i0, template: `
|
|
3557
|
+
], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }], ngImport: i0, template: `
|
|
3146
3558
|
<div
|
|
3147
3559
|
cdkOverlayOrigin
|
|
3148
3560
|
#origin="cdkOverlayOrigin"
|
|
@@ -3212,8 +3624,11 @@ class TdSelect {
|
|
|
3212
3624
|
(detach)="close()"
|
|
3213
3625
|
>
|
|
3214
3626
|
<div
|
|
3627
|
+
#panel
|
|
3215
3628
|
class="td-select-panel"
|
|
3216
3629
|
[class.td-select-panel--dark]="dark"
|
|
3630
|
+
[class.td-select-panel--wrap]="overflowText === 'wrap'"
|
|
3631
|
+
[class.td-select-panel--marquee]="overflowText === 'marquee'"
|
|
3217
3632
|
[id]="listId"
|
|
3218
3633
|
role="listbox"
|
|
3219
3634
|
>
|
|
@@ -3228,7 +3643,6 @@ class TdSelect {
|
|
|
3228
3643
|
[class.td-select-panel__option--selected]="compare(option.value, value())"
|
|
3229
3644
|
[attr.aria-selected]="compare(option.value, value())"
|
|
3230
3645
|
[disabled]="option.disabled"
|
|
3231
|
-
(mouseenter)="activeIndex = index"
|
|
3232
3646
|
(click)="select(option)"
|
|
3233
3647
|
>
|
|
3234
3648
|
@if (option.icon) {
|
|
@@ -3247,7 +3661,7 @@ class TdSelect {
|
|
|
3247
3661
|
}
|
|
3248
3662
|
</div>
|
|
3249
3663
|
</ng-template>
|
|
3250
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb
|
|
3664
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;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:.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: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>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__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:.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:.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: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:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#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:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#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 });
|
|
3251
3665
|
}
|
|
3252
3666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, decorators: [{
|
|
3253
3667
|
type: Component,
|
|
@@ -3321,8 +3735,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3321
3735
|
(detach)="close()"
|
|
3322
3736
|
>
|
|
3323
3737
|
<div
|
|
3738
|
+
#panel
|
|
3324
3739
|
class="td-select-panel"
|
|
3325
3740
|
[class.td-select-panel--dark]="dark"
|
|
3741
|
+
[class.td-select-panel--wrap]="overflowText === 'wrap'"
|
|
3742
|
+
[class.td-select-panel--marquee]="overflowText === 'marquee'"
|
|
3326
3743
|
[id]="listId"
|
|
3327
3744
|
role="listbox"
|
|
3328
3745
|
>
|
|
@@ -3337,7 +3754,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3337
3754
|
[class.td-select-panel__option--selected]="compare(option.value, value())"
|
|
3338
3755
|
[attr.aria-selected]="compare(option.value, value())"
|
|
3339
3756
|
[disabled]="option.disabled"
|
|
3340
|
-
(mouseenter)="activeIndex = index"
|
|
3341
3757
|
(click)="select(option)"
|
|
3342
3758
|
>
|
|
3343
3759
|
@if (option.icon) {
|
|
@@ -3365,13 +3781,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3365
3781
|
], host: {
|
|
3366
3782
|
'[hidden]': 'hidden()',
|
|
3367
3783
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
3368
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb
|
|
3784
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-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:.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: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>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__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:.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:.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: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:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#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:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#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"] }]
|
|
3369
3785
|
}], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
|
|
3370
3786
|
type: ViewChild,
|
|
3371
3787
|
args: [CdkConnectedOverlay]
|
|
3372
3788
|
}], trigger: [{
|
|
3373
3789
|
type: ViewChild,
|
|
3374
3790
|
args: ['trigger']
|
|
3791
|
+
}], panel: [{
|
|
3792
|
+
type: ViewChild,
|
|
3793
|
+
args: ['panel']
|
|
3375
3794
|
}], label: [{
|
|
3376
3795
|
type: Input
|
|
3377
3796
|
}], placeholder: [{
|
|
@@ -3388,6 +3807,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3388
3807
|
type: Input
|
|
3389
3808
|
}], scrollBehavior: [{
|
|
3390
3809
|
type: Input
|
|
3810
|
+
}], overflowText: [{
|
|
3811
|
+
type: Input
|
|
3391
3812
|
}], compareWith: [{
|
|
3392
3813
|
type: Input
|
|
3393
3814
|
}], selectionChange: [{
|
|
@@ -3456,11 +3877,11 @@ class TdSidebar {
|
|
|
3456
3877
|
}));
|
|
3457
3878
|
}
|
|
3458
3879
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3459
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: #fff;--td-borde: #e2e8f0;--td-texto: #334155;--td-texto-suave: #64748b;--td-hover: #f1f5f9;--td-activo: #e8efff;--td-acento: #2563eb;display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: #09090b;--td-borde: #27272a;--td-texto: #d4d4d8;--td-texto-suave: #71717a;--td-hover: #18181b;--td-activo: #172554;--td-acento: #60a5fa}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:.75rem;color:#fff;background:linear-gradient(135deg
|
|
3880
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:.75rem;color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:.55rem;padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3460
3881
|
}
|
|
3461
3882
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSidebar, decorators: [{
|
|
3462
3883
|
type: Component,
|
|
3463
|
-
args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: #fff;--td-borde: #e2e8f0;--td-texto: #334155;--td-texto-suave: #64748b;--td-hover: #f1f5f9;--td-activo: #e8efff;--td-acento: #2563eb;display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: #09090b;--td-borde: #27272a;--td-texto: #d4d4d8;--td-texto-suave: #71717a;--td-hover: #18181b;--td-activo: #172554;--td-acento: #60a5fa}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:.75rem;color:#fff;background:linear-gradient(135deg
|
|
3884
|
+
args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:width .2s ease,background .2s ease,border-color .2s ease}.td-sidebar--oscuro{--td-fondo: var(--td-color-surface, #09090b);--td-borde: var(--td-color-border, #27272a);--td-texto: var(--td-color-text, #d4d4d8);--td-texto-suave: var(--td-color-text-muted, #71717a);--td-hover: var(--td-color-surface-soft, #18181b);--td-activo: var(--td-color-primary-soft, #172554);--td-acento: var(--td-color-primary, #60a5fa)}.td-sidebar--compacto{width:5rem}.td-sidebar--oculto{width:0;min-width:0;border-right-width:0;visibility:hidden}.td-sidebar__marca{display:flex;min-height:5rem;align-items:center;gap:.75rem;border-bottom:1px solid var(--td-borde);padding:1rem}.td-sidebar__logo{display:grid;width:2.75rem;height:2.75rem;flex:0 0 2.75rem;place-items:center;overflow:hidden;border:1px solid var(--td-borde);border-radius:.75rem;color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #2563eb),var(--td-color-info, #3157a4));font-size:1.15rem;font-weight:800}.td-sidebar__logo img{width:75%;height:75%;object-fit:contain}.td-sidebar__marca-texto{min-width:0;flex:1}.td-sidebar__marca-texto small,.td-sidebar__marca-texto strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__marca-texto small{color:var(--td-acento);font-size:.64rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar__marca-texto strong{margin-top:.18rem;font-size:.84rem}.td-sidebar__encabezado{min-height:3.35rem;padding:1.25rem 1rem .65rem;color:var(--td-texto-suave);font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.td-sidebar--compacto .td-sidebar__encabezado{text-align:center}.td-sidebar__nav{min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:0 .7rem 1rem;scrollbar-width:thin;scrollbar-color:var(--td-borde) transparent}.td-sidebar__lista{margin:0;padding:0;list-style:none}.td-sidebar__lista--anidada{position:relative;margin:.2rem 0 .35rem 1.25rem;padding-left:.7rem}.td-sidebar__lista--anidada:before{position:absolute;inset:0 auto 0 0;width:1px;background:var(--td-borde);content:\"\"}.td-sidebar__item+.td-sidebar__item{margin-top:.2rem}.td-sidebar__enlace{display:flex;width:100%;min-width:0;min-height:2.5rem;align-items:center;gap:.7rem;border:0;border-radius:.55rem;padding:.55rem .7rem;color:var(--td-texto);background:transparent;font:inherit;font-size:.82rem;font-weight:600;text-align:left;text-decoration:none;cursor:pointer;transition:color .12s ease,background .12s ease}.td-sidebar__enlace:hover{background:var(--td-hover)}.td-sidebar__enlace--activo,.td-sidebar__enlace--ruta-activa{color:var(--td-acento);background:var(--td-activo)}.td-sidebar__enlace span{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}.td-sidebar__icono{width:1.15rem;height:1.15rem;flex:0 0 1.15rem}.td-sidebar__flecha{width:.9rem;height:.9rem;flex:0 0 .9rem;transition:transform .16s ease}.td-sidebar__flecha--abierta{transform:rotate(90deg)}.td-sidebar--compacto .td-sidebar__marca{justify-content:center;padding-inline:.7rem}.td-sidebar--compacto .td-sidebar__nav{padding-inline:.65rem}.td-sidebar--compacto .td-sidebar__enlace{justify-content:center;padding-inline:0}.td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2.2rem;font-size:.75rem;font-weight:500}.td-sidebar__lista--anidada .td-sidebar__lista--anidada .td-sidebar__enlace{min-height:2rem;color:var(--td-texto-suave);font-size:.7rem}.td-sidebar__estado{margin:0;padding:.75rem;color:var(--td-texto-suave);font-size:.75rem;line-height:1.45}.td-sidebar__estado--error{color:var(--td-color-warning, #d97706)}@media(prefers-reduced-motion:reduce){.td-sidebar,.td-sidebar__flecha{transition:none}}\n"] }]
|
|
3464
3885
|
}], propDecorators: { titulo: [{
|
|
3465
3886
|
type: Input
|
|
3466
3887
|
}], subtitulo: [{
|
|
@@ -3728,7 +4149,7 @@ class TdTabs {
|
|
|
3728
4149
|
</div>
|
|
3729
4150
|
}
|
|
3730
4151
|
</section>
|
|
3731
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: #fff;--td-tabs-soft: #f7f8fb;--td-tabs-border: #e3e7ef;--td-tabs-text: #263147;--td-tabs-muted: #748096;--td-tabs-accent: #5746d8;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: #19191f;--td-tabs-soft: #202028;--td-tabs-border: #303039;--td-tabs-text: #ededf0;--td-tabs-muted: #a1a1aa;--td-tabs-accent: #b9b0fa}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs__list{justify-content:flex-start!important}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4152
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs__list{justify-content:flex-start!important}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3732
4153
|
}
|
|
3733
4154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTabs, decorators: [{
|
|
3734
4155
|
type: Component,
|
|
@@ -3784,7 +4205,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3784
4205
|
</div>
|
|
3785
4206
|
}
|
|
3786
4207
|
</section>
|
|
3787
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: #fff;--td-tabs-soft: #f7f8fb;--td-tabs-border: #e3e7ef;--td-tabs-text: #263147;--td-tabs-muted: #748096;--td-tabs-accent: #5746d8;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: #19191f;--td-tabs-soft: #202028;--td-tabs-border: #303039;--td-tabs-text: #ededf0;--td-tabs-muted: #a1a1aa;--td-tabs-accent: #b9b0fa}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs__list{justify-content:flex-start!important}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"] }]
|
|
4208
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs__list{justify-content:flex-start!important}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"] }]
|
|
3788
4209
|
}], propDecorators: { tabQuery: [{
|
|
3789
4210
|
type: ContentChildren,
|
|
3790
4211
|
args: [TdTab]
|
|
@@ -3814,6 +4235,78 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3814
4235
|
type: Output
|
|
3815
4236
|
}] } });
|
|
3816
4237
|
|
|
4238
|
+
const TD_THEME_LIGHT_COLORS = [
|
|
4239
|
+
{ name: 'Primary', cssVariable: '--td-color-primary', value: '#3157A4', usage: 'Main actions, focus and active navigation.' },
|
|
4240
|
+
{ name: 'Primary hover', cssVariable: '--td-color-primary-hover', value: '#254680', usage: 'Hover state for primary actions.' },
|
|
4241
|
+
{ name: 'Primary soft', cssVariable: '--td-color-primary-soft', value: '#EAF0FB', usage: 'Selected rows, subtle badges and active surfaces.' },
|
|
4242
|
+
{ name: 'Success', cssVariable: '--td-color-success', value: '#16784A', usage: 'Positive states and confirmations.' },
|
|
4243
|
+
{ name: 'Warning', cssVariable: '--td-color-warning', value: '#A8660B', usage: 'Preventive states and attention.' },
|
|
4244
|
+
{ name: 'Danger', cssVariable: '--td-color-danger', value: '#B93A3A', usage: 'Errors and destructive actions.' },
|
|
4245
|
+
{ name: 'Info', cssVariable: '--td-color-info', value: '#2563A8', usage: 'Informational states.' },
|
|
4246
|
+
{ name: 'Surface', cssVariable: '--td-color-surface', value: '#FFFFFF', usage: 'Inputs, dialogs, tables and panels.' },
|
|
4247
|
+
{ name: 'Surface soft', cssVariable: '--td-color-surface-soft', value: '#F6F8FB', usage: 'Headers, subtle backgrounds and table bars.' },
|
|
4248
|
+
{ name: 'Border', cssVariable: '--td-color-border', value: '#DDE3EE', usage: 'Outlines, separators and dividers.' },
|
|
4249
|
+
{ name: 'Text', cssVariable: '--td-color-text', value: '#202B3D', usage: 'Main content text.' },
|
|
4250
|
+
{ name: 'Muted text', cssVariable: '--td-color-text-muted', value: '#66758B', usage: 'Metadata, hints and secondary labels.' },
|
|
4251
|
+
];
|
|
4252
|
+
const TD_THEME_DARK_COLORS = [
|
|
4253
|
+
{ name: 'Primary', cssVariable: '--td-color-primary', value: '#8AA7E6', usage: 'Main actions, focus and active navigation.' },
|
|
4254
|
+
{ name: 'Primary hover', cssVariable: '--td-color-primary-hover', value: '#A8BDF0', usage: 'Hover state for primary actions.' },
|
|
4255
|
+
{ name: 'Primary soft', cssVariable: '--td-color-primary-soft', value: '#1F2B45', usage: 'Selected rows, subtle badges and active surfaces.' },
|
|
4256
|
+
{ name: 'Success', cssVariable: '--td-color-success', value: '#56C28D', usage: 'Positive states and confirmations.' },
|
|
4257
|
+
{ name: 'Warning', cssVariable: '--td-color-warning', value: '#E2A84D', usage: 'Preventive states and attention.' },
|
|
4258
|
+
{ name: 'Danger', cssVariable: '--td-color-danger', value: '#F07878', usage: 'Errors and destructive actions.' },
|
|
4259
|
+
{ name: 'Info', cssVariable: '--td-color-info', value: '#79A9E8', usage: 'Informational states.' },
|
|
4260
|
+
{ name: 'Surface', cssVariable: '--td-color-surface', value: '#181B22', usage: 'Inputs, dialogs, tables and panels.' },
|
|
4261
|
+
{ name: 'Surface soft', cssVariable: '--td-color-surface-soft', value: '#20242D', usage: 'Headers, subtle backgrounds and table bars.' },
|
|
4262
|
+
{ name: 'Border', cssVariable: '--td-color-border', value: '#343B49', usage: 'Outlines, separators and dividers.' },
|
|
4263
|
+
{ name: 'Text', cssVariable: '--td-color-text', value: '#EEF2F8', usage: 'Main content text.' },
|
|
4264
|
+
{ name: 'Muted text', cssVariable: '--td-color-text-muted', value: '#A7B0BE', usage: 'Metadata, hints and secondary labels.' },
|
|
4265
|
+
];
|
|
4266
|
+
|
|
4267
|
+
const THEME_CLASS_LIGHT = 'td-theme-light';
|
|
4268
|
+
const THEME_CLASS_DARK = 'td-theme-dark';
|
|
4269
|
+
class TdThemeService {
|
|
4270
|
+
document = inject(DOCUMENT);
|
|
4271
|
+
systemDark = signal(this.readSystemPreference(), ...(ngDevMode ? [{ debugName: "systemDark" }] : /* istanbul ignore next */ []));
|
|
4272
|
+
mode = signal('light', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
4273
|
+
isDark = computed(() => this.mode() === 'dark' || (this.mode() === 'system' && this.systemDark()), ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
|
|
4274
|
+
constructor() {
|
|
4275
|
+
this.listenSystemPreference();
|
|
4276
|
+
effect(() => this.applyThemeClass(this.isDark(), this.mode()));
|
|
4277
|
+
}
|
|
4278
|
+
setMode(mode) {
|
|
4279
|
+
this.mode.set(mode);
|
|
4280
|
+
}
|
|
4281
|
+
toggle() {
|
|
4282
|
+
this.mode.set(this.isDark() ? 'light' : 'dark');
|
|
4283
|
+
}
|
|
4284
|
+
applyThemeClass(isDark, mode) {
|
|
4285
|
+
const element = this.document.documentElement;
|
|
4286
|
+
element.classList.toggle(THEME_CLASS_DARK, isDark);
|
|
4287
|
+
element.classList.toggle(THEME_CLASS_LIGHT, !isDark);
|
|
4288
|
+
element.dataset['tdTheme'] = mode;
|
|
4289
|
+
}
|
|
4290
|
+
readSystemPreference() {
|
|
4291
|
+
return typeof window !== 'undefined' &&
|
|
4292
|
+
typeof window.matchMedia === 'function' &&
|
|
4293
|
+
window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
4294
|
+
}
|
|
4295
|
+
listenSystemPreference() {
|
|
4296
|
+
if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
|
|
4297
|
+
return;
|
|
4298
|
+
const query = window.matchMedia('(prefers-color-scheme: dark)');
|
|
4299
|
+
const listener = (event) => this.systemDark.set(event.matches);
|
|
4300
|
+
query.addEventListener?.('change', listener);
|
|
4301
|
+
}
|
|
4302
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4303
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdThemeService, providedIn: 'root' });
|
|
4304
|
+
}
|
|
4305
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdThemeService, decorators: [{
|
|
4306
|
+
type: Injectable,
|
|
4307
|
+
args: [{ providedIn: 'root' }]
|
|
4308
|
+
}], ctorParameters: () => [] });
|
|
4309
|
+
|
|
3817
4310
|
/*
|
|
3818
4311
|
* Public API Surface of telcomdev-ui
|
|
3819
4312
|
*/
|
|
@@ -3822,5 +4315,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3822
4315
|
* Generated bundle index. Do not edit.
|
|
3823
4316
|
*/
|
|
3824
4317
|
|
|
3825
|
-
export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdAutocompleteSelect, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TelcomdevUi, createTdFormControlBridge };
|
|
4318
|
+
export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TdThemeService, TelcomdevUi, createTdFormControlBridge };
|
|
3826
4319
|
//# sourceMappingURL=telcomdev-ui.mjs.map
|