@telcomdev/ui 0.1.20 → 0.1.22
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/README.md +13 -0
- package/fesm2022/telcomdev-ui.mjs +478 -12
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/telcomdev-ui.d.ts +92 -2
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input,
|
|
2
|
+
import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, booleanAttribute, EventEmitter, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, HostListener, Directive, EnvironmentInjector, DestroyRef, effect, TemplateRef, ViewChildren, ContentChildren, ElementRef, ViewContainerRef, Renderer2, numberAttribute } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
5
5
|
import { FORM_FIELD } from '@angular/forms/signals';
|
|
@@ -10,8 +10,9 @@ import { CdkConnectedOverlay, CdkOverlayOrigin, ScrollStrategyOptions, Overlay }
|
|
|
10
10
|
import { DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
|
|
11
11
|
import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
12
12
|
import { ComponentPortal } from '@angular/cdk/portal';
|
|
13
|
-
import { take } from 'rxjs';
|
|
14
|
-
import {
|
|
13
|
+
import { take, filter } from 'rxjs';
|
|
14
|
+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
15
|
+
import { Router, NavigationEnd, RouterLink, RouterLinkActive } from '@angular/router';
|
|
15
16
|
|
|
16
17
|
class TelcomdevUi {
|
|
17
18
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TelcomdevUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -703,6 +704,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
703
704
|
args: ['style.--td-icon-size']
|
|
704
705
|
}] } });
|
|
705
706
|
|
|
707
|
+
class TdBadge {
|
|
708
|
+
tone = 'primary';
|
|
709
|
+
variant = 'soft';
|
|
710
|
+
size = 'md';
|
|
711
|
+
value = undefined;
|
|
712
|
+
position = 'top-right';
|
|
713
|
+
icon = '';
|
|
714
|
+
floating = false;
|
|
715
|
+
hidden = false;
|
|
716
|
+
dot = false;
|
|
717
|
+
pill = true;
|
|
718
|
+
ariaLabel = '';
|
|
719
|
+
get isFloating() {
|
|
720
|
+
return this.floating || (this.value !== undefined && this.value !== null && this.value !== '');
|
|
721
|
+
}
|
|
722
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
723
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdBadge, isStandalone: true, selector: "td-badge", inputs: { tone: "tone", variant: "variant", size: "size", value: "value", position: "position", icon: "icon", floating: ["floating", "floating", booleanAttribute], hidden: ["hidden", "hidden", booleanAttribute], dot: ["dot", "dot", booleanAttribute], pill: ["pill", "pill", booleanAttribute], ariaLabel: ["aria-label", "ariaLabel"] }, ngImport: i0, template: `
|
|
724
|
+
<span
|
|
725
|
+
[class]="
|
|
726
|
+
isFloating
|
|
727
|
+
? 'td-badge-anchor td-badge-anchor--' + position
|
|
728
|
+
: 'td-badge td-badge--' + tone + ' td-badge--' + variant + ' td-badge--' + size
|
|
729
|
+
"
|
|
730
|
+
[class.td-badge--dot]="!isFloating && dot"
|
|
731
|
+
[class.td-badge--pill]="!isFloating && pill"
|
|
732
|
+
[class.td-badge--with-icon]="!isFloating && !!icon && !dot"
|
|
733
|
+
[attr.aria-label]="!isFloating ? ariaLabel || null : null"
|
|
734
|
+
>
|
|
735
|
+
@if (!isFloating && dot) {
|
|
736
|
+
<span class="td-badge__dot" aria-hidden="true"></span>
|
|
737
|
+
} @else {
|
|
738
|
+
@if (!isFloating && icon) {
|
|
739
|
+
<td-icon [nombre]="icon" />
|
|
740
|
+
}
|
|
741
|
+
<span class="td-badge__content" [class.td-badge__content--floating]="isFloating">
|
|
742
|
+
<ng-content />
|
|
743
|
+
</span>
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
@if (isFloating && !hidden) {
|
|
747
|
+
<span
|
|
748
|
+
class="td-badge td-badge--floating"
|
|
749
|
+
[class]="'td-badge td-badge--floating td-badge--' + tone + ' td-badge--' + variant + ' td-badge--' + size"
|
|
750
|
+
[class.td-badge--dot]="dot"
|
|
751
|
+
[class.td-badge--pill]="pill"
|
|
752
|
+
[class.td-badge--with-icon]="!!icon && !dot"
|
|
753
|
+
[attr.aria-label]="ariaLabel || null"
|
|
754
|
+
>
|
|
755
|
+
@if (dot) {
|
|
756
|
+
<span class="td-badge__dot" aria-hidden="true"></span>
|
|
757
|
+
} @else {
|
|
758
|
+
@if (icon) {
|
|
759
|
+
<td-icon [nombre]="icon" />
|
|
760
|
+
}
|
|
761
|
+
<span class="td-badge__content">
|
|
762
|
+
{{ value }}
|
|
763
|
+
</span>
|
|
764
|
+
}
|
|
765
|
+
</span>
|
|
766
|
+
}
|
|
767
|
+
</span>
|
|
768
|
+
`, isInline: true, styles: [":host{display:inline-flex;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);vertical-align:middle}*{box-sizing:border-box}.td-badge{--td-badge-main: var(--td-color-primary, #3157a4);--td-badge-soft: var(--td-color-primary-soft, #eaf0fb);--td-badge-text: var(--td-badge-main);display:inline-flex;max-width:100%;align-items:center;justify-content:center;gap:.32rem;border:1px solid transparent;border-radius:var(--td-radius-sm, .5rem);color:var(--td-badge-text);background:var(--td-badge-soft);font-weight:830;line-height:1;white-space:nowrap}.td-badge-anchor{position:relative;display:inline-flex;min-width:0;align-items:center;justify-content:center;vertical-align:middle}.td-badge__content--floating{display:inline-flex;min-width:0}.td-badge--floating{position:absolute;z-index:1;box-shadow:0 0 0 2px var(--td-color-surface, #ffffff),var(--td-shadow-sm, 0 8px 18px rgba(31, 42, 68, .12));pointer-events:none}.td-badge-anchor--top-right .td-badge--floating{top:0;right:0;transform:translate(42%,-42%)}.td-badge-anchor--top-left .td-badge--floating{top:0;left:0;transform:translate(-42%,-42%)}.td-badge-anchor--bottom-right .td-badge--floating{right:0;bottom:0;transform:translate(42%,42%)}.td-badge-anchor--bottom-left .td-badge--floating{bottom:0;left:0;transform:translate(-42%,42%)}.td-badge--pill{border-radius:999px}.td-badge--sm{min-height:1.35rem;padding:0 .45rem;font-size:.63rem}.td-badge--md{min-height:1.65rem;padding:0 .6rem;font-size:.7rem}.td-badge--lg{min-height:1.95rem;padding:0 .78rem;font-size:.78rem}.td-badge--dot{width:.65rem;min-width:.65rem;height:.65rem;min-height:.65rem;padding:0;border-radius:999px;background:var(--td-badge-main)}.td-badge--dot.td-badge--sm{width:.5rem;min-width:.5rem;height:.5rem;min-height:.5rem}.td-badge--dot.td-badge--lg{width:.82rem;min-width:.82rem;height:.82rem;min-height:.82rem}.td-badge__dot{width:100%;height:100%;border-radius:inherit}.td-badge__content{min-width:0;overflow:hidden;text-overflow:ellipsis}td-icon{width:.9em;height:.9em;flex:0 0 auto}.td-badge--neutral{--td-badge-main: var(--td-color-text-muted, #62708a);--td-badge-soft: var(--td-color-surface-muted, #edf1f6);--td-badge-text: var(--td-color-text, #202b3d)}.td-badge--success{--td-badge-main: var(--td-color-success, #16784a);--td-badge-soft: var(--td-color-success-soft, #e2f5eb)}.td-badge--warning{--td-badge-main: var(--td-color-warning, #a8660b);--td-badge-soft: var(--td-color-warning-soft, #fff2d8)}.td-badge--danger{--td-badge-main: var(--td-color-danger, #b93a3a);--td-badge-soft: var(--td-color-danger-soft, #fde7e7)}.td-badge--info{--td-badge-main: var(--td-color-info, #2563a8);--td-badge-soft: var(--td-color-info-soft, #e4effb)}.td-badge--solid{--td-badge-text: var(--td-color-on-primary, #ffffff);color:var(--td-badge-text);background:var(--td-badge-main)}.td-badge--outline{color:var(--td-badge-main);border-color:color-mix(in srgb,var(--td-badge-main) 42%,var(--td-color-border, #dde3ee));background:transparent}.td-badge--soft{color:var(--td-badge-main);background:var(--td-badge-soft)}.td-badge--neutral.td-badge--solid{color:var(--td-color-text, #202b3d);background:var(--td-color-surface-muted, #edf1f6)}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
769
|
+
}
|
|
770
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdBadge, decorators: [{
|
|
771
|
+
type: Component,
|
|
772
|
+
args: [{ selector: 'td-badge', imports: [TdIcon], template: `
|
|
773
|
+
<span
|
|
774
|
+
[class]="
|
|
775
|
+
isFloating
|
|
776
|
+
? 'td-badge-anchor td-badge-anchor--' + position
|
|
777
|
+
: 'td-badge td-badge--' + tone + ' td-badge--' + variant + ' td-badge--' + size
|
|
778
|
+
"
|
|
779
|
+
[class.td-badge--dot]="!isFloating && dot"
|
|
780
|
+
[class.td-badge--pill]="!isFloating && pill"
|
|
781
|
+
[class.td-badge--with-icon]="!isFloating && !!icon && !dot"
|
|
782
|
+
[attr.aria-label]="!isFloating ? ariaLabel || null : null"
|
|
783
|
+
>
|
|
784
|
+
@if (!isFloating && dot) {
|
|
785
|
+
<span class="td-badge__dot" aria-hidden="true"></span>
|
|
786
|
+
} @else {
|
|
787
|
+
@if (!isFloating && icon) {
|
|
788
|
+
<td-icon [nombre]="icon" />
|
|
789
|
+
}
|
|
790
|
+
<span class="td-badge__content" [class.td-badge__content--floating]="isFloating">
|
|
791
|
+
<ng-content />
|
|
792
|
+
</span>
|
|
793
|
+
}
|
|
794
|
+
|
|
795
|
+
@if (isFloating && !hidden) {
|
|
796
|
+
<span
|
|
797
|
+
class="td-badge td-badge--floating"
|
|
798
|
+
[class]="'td-badge td-badge--floating td-badge--' + tone + ' td-badge--' + variant + ' td-badge--' + size"
|
|
799
|
+
[class.td-badge--dot]="dot"
|
|
800
|
+
[class.td-badge--pill]="pill"
|
|
801
|
+
[class.td-badge--with-icon]="!!icon && !dot"
|
|
802
|
+
[attr.aria-label]="ariaLabel || null"
|
|
803
|
+
>
|
|
804
|
+
@if (dot) {
|
|
805
|
+
<span class="td-badge__dot" aria-hidden="true"></span>
|
|
806
|
+
} @else {
|
|
807
|
+
@if (icon) {
|
|
808
|
+
<td-icon [nombre]="icon" />
|
|
809
|
+
}
|
|
810
|
+
<span class="td-badge__content">
|
|
811
|
+
{{ value }}
|
|
812
|
+
</span>
|
|
813
|
+
}
|
|
814
|
+
</span>
|
|
815
|
+
}
|
|
816
|
+
</span>
|
|
817
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);vertical-align:middle}*{box-sizing:border-box}.td-badge{--td-badge-main: var(--td-color-primary, #3157a4);--td-badge-soft: var(--td-color-primary-soft, #eaf0fb);--td-badge-text: var(--td-badge-main);display:inline-flex;max-width:100%;align-items:center;justify-content:center;gap:.32rem;border:1px solid transparent;border-radius:var(--td-radius-sm, .5rem);color:var(--td-badge-text);background:var(--td-badge-soft);font-weight:830;line-height:1;white-space:nowrap}.td-badge-anchor{position:relative;display:inline-flex;min-width:0;align-items:center;justify-content:center;vertical-align:middle}.td-badge__content--floating{display:inline-flex;min-width:0}.td-badge--floating{position:absolute;z-index:1;box-shadow:0 0 0 2px var(--td-color-surface, #ffffff),var(--td-shadow-sm, 0 8px 18px rgba(31, 42, 68, .12));pointer-events:none}.td-badge-anchor--top-right .td-badge--floating{top:0;right:0;transform:translate(42%,-42%)}.td-badge-anchor--top-left .td-badge--floating{top:0;left:0;transform:translate(-42%,-42%)}.td-badge-anchor--bottom-right .td-badge--floating{right:0;bottom:0;transform:translate(42%,42%)}.td-badge-anchor--bottom-left .td-badge--floating{bottom:0;left:0;transform:translate(-42%,42%)}.td-badge--pill{border-radius:999px}.td-badge--sm{min-height:1.35rem;padding:0 .45rem;font-size:.63rem}.td-badge--md{min-height:1.65rem;padding:0 .6rem;font-size:.7rem}.td-badge--lg{min-height:1.95rem;padding:0 .78rem;font-size:.78rem}.td-badge--dot{width:.65rem;min-width:.65rem;height:.65rem;min-height:.65rem;padding:0;border-radius:999px;background:var(--td-badge-main)}.td-badge--dot.td-badge--sm{width:.5rem;min-width:.5rem;height:.5rem;min-height:.5rem}.td-badge--dot.td-badge--lg{width:.82rem;min-width:.82rem;height:.82rem;min-height:.82rem}.td-badge__dot{width:100%;height:100%;border-radius:inherit}.td-badge__content{min-width:0;overflow:hidden;text-overflow:ellipsis}td-icon{width:.9em;height:.9em;flex:0 0 auto}.td-badge--neutral{--td-badge-main: var(--td-color-text-muted, #62708a);--td-badge-soft: var(--td-color-surface-muted, #edf1f6);--td-badge-text: var(--td-color-text, #202b3d)}.td-badge--success{--td-badge-main: var(--td-color-success, #16784a);--td-badge-soft: var(--td-color-success-soft, #e2f5eb)}.td-badge--warning{--td-badge-main: var(--td-color-warning, #a8660b);--td-badge-soft: var(--td-color-warning-soft, #fff2d8)}.td-badge--danger{--td-badge-main: var(--td-color-danger, #b93a3a);--td-badge-soft: var(--td-color-danger-soft, #fde7e7)}.td-badge--info{--td-badge-main: var(--td-color-info, #2563a8);--td-badge-soft: var(--td-color-info-soft, #e4effb)}.td-badge--solid{--td-badge-text: var(--td-color-on-primary, #ffffff);color:var(--td-badge-text);background:var(--td-badge-main)}.td-badge--outline{color:var(--td-badge-main);border-color:color-mix(in srgb,var(--td-badge-main) 42%,var(--td-color-border, #dde3ee));background:transparent}.td-badge--soft{color:var(--td-badge-main);background:var(--td-badge-soft)}.td-badge--neutral.td-badge--solid{color:var(--td-color-text, #202b3d);background:var(--td-color-surface-muted, #edf1f6)}\n"] }]
|
|
818
|
+
}], propDecorators: { tone: [{
|
|
819
|
+
type: Input
|
|
820
|
+
}], variant: [{
|
|
821
|
+
type: Input
|
|
822
|
+
}], size: [{
|
|
823
|
+
type: Input
|
|
824
|
+
}], value: [{
|
|
825
|
+
type: Input
|
|
826
|
+
}], position: [{
|
|
827
|
+
type: Input
|
|
828
|
+
}], icon: [{
|
|
829
|
+
type: Input
|
|
830
|
+
}], floating: [{
|
|
831
|
+
type: Input,
|
|
832
|
+
args: [{ transform: booleanAttribute }]
|
|
833
|
+
}], hidden: [{
|
|
834
|
+
type: Input,
|
|
835
|
+
args: [{ transform: booleanAttribute }]
|
|
836
|
+
}], dot: [{
|
|
837
|
+
type: Input,
|
|
838
|
+
args: [{ transform: booleanAttribute }]
|
|
839
|
+
}], pill: [{
|
|
840
|
+
type: Input,
|
|
841
|
+
args: [{ transform: booleanAttribute }]
|
|
842
|
+
}], ariaLabel: [{
|
|
843
|
+
type: Input,
|
|
844
|
+
args: [{ alias: 'aria-label' }]
|
|
845
|
+
}] } });
|
|
846
|
+
|
|
706
847
|
class TdButton {
|
|
707
848
|
contentRef;
|
|
708
849
|
variant = 'solid';
|
|
@@ -1121,6 +1262,24 @@ class TdMenu {
|
|
|
1121
1262
|
get itemsVisibles() {
|
|
1122
1263
|
return this.items.filter((item) => item.visible ?? true);
|
|
1123
1264
|
}
|
|
1265
|
+
badgeConfig(item) {
|
|
1266
|
+
if (item.badge === undefined || item.badge === null || item.badge === '')
|
|
1267
|
+
return null;
|
|
1268
|
+
if (typeof item.badge === 'string' || typeof item.badge === 'number') {
|
|
1269
|
+
return {
|
|
1270
|
+
etiqueta: item.badge,
|
|
1271
|
+
tone: this.badgeTonePorTono(item.tono),
|
|
1272
|
+
variant: 'soft',
|
|
1273
|
+
size: 'sm',
|
|
1274
|
+
};
|
|
1275
|
+
}
|
|
1276
|
+
return {
|
|
1277
|
+
tone: this.badgeTonePorTono(item.tono),
|
|
1278
|
+
variant: 'soft',
|
|
1279
|
+
size: 'sm',
|
|
1280
|
+
...item.badge,
|
|
1281
|
+
};
|
|
1282
|
+
}
|
|
1124
1283
|
alternar() {
|
|
1125
1284
|
if (this.disabled)
|
|
1126
1285
|
return;
|
|
@@ -1183,12 +1342,22 @@ class TdMenu {
|
|
|
1183
1342
|
this.abierto = valor;
|
|
1184
1343
|
this.abiertoChange.emit(valor);
|
|
1185
1344
|
}
|
|
1345
|
+
badgeTonePorTono(tono) {
|
|
1346
|
+
const mapa = {
|
|
1347
|
+
neutro: 'neutral',
|
|
1348
|
+
primario: 'primary',
|
|
1349
|
+
exito: 'success',
|
|
1350
|
+
advertencia: 'warning',
|
|
1351
|
+
peligro: 'danger',
|
|
1352
|
+
};
|
|
1353
|
+
return mapa[tono || 'neutro'];
|
|
1354
|
+
}
|
|
1186
1355
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1187
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdMenu, isStandalone: true, selector: "td-menu", inputs: { items: "items", etiqueta: "etiqueta", icono: "icono", posicion: "posicion", ancho: "ancho", disabled: "disabled", oscuro: "oscuro", ariaLabel: "ariaLabel" }, outputs: { seleccion: "seleccion", abiertoChange: "abiertoChange" }, ngImport: i0, template: "<button\n #origen=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"td-menu__trigger\"\n [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"abierto\"\n aria-haspopup=\"menu\"\n (click)=\"alternar()\"\n>\n @if (icono) {\n <td-icon [nombre]=\"icono\" />\n }\n @if (etiqueta) {\n <span>{{ etiqueta }}</span>\n <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n }\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origen\"\n [cdkConnectedOverlayOpen]=\"abierto\"\n [cdkConnectedOverlayPositions]=\"posiciones()\"\n [cdkConnectedOverlayHasBackdrop]=\"
|
|
1356
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdMenu, isStandalone: true, selector: "td-menu", inputs: { items: "items", etiqueta: "etiqueta", icono: "icono", posicion: "posicion", ancho: "ancho", disabled: "disabled", oscuro: "oscuro", ariaLabel: "ariaLabel" }, outputs: { seleccion: "seleccion", abiertoChange: "abiertoChange" }, ngImport: i0, template: "<button\n #origen=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"td-menu__trigger\"\n [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"abierto\"\n aria-haspopup=\"menu\"\n (click)=\"alternar()\"\n>\n @if (icono) {\n <td-icon [nombre]=\"icono\" />\n }\n @if (etiqueta) {\n <span>{{ etiqueta }}</span>\n <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n }\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origen\"\n [cdkConnectedOverlayOpen]=\"abierto\"\n [cdkConnectedOverlayPositions]=\"posiciones()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayPanelClass]=\"'td-menu__overlay'\"\n (overlayOutsideClick)=\"cerrar()\"\n (detach)=\"cerrar()\"\n>\n <div\n class=\"td-menu\"\n [class.td-menu--oscuro]=\"oscuro\"\n [style.width]=\"ancho\"\n role=\"menu\"\n >\n @for (item of itemsVisibles; track item.id) {\n @if (item.separadorAntes) {\n <span class=\"td-menu__separador\" aria-hidden=\"true\"></span>\n }\n <button\n type=\"button\"\n role=\"menuitem\"\n [class]=\"'td-menu__item td-menu__item--' + (item.tono || 'neutro')\"\n [disabled]=\"item.deshabilitado\"\n (click)=\"seleccionar(item)\"\n >\n @if (item.icono) {\n <span class=\"td-menu__icono\">\n <td-icon [nombre]=\"item.icono\" />\n </span>\n }\n <span class=\"td-menu__texto\">\n <strong>{{ item.etiqueta }}</strong>\n @if (item.descripcion) {\n <small>{{ item.descripcion }}</small>\n }\n </span>\n @if (badgeConfig(item); as badge) {\n <td-badge\n class=\"td-menu__badge\"\n [tone]=\"badge.tone || 'neutral'\"\n [variant]=\"badge.variant || 'soft'\"\n [size]=\"badge.size || 'sm'\"\n [icon]=\"badge.icono || ''\"\n [dot]=\"badge.dot || false\"\n [pill]=\"badge.pill ?? true\"\n [ariaLabel]=\"badge.ariaLabel || ''\"\n >\n {{ badge.etiqueta }}\n </td-badge>\n }\n </button>\n } @empty {\n <div class=\"td-menu__vacio\">\n <td-icon nombre=\"inbox\" />\n <span>Sin opciones disponibles</span>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-menu__trigger{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-md, .85rem);padding:0 .8rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xs, 0 6px 16px rgba(31, 42, 68, .06));font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}.td-menu__trigger:hover:not(:disabled),.td-menu__trigger[aria-expanded=true]{border-color:var(--td-color-primary, #5746d8);color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .14))}.td-menu__trigger:disabled{opacity:.55;cursor:not-allowed}.td-menu__trigger--icon-only{width:2.35rem;padding:0}.td-menu{overflow:hidden;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-lg, 1rem);padding:.35rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-lg, 0 22px 52px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-menu--oscuro{border-color:var(--td-color-border, #2d3342);color:var(--td-color-text, #f8fafc);background:var(--td-color-surface, #111827)}.td-menu__item{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:var(--td-radius-md, .75rem);padding:.62rem .7rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-menu__item:hover:not(:disabled),.td-menu__item:focus-visible{outline:none;background:var(--td-color-primary-soft, #eef2ff)}.td-menu__item:disabled{opacity:.45;cursor:not-allowed}.td-menu__item--primario{color:var(--td-color-primary, #5746d8)}.td-menu__item--exito{color:var(--td-color-success, #07845c)}.td-menu__item--advertencia{color:var(--td-color-warning, #b7791f)}.td-menu__item--peligro{color:var(--td-color-danger, #dc2626)}.td-menu__icono{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .6rem);background:color-mix(in srgb,currentColor 10%,transparent)}.td-menu__texto{display:grid;flex:1 1 auto;min-width:0;gap:.12rem}.td-menu__badge{flex:0 0 auto;max-width:6.5rem}.td-menu__texto strong,.td-menu__texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-menu__texto strong{font-size:.78rem}.td-menu__texto small{color:var(--td-color-text-muted, #64748b);font-size:.68rem;font-weight:650}.td-menu__separador{display:block;height:1px;margin:.35rem .45rem;background:var(--td-color-border, #d9e1ee)}.td-menu__vacio{display:grid;min-height:5.5rem;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #64748b);font-size:.75rem;font-weight:750}\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"] }, { kind: "component", type: TdBadge, selector: "td-badge", inputs: ["tone", "variant", "size", "value", "position", "icon", "floating", "hidden", "dot", "pill", "aria-label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1188
1357
|
}
|
|
1189
1358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdMenu, decorators: [{
|
|
1190
1359
|
type: Component,
|
|
1191
|
-
args: [{ selector: 'td-menu', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #origen=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"td-menu__trigger\"\n [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"abierto\"\n aria-haspopup=\"menu\"\n (click)=\"alternar()\"\n>\n @if (icono) {\n <td-icon [nombre]=\"icono\" />\n }\n @if (etiqueta) {\n <span>{{ etiqueta }}</span>\n <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n }\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origen\"\n [cdkConnectedOverlayOpen]=\"abierto\"\n [cdkConnectedOverlayPositions]=\"posiciones()\"\n [cdkConnectedOverlayHasBackdrop]=\"
|
|
1360
|
+
args: [{ selector: 'td-menu', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon, TdBadge], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #origen=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"td-menu__trigger\"\n [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"abierto\"\n aria-haspopup=\"menu\"\n (click)=\"alternar()\"\n>\n @if (icono) {\n <td-icon [nombre]=\"icono\" />\n }\n @if (etiqueta) {\n <span>{{ etiqueta }}</span>\n <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n }\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origen\"\n [cdkConnectedOverlayOpen]=\"abierto\"\n [cdkConnectedOverlayPositions]=\"posiciones()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n [cdkConnectedOverlayPanelClass]=\"'td-menu__overlay'\"\n (overlayOutsideClick)=\"cerrar()\"\n (detach)=\"cerrar()\"\n>\n <div\n class=\"td-menu\"\n [class.td-menu--oscuro]=\"oscuro\"\n [style.width]=\"ancho\"\n role=\"menu\"\n >\n @for (item of itemsVisibles; track item.id) {\n @if (item.separadorAntes) {\n <span class=\"td-menu__separador\" aria-hidden=\"true\"></span>\n }\n <button\n type=\"button\"\n role=\"menuitem\"\n [class]=\"'td-menu__item td-menu__item--' + (item.tono || 'neutro')\"\n [disabled]=\"item.deshabilitado\"\n (click)=\"seleccionar(item)\"\n >\n @if (item.icono) {\n <span class=\"td-menu__icono\">\n <td-icon [nombre]=\"item.icono\" />\n </span>\n }\n <span class=\"td-menu__texto\">\n <strong>{{ item.etiqueta }}</strong>\n @if (item.descripcion) {\n <small>{{ item.descripcion }}</small>\n }\n </span>\n @if (badgeConfig(item); as badge) {\n <td-badge\n class=\"td-menu__badge\"\n [tone]=\"badge.tone || 'neutral'\"\n [variant]=\"badge.variant || 'soft'\"\n [size]=\"badge.size || 'sm'\"\n [icon]=\"badge.icono || ''\"\n [dot]=\"badge.dot || false\"\n [pill]=\"badge.pill ?? true\"\n [ariaLabel]=\"badge.ariaLabel || ''\"\n >\n {{ badge.etiqueta }}\n </td-badge>\n }\n </button>\n } @empty {\n <div class=\"td-menu__vacio\">\n <td-icon nombre=\"inbox\" />\n <span>Sin opciones disponibles</span>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-menu__trigger{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-md, .85rem);padding:0 .8rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xs, 0 6px 16px rgba(31, 42, 68, .06));font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}.td-menu__trigger:hover:not(:disabled),.td-menu__trigger[aria-expanded=true]{border-color:var(--td-color-primary, #5746d8);color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .14))}.td-menu__trigger:disabled{opacity:.55;cursor:not-allowed}.td-menu__trigger--icon-only{width:2.35rem;padding:0}.td-menu{overflow:hidden;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-lg, 1rem);padding:.35rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-lg, 0 22px 52px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-menu--oscuro{border-color:var(--td-color-border, #2d3342);color:var(--td-color-text, #f8fafc);background:var(--td-color-surface, #111827)}.td-menu__item{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:var(--td-radius-md, .75rem);padding:.62rem .7rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-menu__item:hover:not(:disabled),.td-menu__item:focus-visible{outline:none;background:var(--td-color-primary-soft, #eef2ff)}.td-menu__item:disabled{opacity:.45;cursor:not-allowed}.td-menu__item--primario{color:var(--td-color-primary, #5746d8)}.td-menu__item--exito{color:var(--td-color-success, #07845c)}.td-menu__item--advertencia{color:var(--td-color-warning, #b7791f)}.td-menu__item--peligro{color:var(--td-color-danger, #dc2626)}.td-menu__icono{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .6rem);background:color-mix(in srgb,currentColor 10%,transparent)}.td-menu__texto{display:grid;flex:1 1 auto;min-width:0;gap:.12rem}.td-menu__badge{flex:0 0 auto;max-width:6.5rem}.td-menu__texto strong,.td-menu__texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-menu__texto strong{font-size:.78rem}.td-menu__texto small{color:var(--td-color-text-muted, #64748b);font-size:.68rem;font-weight:650}.td-menu__separador{display:block;height:1px;margin:.35rem .45rem;background:var(--td-color-border, #d9e1ee)}.td-menu__vacio{display:grid;min-height:5.5rem;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #64748b);font-size:.75rem;font-weight:750}\n"] }]
|
|
1192
1361
|
}], propDecorators: { items: [{
|
|
1193
1362
|
type: Input
|
|
1194
1363
|
}], etiqueta: [{
|
|
@@ -1528,11 +1697,11 @@ class TdDataTable {
|
|
|
1528
1697
|
}
|
|
1529
1698
|
}
|
|
1530
1699
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1531
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @if (usarMenuAcciones(fila)) {\n <td-menu\n ariaLabel=\"Acciones de fila\"\n icono=\"more_vertical\"\n ancho=\"15rem\"\n [oscuro]=\"oscuro\"\n [items]=\"accionesMenu(fila)\"\n (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n />\n } @else {\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{padding:.75rem}.td-tabla-imagen{width:calc(100vw - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1700
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", accionesPresentacion: "accionesPresentacion", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @if (usarMenuAcciones(fila)) {\n <td-menu\n ariaLabel=\"Acciones de fila\"\n icono=\"more_vertical\"\n ancho=\"15rem\"\n [oscuro]=\"oscuro\"\n [items]=\"accionesMenu(fila)\"\n (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n />\n } @else {\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }, { kind: "component", type: TdMenu, selector: "td-menu", inputs: ["items", "etiqueta", "icono", "posicion", "ancho", "disabled", "oscuro", "ariaLabel"], outputs: ["seleccion", "abiertoChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1532
1701
|
}
|
|
1533
1702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, decorators: [{
|
|
1534
1703
|
type: Component,
|
|
1535
|
-
args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @if (usarMenuAcciones(fila)) {\n <td-menu\n ariaLabel=\"Acciones de fila\"\n icono=\"more_vertical\"\n ancho=\"15rem\"\n [oscuro]=\"oscuro\"\n [items]=\"accionesMenu(fila)\"\n (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n />\n } @else {\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{padding:.75rem}.td-tabla-imagen{width:calc(100vw - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"] }]
|
|
1704
|
+
args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, ScrollingModule, TdIcon, TdMenu], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @if (usarMenuAcciones(fila)) {\n <td-menu\n ariaLabel=\"Acciones de fila\"\n icono=\"more_vertical\"\n ancho=\"15rem\"\n [oscuro]=\"oscuro\"\n [items]=\"accionesMenu(fila)\"\n (seleccion)=\"ejecutarAccionMenu($event, fila, indice)\"\n />\n } @else {\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n }\n </div>\n }\n </div>\n </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__acciones-fila td-menu{line-height:1}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{position:fixed;inset:0;width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);margin:auto;border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"] }]
|
|
1536
1705
|
}], propDecorators: { viewport: [{
|
|
1537
1706
|
type: ViewChild,
|
|
1538
1707
|
args: [CdkVirtualScrollViewport]
|
|
@@ -3693,6 +3862,8 @@ class TdInput {
|
|
|
3693
3862
|
return this.hasSupportingContent() ? `${this.inputId}-description` : null;
|
|
3694
3863
|
}
|
|
3695
3864
|
get resolvedType() {
|
|
3865
|
+
if (this.isDecimalMask())
|
|
3866
|
+
return 'text';
|
|
3696
3867
|
return this.type === 'password' && this.passwordVisible ? 'text' : this.type;
|
|
3697
3868
|
}
|
|
3698
3869
|
onChange = () => undefined;
|
|
@@ -3759,7 +3930,7 @@ class TdInput {
|
|
|
3759
3930
|
if (!value) {
|
|
3760
3931
|
return this.resolveEmptyValue();
|
|
3761
3932
|
}
|
|
3762
|
-
if (this.type !== 'number' || !this.formBridge.usesSignalForms) {
|
|
3933
|
+
if (this.isDecimalMask() || this.type !== 'number' || !this.formBridge.usesSignalForms) {
|
|
3763
3934
|
return value;
|
|
3764
3935
|
}
|
|
3765
3936
|
const numericValue = inputElement.valueAsNumber;
|
|
@@ -6049,6 +6220,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6049
6220
|
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
6050
6221
|
|
|
6051
6222
|
class TdSidebar {
|
|
6223
|
+
router = inject(Router);
|
|
6224
|
+
destroyRef = inject(DestroyRef);
|
|
6052
6225
|
titulo = 'Gestión Corporativa';
|
|
6053
6226
|
subtitulo = 'Central Platform';
|
|
6054
6227
|
etiquetaNavegacion = 'Navegación';
|
|
@@ -6068,6 +6241,7 @@ class TdSidebar {
|
|
|
6068
6241
|
}
|
|
6069
6242
|
set menu(value) {
|
|
6070
6243
|
this.menuNormalizado.set(this.normalizarMenu(value ?? []));
|
|
6244
|
+
this.expandirRutaActual();
|
|
6071
6245
|
}
|
|
6072
6246
|
get menu() {
|
|
6073
6247
|
return this.menuNormalizado();
|
|
@@ -6080,6 +6254,11 @@ class TdSidebar {
|
|
|
6080
6254
|
...(ngDevMode ? [{ debugName: "menuNormalizado" }] : /* istanbul ignore next */ []));
|
|
6081
6255
|
expandidos = signal(new Set(), /* @ts-ignore */
|
|
6082
6256
|
...(ngDevMode ? [{ debugName: "expandidos" }] : /* istanbul ignore next */ []));
|
|
6257
|
+
constructor() {
|
|
6258
|
+
this.router.events
|
|
6259
|
+
.pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
|
|
6260
|
+
.subscribe(() => this.expandirRutaActual());
|
|
6261
|
+
}
|
|
6083
6262
|
alternarGrupo(clave) {
|
|
6084
6263
|
if (!this.abiertoInterno()) {
|
|
6085
6264
|
this.abiertoInterno.set(true);
|
|
@@ -6112,13 +6291,46 @@ class TdSidebar {
|
|
|
6112
6291
|
subMenus: this.normalizarMenu(item.subMenus ?? []),
|
|
6113
6292
|
}));
|
|
6114
6293
|
}
|
|
6294
|
+
expandirRutaActual() {
|
|
6295
|
+
const rutaActual = this.normalizarRuta(this.router.url);
|
|
6296
|
+
const clavesPadre = this.buscarClavesPadrePorRuta(this.menuNormalizado(), rutaActual);
|
|
6297
|
+
if (!clavesPadre.length)
|
|
6298
|
+
return;
|
|
6299
|
+
this.expandidos.update((actuales) => {
|
|
6300
|
+
const siguientes = new Set(actuales);
|
|
6301
|
+
clavesPadre.forEach((clave) => siguientes.add(clave));
|
|
6302
|
+
return siguientes;
|
|
6303
|
+
});
|
|
6304
|
+
}
|
|
6305
|
+
buscarClavesPadrePorRuta(items, rutaActual, padre = 'raiz', ancestros = []) {
|
|
6306
|
+
for (let indice = 0; indice < items.length; indice += 1) {
|
|
6307
|
+
const item = items[indice];
|
|
6308
|
+
const clave = this.claveItem(item, padre, indice);
|
|
6309
|
+
const ruta = this.normalizarRuta(item.ruta);
|
|
6310
|
+
if (ruta && ruta === rutaActual) {
|
|
6311
|
+
return ancestros;
|
|
6312
|
+
}
|
|
6313
|
+
const resultado = this.buscarClavesPadrePorRuta(item.subMenus ?? [], rutaActual, clave, [...ancestros, clave]);
|
|
6314
|
+
if (resultado.length)
|
|
6315
|
+
return resultado;
|
|
6316
|
+
}
|
|
6317
|
+
return [];
|
|
6318
|
+
}
|
|
6319
|
+
normalizarRuta(ruta) {
|
|
6320
|
+
if (!ruta)
|
|
6321
|
+
return '';
|
|
6322
|
+
const limpia = ruta.split('?')[0].split('#')[0].trim();
|
|
6323
|
+
if (!limpia || limpia === '/')
|
|
6324
|
+
return '/';
|
|
6325
|
+
return limpia.endsWith('/') ? limpia.slice(0, -1) : limpia;
|
|
6326
|
+
}
|
|
6115
6327
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6116
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 [
|
|
6328
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 [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: true }\"\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:var(--td-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:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #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:var(--td-radius-sm, .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", "browserUrl", "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 });
|
|
6117
6329
|
}
|
|
6118
6330
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, decorators: [{
|
|
6119
6331
|
type: Component,
|
|
6120
|
-
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 [
|
|
6121
|
-
}], propDecorators: { titulo: [{
|
|
6332
|
+
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 [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: true }\"\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:var(--td-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:var(--td-radius-md, .75rem);color:var(--td-color-on-primary, #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:var(--td-radius-sm, .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"] }]
|
|
6333
|
+
}], ctorParameters: () => [], propDecorators: { titulo: [{
|
|
6122
6334
|
type: Input
|
|
6123
6335
|
}], subtitulo: [{
|
|
6124
6336
|
type: Input
|
|
@@ -6560,6 +6772,260 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6560
6772
|
args: [{ providedIn: 'root' }]
|
|
6561
6773
|
}], ctorParameters: () => [] });
|
|
6562
6774
|
|
|
6775
|
+
class TdTooltipPanel {
|
|
6776
|
+
id = '';
|
|
6777
|
+
content = '';
|
|
6778
|
+
position = 'top';
|
|
6779
|
+
tone = 'dark';
|
|
6780
|
+
maxWidth = '18rem';
|
|
6781
|
+
multiline = false;
|
|
6782
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTooltipPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6783
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.4", type: TdTooltipPanel, isStandalone: true, selector: "td-tooltip-panel", inputs: { id: "id", content: "content", position: "position", tone: "tone", maxWidth: "maxWidth", multiline: ["multiline", "multiline", booleanAttribute] }, ngImport: i0, template: `
|
|
6784
|
+
<div
|
|
6785
|
+
class="td-tooltip"
|
|
6786
|
+
[class]="'td-tooltip td-tooltip--' + tone + ' td-tooltip--' + position"
|
|
6787
|
+
[class.td-tooltip--multiline]="multiline"
|
|
6788
|
+
[id]="id"
|
|
6789
|
+
role="tooltip"
|
|
6790
|
+
[style.max-width]="maxWidth"
|
|
6791
|
+
>
|
|
6792
|
+
{{ content }}
|
|
6793
|
+
<span class="td-tooltip__arrow" aria-hidden="true"></span>
|
|
6794
|
+
</div>
|
|
6795
|
+
`, isInline: true, styles: [":host{display:contents;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tooltip{--td-tooltip-bg: #111827;--td-tooltip-text: #ffffff;position:relative;display:inline-flex;max-width:18rem;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--td-tooltip-bg) 78%,transparent);border-radius:var(--td-radius-sm, .55rem);padding:.48rem .65rem;color:var(--td-tooltip-text);background:var(--td-tooltip-bg);box-shadow:var(--td-shadow-lg, 0 18px 42px rgba(15, 23, 42, .18));font-size:.72rem;font-weight:750;line-height:1.35;letter-spacing:-.01em;pointer-events:none;text-align:center;white-space:nowrap;animation:td-tooltip-in .12s ease-out}.td-tooltip--multiline{align-items:flex-start;text-align:left;white-space:normal}.td-tooltip--light{--td-tooltip-bg: var(--td-color-surface, #ffffff);--td-tooltip-text: var(--td-color-text, #202b3d);border-color:var(--td-color-border, #d9e1ee)}.td-tooltip--primary{--td-tooltip-bg: var(--td-color-primary, #5746d8);--td-tooltip-text: var(--td-color-on-primary, #ffffff);border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 80%,transparent)}.td-tooltip__arrow{position:absolute;width:.58rem;height:.58rem;border:inherit;background:inherit;transform:rotate(45deg)}.td-tooltip--top .td-tooltip__arrow{bottom:-.32rem;left:calc(50% - .29rem);border-top:0;border-left:0}.td-tooltip--bottom .td-tooltip__arrow{top:-.32rem;left:calc(50% - .29rem);border-right:0;border-bottom:0}.td-tooltip--left .td-tooltip__arrow{right:-.32rem;top:calc(50% - .29rem);border-bottom:0;border-left:0}.td-tooltip--right .td-tooltip__arrow{left:-.32rem;top:calc(50% - .29rem);border-top:0;border-right:0}@keyframes td-tooltip-in{0%{opacity:0;transform:translateY(2px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6796
|
+
}
|
|
6797
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTooltipPanel, decorators: [{
|
|
6798
|
+
type: Component,
|
|
6799
|
+
args: [{ selector: 'td-tooltip-panel', template: `
|
|
6800
|
+
<div
|
|
6801
|
+
class="td-tooltip"
|
|
6802
|
+
[class]="'td-tooltip td-tooltip--' + tone + ' td-tooltip--' + position"
|
|
6803
|
+
[class.td-tooltip--multiline]="multiline"
|
|
6804
|
+
[id]="id"
|
|
6805
|
+
role="tooltip"
|
|
6806
|
+
[style.max-width]="maxWidth"
|
|
6807
|
+
>
|
|
6808
|
+
{{ content }}
|
|
6809
|
+
<span class="td-tooltip__arrow" aria-hidden="true"></span>
|
|
6810
|
+
</div>
|
|
6811
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:contents;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tooltip{--td-tooltip-bg: #111827;--td-tooltip-text: #ffffff;position:relative;display:inline-flex;max-width:18rem;align-items:center;justify-content:center;border:1px solid color-mix(in srgb,var(--td-tooltip-bg) 78%,transparent);border-radius:var(--td-radius-sm, .55rem);padding:.48rem .65rem;color:var(--td-tooltip-text);background:var(--td-tooltip-bg);box-shadow:var(--td-shadow-lg, 0 18px 42px rgba(15, 23, 42, .18));font-size:.72rem;font-weight:750;line-height:1.35;letter-spacing:-.01em;pointer-events:none;text-align:center;white-space:nowrap;animation:td-tooltip-in .12s ease-out}.td-tooltip--multiline{align-items:flex-start;text-align:left;white-space:normal}.td-tooltip--light{--td-tooltip-bg: var(--td-color-surface, #ffffff);--td-tooltip-text: var(--td-color-text, #202b3d);border-color:var(--td-color-border, #d9e1ee)}.td-tooltip--primary{--td-tooltip-bg: var(--td-color-primary, #5746d8);--td-tooltip-text: var(--td-color-on-primary, #ffffff);border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 80%,transparent)}.td-tooltip__arrow{position:absolute;width:.58rem;height:.58rem;border:inherit;background:inherit;transform:rotate(45deg)}.td-tooltip--top .td-tooltip__arrow{bottom:-.32rem;left:calc(50% - .29rem);border-top:0;border-left:0}.td-tooltip--bottom .td-tooltip__arrow{top:-.32rem;left:calc(50% - .29rem);border-right:0;border-bottom:0}.td-tooltip--left .td-tooltip__arrow{right:-.32rem;top:calc(50% - .29rem);border-bottom:0;border-left:0}.td-tooltip--right .td-tooltip__arrow{left:-.32rem;top:calc(50% - .29rem);border-top:0;border-right:0}@keyframes td-tooltip-in{0%{opacity:0;transform:translateY(2px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
|
|
6812
|
+
}], propDecorators: { id: [{
|
|
6813
|
+
type: Input
|
|
6814
|
+
}], content: [{
|
|
6815
|
+
type: Input
|
|
6816
|
+
}], position: [{
|
|
6817
|
+
type: Input
|
|
6818
|
+
}], tone: [{
|
|
6819
|
+
type: Input
|
|
6820
|
+
}], maxWidth: [{
|
|
6821
|
+
type: Input
|
|
6822
|
+
}], multiline: [{
|
|
6823
|
+
type: Input,
|
|
6824
|
+
args: [{ transform: booleanAttribute }]
|
|
6825
|
+
}] } });
|
|
6826
|
+
|
|
6827
|
+
let tooltipSequence = 0;
|
|
6828
|
+
class TdTooltip {
|
|
6829
|
+
overlay = inject(Overlay);
|
|
6830
|
+
elementRef = inject(ElementRef);
|
|
6831
|
+
viewContainerRef = inject(ViewContainerRef);
|
|
6832
|
+
renderer = inject(Renderer2);
|
|
6833
|
+
tooltipId = `td-tooltip-${++tooltipSequence}`;
|
|
6834
|
+
overlayRef;
|
|
6835
|
+
panelRef;
|
|
6836
|
+
showTimer;
|
|
6837
|
+
hideTimer;
|
|
6838
|
+
content = '';
|
|
6839
|
+
tdTooltipPosition = 'top';
|
|
6840
|
+
tdTooltipTone = 'dark';
|
|
6841
|
+
tdTooltipMaxWidth = '18rem';
|
|
6842
|
+
tdTooltipShowDelay = 250;
|
|
6843
|
+
tdTooltipHideDelay = 80;
|
|
6844
|
+
tdTooltipMultiline = false;
|
|
6845
|
+
tdTooltipDisabled = false;
|
|
6846
|
+
handleMouseEnter() {
|
|
6847
|
+
this.scheduleShow();
|
|
6848
|
+
}
|
|
6849
|
+
handleMouseLeave() {
|
|
6850
|
+
this.scheduleHide();
|
|
6851
|
+
}
|
|
6852
|
+
handleFocusIn() {
|
|
6853
|
+
this.scheduleShow();
|
|
6854
|
+
}
|
|
6855
|
+
handleFocusOut() {
|
|
6856
|
+
this.scheduleHide();
|
|
6857
|
+
}
|
|
6858
|
+
handleTouchStart() {
|
|
6859
|
+
this.showNow();
|
|
6860
|
+
this.scheduleHide(2200);
|
|
6861
|
+
}
|
|
6862
|
+
handleKeydown(event) {
|
|
6863
|
+
if (event.key === 'Escape')
|
|
6864
|
+
this.hideNow();
|
|
6865
|
+
}
|
|
6866
|
+
ngOnDestroy() {
|
|
6867
|
+
this.clearTimers();
|
|
6868
|
+
this.destroyOverlay();
|
|
6869
|
+
}
|
|
6870
|
+
scheduleShow(delay = this.tdTooltipShowDelay) {
|
|
6871
|
+
if (this.tdTooltipDisabled || !this.normalizedContent)
|
|
6872
|
+
return;
|
|
6873
|
+
clearTimeout(this.hideTimer);
|
|
6874
|
+
clearTimeout(this.showTimer);
|
|
6875
|
+
this.showTimer = setTimeout(() => this.showNow(), Math.max(0, delay));
|
|
6876
|
+
}
|
|
6877
|
+
scheduleHide(delay = this.tdTooltipHideDelay) {
|
|
6878
|
+
clearTimeout(this.showTimer);
|
|
6879
|
+
clearTimeout(this.hideTimer);
|
|
6880
|
+
this.hideTimer = setTimeout(() => this.hideNow(), Math.max(0, delay));
|
|
6881
|
+
}
|
|
6882
|
+
showNow() {
|
|
6883
|
+
if (this.tdTooltipDisabled || !this.normalizedContent)
|
|
6884
|
+
return;
|
|
6885
|
+
const overlayRef = this.ensureOverlay();
|
|
6886
|
+
const positionStrategy = overlayRef.getConfig().positionStrategy;
|
|
6887
|
+
if (this.isFlexiblePositionStrategy(positionStrategy)) {
|
|
6888
|
+
positionStrategy.withPositions(this.positions());
|
|
6889
|
+
}
|
|
6890
|
+
if (!overlayRef.hasAttached()) {
|
|
6891
|
+
const portal = new ComponentPortal(TdTooltipPanel, this.viewContainerRef);
|
|
6892
|
+
this.panelRef = overlayRef.attach(portal);
|
|
6893
|
+
}
|
|
6894
|
+
this.panelRef?.setInput('id', this.tooltipId);
|
|
6895
|
+
this.panelRef?.setInput('content', this.normalizedContent);
|
|
6896
|
+
this.panelRef?.setInput('position', this.tdTooltipPosition);
|
|
6897
|
+
this.panelRef?.setInput('tone', this.tdTooltipTone);
|
|
6898
|
+
this.panelRef?.setInput('maxWidth', this.tdTooltipMaxWidth);
|
|
6899
|
+
this.panelRef?.setInput('multiline', this.tdTooltipMultiline);
|
|
6900
|
+
this.renderer.setAttribute(this.elementRef.nativeElement, 'aria-describedby', this.tooltipId);
|
|
6901
|
+
}
|
|
6902
|
+
hideNow() {
|
|
6903
|
+
this.overlayRef?.detach();
|
|
6904
|
+
this.panelRef = undefined;
|
|
6905
|
+
this.renderer.removeAttribute(this.elementRef.nativeElement, 'aria-describedby');
|
|
6906
|
+
}
|
|
6907
|
+
ensureOverlay() {
|
|
6908
|
+
if (this.overlayRef)
|
|
6909
|
+
return this.overlayRef;
|
|
6910
|
+
this.overlayRef = this.overlay.create({
|
|
6911
|
+
positionStrategy: this.overlay
|
|
6912
|
+
.position()
|
|
6913
|
+
.flexibleConnectedTo(this.elementRef)
|
|
6914
|
+
.withPositions(this.positions())
|
|
6915
|
+
.withFlexibleDimensions(false)
|
|
6916
|
+
.withPush(true),
|
|
6917
|
+
scrollStrategy: this.overlay.scrollStrategies.reposition(),
|
|
6918
|
+
panelClass: 'td-tooltip-overlay',
|
|
6919
|
+
});
|
|
6920
|
+
return this.overlayRef;
|
|
6921
|
+
}
|
|
6922
|
+
positions() {
|
|
6923
|
+
const offset = 8;
|
|
6924
|
+
const map = {
|
|
6925
|
+
top: [
|
|
6926
|
+
{
|
|
6927
|
+
originX: 'center',
|
|
6928
|
+
originY: 'top',
|
|
6929
|
+
overlayX: 'center',
|
|
6930
|
+
overlayY: 'bottom',
|
|
6931
|
+
offsetY: -offset,
|
|
6932
|
+
},
|
|
6933
|
+
],
|
|
6934
|
+
bottom: [
|
|
6935
|
+
{
|
|
6936
|
+
originX: 'center',
|
|
6937
|
+
originY: 'bottom',
|
|
6938
|
+
overlayX: 'center',
|
|
6939
|
+
overlayY: 'top',
|
|
6940
|
+
offsetY: offset,
|
|
6941
|
+
},
|
|
6942
|
+
],
|
|
6943
|
+
left: [
|
|
6944
|
+
{
|
|
6945
|
+
originX: 'start',
|
|
6946
|
+
originY: 'center',
|
|
6947
|
+
overlayX: 'end',
|
|
6948
|
+
overlayY: 'center',
|
|
6949
|
+
offsetX: -offset,
|
|
6950
|
+
},
|
|
6951
|
+
],
|
|
6952
|
+
right: [
|
|
6953
|
+
{
|
|
6954
|
+
originX: 'end',
|
|
6955
|
+
originY: 'center',
|
|
6956
|
+
overlayX: 'start',
|
|
6957
|
+
overlayY: 'center',
|
|
6958
|
+
offsetX: offset,
|
|
6959
|
+
},
|
|
6960
|
+
],
|
|
6961
|
+
};
|
|
6962
|
+
return map[this.tdTooltipPosition];
|
|
6963
|
+
}
|
|
6964
|
+
get normalizedContent() {
|
|
6965
|
+
return String(this.content ?? '').trim();
|
|
6966
|
+
}
|
|
6967
|
+
clearTimers() {
|
|
6968
|
+
clearTimeout(this.showTimer);
|
|
6969
|
+
clearTimeout(this.hideTimer);
|
|
6970
|
+
}
|
|
6971
|
+
destroyOverlay() {
|
|
6972
|
+
this.hideNow();
|
|
6973
|
+
this.overlayRef?.dispose();
|
|
6974
|
+
this.overlayRef = undefined;
|
|
6975
|
+
}
|
|
6976
|
+
isFlexiblePositionStrategy(strategy) {
|
|
6977
|
+
return !!strategy && typeof strategy.withPositions === 'function';
|
|
6978
|
+
}
|
|
6979
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
6980
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.0.4", type: TdTooltip, isStandalone: true, selector: "[tdTooltip]", inputs: { content: ["tdTooltip", "content"], tdTooltipPosition: "tdTooltipPosition", tdTooltipTone: "tdTooltipTone", tdTooltipMaxWidth: "tdTooltipMaxWidth", tdTooltipShowDelay: ["tdTooltipShowDelay", "tdTooltipShowDelay", numberAttribute], tdTooltipHideDelay: ["tdTooltipHideDelay", "tdTooltipHideDelay", numberAttribute], tdTooltipMultiline: ["tdTooltipMultiline", "tdTooltipMultiline", booleanAttribute], tdTooltipDisabled: ["tdTooltipDisabled", "tdTooltipDisabled", booleanAttribute] }, host: { listeners: { "mouseenter": "handleMouseEnter()", "mouseleave": "handleMouseLeave()", "focusin": "handleFocusIn()", "focusout": "handleFocusOut()", "touchstart": "handleTouchStart()", "keydown": "handleKeydown($event)" } }, ngImport: i0 });
|
|
6981
|
+
}
|
|
6982
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTooltip, decorators: [{
|
|
6983
|
+
type: Directive,
|
|
6984
|
+
args: [{
|
|
6985
|
+
selector: '[tdTooltip]',
|
|
6986
|
+
standalone: true,
|
|
6987
|
+
}]
|
|
6988
|
+
}], propDecorators: { content: [{
|
|
6989
|
+
type: Input,
|
|
6990
|
+
args: ['tdTooltip']
|
|
6991
|
+
}], tdTooltipPosition: [{
|
|
6992
|
+
type: Input
|
|
6993
|
+
}], tdTooltipTone: [{
|
|
6994
|
+
type: Input
|
|
6995
|
+
}], tdTooltipMaxWidth: [{
|
|
6996
|
+
type: Input
|
|
6997
|
+
}], tdTooltipShowDelay: [{
|
|
6998
|
+
type: Input,
|
|
6999
|
+
args: [{ transform: numberAttribute }]
|
|
7000
|
+
}], tdTooltipHideDelay: [{
|
|
7001
|
+
type: Input,
|
|
7002
|
+
args: [{ transform: numberAttribute }]
|
|
7003
|
+
}], tdTooltipMultiline: [{
|
|
7004
|
+
type: Input,
|
|
7005
|
+
args: [{ transform: booleanAttribute }]
|
|
7006
|
+
}], tdTooltipDisabled: [{
|
|
7007
|
+
type: Input,
|
|
7008
|
+
args: [{ transform: booleanAttribute }]
|
|
7009
|
+
}], handleMouseEnter: [{
|
|
7010
|
+
type: HostListener,
|
|
7011
|
+
args: ['mouseenter']
|
|
7012
|
+
}], handleMouseLeave: [{
|
|
7013
|
+
type: HostListener,
|
|
7014
|
+
args: ['mouseleave']
|
|
7015
|
+
}], handleFocusIn: [{
|
|
7016
|
+
type: HostListener,
|
|
7017
|
+
args: ['focusin']
|
|
7018
|
+
}], handleFocusOut: [{
|
|
7019
|
+
type: HostListener,
|
|
7020
|
+
args: ['focusout']
|
|
7021
|
+
}], handleTouchStart: [{
|
|
7022
|
+
type: HostListener,
|
|
7023
|
+
args: ['touchstart']
|
|
7024
|
+
}], handleKeydown: [{
|
|
7025
|
+
type: HostListener,
|
|
7026
|
+
args: ['keydown', ['$event']]
|
|
7027
|
+
}] } });
|
|
7028
|
+
|
|
6563
7029
|
/*
|
|
6564
7030
|
* Public API Surface of telcomdev-ui
|
|
6565
7031
|
*/
|
|
@@ -6568,5 +7034,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
6568
7034
|
* Generated bundle index. Do not edit.
|
|
6569
7035
|
*/
|
|
6570
7036
|
|
|
6571
|
-
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, TdFileUpload, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdRadioGroup, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TelcomdevUi, createTdFormControlBridge };
|
|
7037
|
+
export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdBadge, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFileUpload, TdFileViewer, TdFileViewerService, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdRadioGroup, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TdTooltip, TelcomdevUi, createTdFormControlBridge };
|
|
6572
7038
|
//# sourceMappingURL=telcomdev-ui.mjs.map
|