@telcomdev/ui 0.1.6 → 0.1.7
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 +46 -0
- package/fesm2022/telcomdev-ui.mjs +349 -26
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/lib/theme/td-material-theme.css +46 -0
- package/lib/theme/td-theme.css +80 -0
- package/package.json +1 -1
- package/types/telcomdev-ui.d.ts +75 -3
|
@@ -196,7 +196,7 @@ class TdAlerta {
|
|
|
196
196
|
text-align: center;
|
|
197
197
|
box-shadow: 0 22px 70px rgba(15, 23, 42, 0.28);
|
|
198
198
|
animation: td-alerta-modal-entrada 180ms ease-out;
|
|
199
|
-
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
199
|
+
font-family: var(--td-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
|
|
200
200
|
}
|
|
201
201
|
|
|
202
202
|
.td-alerta-icono {
|
|
@@ -761,7 +761,7 @@ class TdButton {
|
|
|
761
761
|
<td-icon [nombre]="icon" />
|
|
762
762
|
}
|
|
763
763
|
</button>
|
|
764
|
-
`, isInline: true, styles: [":host{display:inline-block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
764
|
+
`, isInline: true, styles: [":host{display:inline-block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
765
765
|
}
|
|
766
766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdButton, decorators: [{
|
|
767
767
|
type: Component,
|
|
@@ -796,7 +796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
796
796
|
<td-icon [nombre]="icon" />
|
|
797
797
|
}
|
|
798
798
|
</button>
|
|
799
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
799
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
800
800
|
}], propDecorators: { contentRef: [{
|
|
801
801
|
type: ViewChild,
|
|
802
802
|
args: ['content', { static: true }]
|
|
@@ -993,7 +993,7 @@ class TdCheckbox {
|
|
|
993
993
|
{{ displayError() || hint() }}
|
|
994
994
|
</p>
|
|
995
995
|
}
|
|
996
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: var(--td-color-surface, #fff);--td-checkbox-border: var(--td-color-border-strong, #cfd5e1);--td-checkbox-text: var(--td-color-text, #263147);--td-checkbox-muted: var(--td-color-text-muted, #748096);display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: var(--td-color-surface, #19191f);--td-checkbox-border: var(--td-color-border-strong, #555563);--td-checkbox-text: var(--td-color-text, #ededf0);--td-checkbox-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius
|
|
996
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: var(--td-color-surface, #fff);--td-checkbox-border: var(--td-color-border-strong, #cfd5e1);--td-checkbox-text: var(--td-color-text, #263147);--td-checkbox-muted: var(--td-color-text-muted, #748096);display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: var(--td-color-surface, #19191f);--td-checkbox-border: var(--td-color-border-strong, #555563);--td-checkbox-text: var(--td-color-text, #ededf0);--td-checkbox-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius:var(--td-radius-sm, .38rem);color:var(--td-color-on-primary, #fff);background:var(--td-checkbox-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-checkbox:hover:not(.td-checkbox--disabled):not(.td-checkbox--readonly) .td-checkbox__box{border-color:var(--td-color-primary, #5746d8)}.td-checkbox--checked .td-checkbox__box{border-color:var(--td-color-primary, #5746d8);background:var(--td-color-primary, #5746d8)}input:focus-visible+.td-checkbox__box{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .16))}input:active+.td-checkbox__box{transform:scale(.94)}.td-checkbox--error .td-checkbox__box{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-checkbox--disabled{opacity:.56;cursor:not-allowed}.td-checkbox--readonly{cursor:default}.td-checkbox__content{display:grid;min-width:0;gap:.15rem}.td-checkbox__label{font-size:.78rem;font-weight:700;line-height:1.35}.td-checkbox__description{color:var(--td-checkbox-muted);font-size:.68rem;line-height:1.4}.td-checkbox__message{margin:.35rem 0 0 1.97rem;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-checkbox__message--error{color:var(--td-color-danger, #c43636)}.td-checkbox--dark+.td-checkbox__message{color:var(--td-color-text-muted, #a1a1aa)}.td-checkbox--dark+.td-checkbox__message--error{color:var(--td-color-danger, #f28b8b)}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
997
997
|
}
|
|
998
998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdCheckbox, decorators: [{
|
|
999
999
|
type: Component,
|
|
@@ -1055,7 +1055,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1055
1055
|
], host: {
|
|
1056
1056
|
'[hidden]': 'hidden()',
|
|
1057
1057
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
1058
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: var(--td-color-surface, #fff);--td-checkbox-border: var(--td-color-border-strong, #cfd5e1);--td-checkbox-text: var(--td-color-text, #263147);--td-checkbox-muted: var(--td-color-text-muted, #748096);display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: var(--td-color-surface, #19191f);--td-checkbox-border: var(--td-color-border-strong, #555563);--td-checkbox-text: var(--td-color-text, #ededf0);--td-checkbox-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius
|
|
1058
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-checkbox{--td-checkbox-bg: var(--td-color-surface, #fff);--td-checkbox-border: var(--td-color-border-strong, #cfd5e1);--td-checkbox-text: var(--td-color-text, #263147);--td-checkbox-muted: var(--td-color-text-muted, #748096);display:inline-flex;max-width:100%;align-items:flex-start;gap:.72rem;color:var(--td-checkbox-text);cursor:pointer;-webkit-user-select:none;user-select:none}.td-checkbox--dark{--td-checkbox-bg: var(--td-color-surface, #19191f);--td-checkbox-border: var(--td-color-border-strong, #555563);--td-checkbox-text: var(--td-color-text, #ededf0);--td-checkbox-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.td-checkbox__box{display:grid;width:1.25rem;height:1.25rem;flex:0 0 auto;place-items:center;margin-top:.05rem;border:1.5px solid var(--td-checkbox-border);border-radius:var(--td-radius-sm, .38rem);color:var(--td-color-on-primary, #fff);background:var(--td-checkbox-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease,transform .1s ease}.td-checkbox:hover:not(.td-checkbox--disabled):not(.td-checkbox--readonly) .td-checkbox__box{border-color:var(--td-color-primary, #5746d8)}.td-checkbox--checked .td-checkbox__box{border-color:var(--td-color-primary, #5746d8);background:var(--td-color-primary, #5746d8)}input:focus-visible+.td-checkbox__box{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .16))}input:active+.td-checkbox__box{transform:scale(.94)}.td-checkbox--error .td-checkbox__box{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-checkbox--disabled{opacity:.56;cursor:not-allowed}.td-checkbox--readonly{cursor:default}.td-checkbox__content{display:grid;min-width:0;gap:.15rem}.td-checkbox__label{font-size:.78rem;font-weight:700;line-height:1.35}.td-checkbox__description{color:var(--td-checkbox-muted);font-size:.68rem;line-height:1.4}.td-checkbox__message{margin:.35rem 0 0 1.97rem;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-checkbox__message--error{color:var(--td-color-danger, #c43636)}.td-checkbox--dark+.td-checkbox__message{color:var(--td-color-text-muted, #a1a1aa)}.td-checkbox--dark+.td-checkbox__message--error{color:var(--td-color-danger, #f28b8b)}\n"] }]
|
|
1059
1059
|
}], propDecorators: { nativeInput: [{
|
|
1060
1060
|
type: ViewChild,
|
|
1061
1061
|
args: ['nativeInput']
|
|
@@ -1173,11 +1173,11 @@ class TdDataTable {
|
|
|
1173
1173
|
}
|
|
1174
1174
|
trackFila = (_indice, fila) => fila[this.campoId] ?? fila;
|
|
1175
1175
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1176
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div\n class=\"td-tabla__encabezado\"\n role=\"row\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scrolledIndexChange)=\"alCambiarIndice()\"\n >\n <div\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:#fff;background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:#fff;background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:#fff;background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1176
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div\n class=\"td-tabla__encabezado\"\n role=\"row\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scrolledIndexChange)=\"alCambiarIndice()\"\n >\n <div\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .75rem);padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .75rem);padding:0 .75rem;color:var(--suave);background:var(--fondo)}.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;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;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius: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__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}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1177
1177
|
}
|
|
1178
1178
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDataTable, decorators: [{
|
|
1179
1179
|
type: Component,
|
|
1180
|
-
args: [{ selector: 'td-data-table', imports: [FormsModule, ScrollingModule, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div\n class=\"td-tabla__encabezado\"\n role=\"row\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scrolledIndexChange)=\"alCambiarIndice()\"\n >\n <div\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:.75rem;padding:0 .75rem;color:var(--suave);background:var(--fondo)}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:0 0 0 3px color-mix(in srgb,var(--acento) 15%,transparent)}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:.7rem;padding:0 1rem;color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:#526077;background:#edf0f5}.td-tabla__boton--primario{color:#fff;background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:#fff;background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:#fff;background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:#fff;background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;overflow:hidden;border:1px solid var(--borde);border-radius:1rem;background:var(--fondo);box-shadow:0 12px 32px #1f2a440f}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:50%;animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius:999px;padding:.25rem .55rem;color:#526077;background:#edf0f5;font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:.55rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:1.2rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"] }]
|
|
1180
|
+
args: [{ selector: 'td-data-table', imports: [FormsModule, ScrollingModule, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div\n class=\"td-tabla__encabezado\"\n role=\"row\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scrolledIndexChange)=\"alCambiarIndice()\"\n >\n <div\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n [style.grid-template-columns]=\"columnasGrid()\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span [class.td-tabla__numero]=\"columna.tipo === 'numero'\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @for (accionFila of accionesVisibles(fila); track accionFila.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__accion td-tabla__accion--' + tonoAccion(accionFila, fila)\"\n [title]=\"accionFila.etiqueta\"\n [disabled]=\"accionFila.deshabilitada?.(fila) ?? false\"\n (click)=\"ejecutarAccion(accionFila, fila, indice)\"\n >\n <td-icon [nombre]=\"iconoAccion(accionFila, fila)\" />\n <span class=\"td-tabla__sr-only\">{{ accionFila.etiqueta }}</span>\n </button>\n }\n </div>\n }\n </div>\n </cdk-virtual-scroll-viewport>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-bottom:.85rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:.65rem}.td-tabla__filtros ::ng-deep [tdDataTableFilters]{height:2.55rem;min-width:10.5rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .75rem);padding:0 .8rem;color:var(--texto);background-color:var(--fondo);font:600 .75rem/1 Inter,ui-sans-serif,system-ui,sans-serif;outline:none;transition:border-color .14s ease,box-shadow .14s ease,background-color .14s ease}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:hover{border-color:color-mix(in srgb,var(--acento) 42%,var(--borde))}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:focus{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__filtros ::ng-deep select[tdDataTableFilters]{appearance:none;padding-right:2.45rem;background-image:linear-gradient(45deg,transparent 50%,var(--suave) 50%),linear-gradient(135deg,var(--suave) 50%,transparent 50%);background-position:calc(100% - 1rem) 50%,calc(100% - .72rem) 50%;background-repeat:no-repeat;background-size:.3rem .3rem,.3rem .3rem;cursor:pointer}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{min-width:9.8rem;color-scheme:light;cursor:pointer}.td-tabla--oscura .td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]{color-scheme:dark}.td-tabla__filtros ::ng-deep input[type=date][tdDataTableFilters]::-webkit-calendar-picker-indicator{opacity:.65;cursor:pointer}.td-tabla__filtros ::ng-deep [tdDataTableFilters]:disabled{opacity:.55;cursor:not-allowed}.td-tabla__busqueda{display:flex;width:min(22rem,100%);height:2.55rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .75rem);padding:0 .75rem;color:var(--suave);background:var(--fondo)}.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;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;min-width:max-content;align-items:center}.td-tabla__encabezado{position:relative;z-index:2;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{width:100%;min-height:12rem}.td-tabla__fila{border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__chip{display:inline-flex;border-radius: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__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}}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}}\n"] }]
|
|
1181
1181
|
}], propDecorators: { viewport: [{
|
|
1182
1182
|
type: ViewChild,
|
|
1183
1183
|
args: [CdkVirtualScrollViewport]
|
|
@@ -1765,7 +1765,7 @@ class TdDatePicker {
|
|
|
1765
1765
|
</footer>
|
|
1766
1766
|
</section>
|
|
1767
1767
|
</ng-template>
|
|
1768
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-date-picker{--td-date-bg: var(--td-color-surface, #fff);--td-date-border: var(--td-color-border, #dfe3eb);--td-date-text: var(--td-color-text, #263147);--td-date-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius
|
|
1768
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-date-picker{--td-date-bg: var(--td-color-surface, #fff);--td-date-border: var(--td-color-border, #dfe3eb);--td-date-text: var(--td-color-text, #263147);--td-date-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-date-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-date-picker--dark{--td-date-bg: var(--td-color-surface, #19191f);--td-date-border: var(--td-color-border, #34343e);--td-date-text: var(--td-color-text, #ededf0);--td-date-muted: var(--td-color-text-muted, #a1a1aa)}.td-date-picker:hover:not(.td-date-picker--disabled){border-color:var(--td-color-primary-hover, #8d80e8)}.td-date-picker--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-date-picker--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-date-picker--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-date-picker>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;padding:0 .35rem;color:var(--td-date-muted);background:var(--td-date-bg);font-size:.65rem;font-weight:750;line-height:1}.td-date-picker--open>label{color:var(--td-color-primary, #5746d8)}.td-date-picker--error>label{color:var(--td-color-danger, #d33f3f)}.td-date-picker__trigger{display:flex;width:100%;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-date-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-date-picker__trigger>span:not(.td-date-picker__clear){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-date-picker__placeholder{color:color-mix(in srgb,var(--td-date-muted) 72%,transparent)}.td-date-picker__trigger>td-icon{color:var(--td-date-muted)}.td-date-picker__chevron{transition:transform .14s ease}.td-date-picker__chevron--open{transform:rotate(180deg)}.td-date-picker__clear{display:grid;width:1.8rem;height:1.8rem;flex:0 0 auto;place-items:center;border-radius:var(--td-radius-sm, .45rem);color:var(--td-date-muted)}.td-date-picker__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-date-picker__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem}.td-date-picker__message--error{color:var(--td-color-danger, #c43636)}.td-calendar{width:min(21rem,100vw - 1rem);overflow:hidden;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-xl, 1rem);padding:.8rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 22px 55px rgba(15, 23, 42, .2));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-calendar-in .14s ease-out}.td-calendar--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-calendar__header{display:grid;grid-template-columns:2.35rem 1fr 2.35rem;align-items:center;gap:.35rem}.td-calendar__header button,.td-calendar__footer button{border:0;color:inherit;background:transparent;cursor:pointer}.td-calendar__header button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.65rem}.td-calendar__header .td-calendar__period{display:inline-flex;width:auto;min-width:0;height:2.35rem;align-items:center;justify-content:center;gap:.35rem;padding:0 .65rem;font-size:.82rem;font-weight:800}.td-calendar__header button:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-calendar--dark .td-calendar__header button:hover{background:var(--td-color-primary-soft, #2b293d)}.td-calendar__range-summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.55rem;margin:.65rem 0 .35rem;border-radius:.72rem;padding:.55rem .65rem;background:var(--td-color-surface-soft, #f7f7fb)}.td-calendar--dark .td-calendar__range-summary{background:var(--td-color-surface-muted, #292931)}.td-calendar__range-summary span{min-width:0}.td-calendar__range-summary span:last-child{text-align:right}.td-calendar__range-summary small,.td-calendar__range-summary strong{display:block}.td-calendar__range-summary small{color:var(--td-color-text-muted, #748096);font-size:.58rem}.td-calendar__range-summary strong{overflow:hidden;margin-top:.12rem;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.td-calendar__weekdays,.td-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.td-calendar__weekdays{margin-top:.55rem}.td-calendar__weekdays span{padding:.35rem 0;color:var(--td-color-text-subtle, #8791a4);font-size:.59rem;font-weight:800;text-align:center}.td-calendar__day{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:0;border-radius:.6rem;color:inherit;background:transparent;font:650 .7rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__day:hover:not(:disabled){color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0eeff)}.td-calendar__day--outside{color:#b4bac6}.td-calendar__day--today{box-shadow:inset 0 0 0 1px var(--td-color-primary-hover, #8d80e8)}.td-calendar__day--range{border-radius:0;color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #efedff)}.td-calendar__day--selected,.td-calendar__day--range-start,.td-calendar__day--range-end{border-radius:.6rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-primary, #5746d8);box-shadow:var(--td-shadow-sm, 0 5px 12px rgba(87, 70, 216, .24))}.td-calendar__day:disabled{opacity:.3;cursor:not-allowed}.td-calendar__selector-grid{display:grid;min-height:15.75rem;align-content:center;gap:.45rem;padding:.75rem .15rem}.td-calendar__selector-grid--months,.td-calendar__selector-grid--years{grid-template-columns:repeat(3,minmax(0,1fr))}.td-calendar__selector-grid button{min-height:3.15rem;border:0;border-radius:.7rem;color:inherit;background:transparent;font:700 .72rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__selector-grid button:hover:not(:disabled){color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0eeff)}.td-calendar--dark .td-calendar__selector-grid button:hover:not(:disabled){color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #2b293d)}.td-calendar__selector-grid button:disabled{opacity:.28;cursor:not-allowed}.td-calendar__selector--active{color:var(--td-color-on-primary, #fff)!important;background:var(--td-color-primary, #5746d8)!important;box-shadow:var(--td-shadow-sm, 0 5px 12px rgba(87, 70, 216, .22))}.td-calendar__selector--today:not(.td-calendar__selector--active){box-shadow:inset 0 0 0 1px var(--td-color-primary-hover, #8d80e8)}.td-calendar__footer{display:flex;justify-content:space-between;margin-top:.55rem;border-top:1px solid var(--td-color-border, #e6e9f0);padding-top:.55rem}.td-calendar--dark .td-calendar__footer{border-color:var(--td-color-border, #34343e)}.td-calendar__text-action{border-radius:.5rem!important;padding:.45rem .6rem;color:var(--td-color-primary, #5746d8)!important;font-size:.68rem;font-weight:750}.td-calendar__text-action:hover{background:var(--td-color-primary-soft, #f2f0ff)!important}@keyframes td-calendar-in{0%{opacity:0;transform:translateY(-.25rem) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.td-calendar{width:calc(100vw - 1rem);border-radius:.9rem}}@media(prefers-reduced-motion:reduce){.td-calendar{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1769
1769
|
}
|
|
1770
1770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDatePicker, decorators: [{
|
|
1771
1771
|
type: Component,
|
|
@@ -1947,7 +1947,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1947
1947
|
], host: {
|
|
1948
1948
|
'[hidden]': 'hidden()',
|
|
1949
1949
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
1950
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-date-picker{--td-date-bg: var(--td-color-surface, #fff);--td-date-border: var(--td-color-border, #dfe3eb);--td-date-text: var(--td-color-text, #263147);--td-date-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius
|
|
1950
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-date-picker{--td-date-bg: var(--td-color-surface, #fff);--td-date-border: var(--td-color-border, #dfe3eb);--td-date-text: var(--td-color-text, #263147);--td-date-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-date-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-date-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-date-picker--dark{--td-date-bg: var(--td-color-surface, #19191f);--td-date-border: var(--td-color-border, #34343e);--td-date-text: var(--td-color-text, #ededf0);--td-date-muted: var(--td-color-text-muted, #a1a1aa)}.td-date-picker:hover:not(.td-date-picker--disabled){border-color:var(--td-color-primary-hover, #8d80e8)}.td-date-picker--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-date-picker--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-date-picker--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-date-picker>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;padding:0 .35rem;color:var(--td-date-muted);background:var(--td-date-bg);font-size:.65rem;font-weight:750;line-height:1}.td-date-picker--open>label{color:var(--td-color-primary, #5746d8)}.td-date-picker--error>label{color:var(--td-color-danger, #d33f3f)}.td-date-picker__trigger{display:flex;width:100%;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-date-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-date-picker__trigger>span:not(.td-date-picker__clear){min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-date-picker__placeholder{color:color-mix(in srgb,var(--td-date-muted) 72%,transparent)}.td-date-picker__trigger>td-icon{color:var(--td-date-muted)}.td-date-picker__chevron{transition:transform .14s ease}.td-date-picker__chevron--open{transform:rotate(180deg)}.td-date-picker__clear{display:grid;width:1.8rem;height:1.8rem;flex:0 0 auto;place-items:center;border-radius:var(--td-radius-sm, .45rem);color:var(--td-date-muted)}.td-date-picker__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-date-picker__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem}.td-date-picker__message--error{color:var(--td-color-danger, #c43636)}.td-calendar{width:min(21rem,100vw - 1rem);overflow:hidden;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-xl, 1rem);padding:.8rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 22px 55px rgba(15, 23, 42, .2));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-calendar-in .14s ease-out}.td-calendar--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-calendar__header{display:grid;grid-template-columns:2.35rem 1fr 2.35rem;align-items:center;gap:.35rem}.td-calendar__header button,.td-calendar__footer button{border:0;color:inherit;background:transparent;cursor:pointer}.td-calendar__header button{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:.65rem}.td-calendar__header .td-calendar__period{display:inline-flex;width:auto;min-width:0;height:2.35rem;align-items:center;justify-content:center;gap:.35rem;padding:0 .65rem;font-size:.82rem;font-weight:800}.td-calendar__header button:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-calendar--dark .td-calendar__header button:hover{background:var(--td-color-primary-soft, #2b293d)}.td-calendar__range-summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.55rem;margin:.65rem 0 .35rem;border-radius:.72rem;padding:.55rem .65rem;background:var(--td-color-surface-soft, #f7f7fb)}.td-calendar--dark .td-calendar__range-summary{background:var(--td-color-surface-muted, #292931)}.td-calendar__range-summary span{min-width:0}.td-calendar__range-summary span:last-child{text-align:right}.td-calendar__range-summary small,.td-calendar__range-summary strong{display:block}.td-calendar__range-summary small{color:var(--td-color-text-muted, #748096);font-size:.58rem}.td-calendar__range-summary strong{overflow:hidden;margin-top:.12rem;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.td-calendar__weekdays,.td-calendar__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.td-calendar__weekdays{margin-top:.55rem}.td-calendar__weekdays span{padding:.35rem 0;color:var(--td-color-text-subtle, #8791a4);font-size:.59rem;font-weight:800;text-align:center}.td-calendar__day{position:relative;display:grid;min-width:0;aspect-ratio:1;place-items:center;border:0;border-radius:.6rem;color:inherit;background:transparent;font:650 .7rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__day:hover:not(:disabled){color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0eeff)}.td-calendar__day--outside{color:#b4bac6}.td-calendar__day--today{box-shadow:inset 0 0 0 1px var(--td-color-primary-hover, #8d80e8)}.td-calendar__day--range{border-radius:0;color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #efedff)}.td-calendar__day--selected,.td-calendar__day--range-start,.td-calendar__day--range-end{border-radius:.6rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-primary, #5746d8);box-shadow:var(--td-shadow-sm, 0 5px 12px rgba(87, 70, 216, .24))}.td-calendar__day:disabled{opacity:.3;cursor:not-allowed}.td-calendar__selector-grid{display:grid;min-height:15.75rem;align-content:center;gap:.45rem;padding:.75rem .15rem}.td-calendar__selector-grid--months,.td-calendar__selector-grid--years{grid-template-columns:repeat(3,minmax(0,1fr))}.td-calendar__selector-grid button{min-height:3.15rem;border:0;border-radius:.7rem;color:inherit;background:transparent;font:700 .72rem/1 system-ui,sans-serif;cursor:pointer}.td-calendar__selector-grid button:hover:not(:disabled){color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f0eeff)}.td-calendar--dark .td-calendar__selector-grid button:hover:not(:disabled){color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #2b293d)}.td-calendar__selector-grid button:disabled{opacity:.28;cursor:not-allowed}.td-calendar__selector--active{color:var(--td-color-on-primary, #fff)!important;background:var(--td-color-primary, #5746d8)!important;box-shadow:var(--td-shadow-sm, 0 5px 12px rgba(87, 70, 216, .22))}.td-calendar__selector--today:not(.td-calendar__selector--active){box-shadow:inset 0 0 0 1px var(--td-color-primary-hover, #8d80e8)}.td-calendar__footer{display:flex;justify-content:space-between;margin-top:.55rem;border-top:1px solid var(--td-color-border, #e6e9f0);padding-top:.55rem}.td-calendar--dark .td-calendar__footer{border-color:var(--td-color-border, #34343e)}.td-calendar__text-action{border-radius:.5rem!important;padding:.45rem .6rem;color:var(--td-color-primary, #5746d8)!important;font-size:.68rem;font-weight:750}.td-calendar__text-action:hover{background:var(--td-color-primary-soft, #f2f0ff)!important}@keyframes td-calendar-in{0%{opacity:0;transform:translateY(-.25rem) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:600px){.td-calendar{width:calc(100vw - 1rem);border-radius:.9rem}}@media(prefers-reduced-motion:reduce){.td-calendar{animation:none}}\n"] }]
|
|
1951
1951
|
}], propDecorators: { label: [{
|
|
1952
1952
|
type: Input
|
|
1953
1953
|
}], placeholder: [{
|
|
@@ -2042,7 +2042,7 @@ class TdDialogPanel {
|
|
|
2042
2042
|
<ng-container *ngComponentOutlet="payload.component" />
|
|
2043
2043
|
</div>
|
|
2044
2044
|
</section>
|
|
2045
|
-
`, isInline: true, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px
|
|
2045
|
+
`, isInline: true, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:var(--td-radius-xl, 1rem);outline:none;box-shadow:var(--td-shadow-lg, 0 28px 75px rgba(15, 23, 42, .24));animation:td-dialog-enter .18s cubic-bezier(.2,.8,.2,1)}:host-context(.td-dialog-overlay--fullscreen){height:100%;max-height:100%;border-radius:0}*{box-sizing:border-box}.td-dialog{--td-dialog-surface: var(--td-color-surface, #fff);--td-dialog-footer: var(--td-color-surface-soft, #fafbfc);--td-dialog-border: var(--td-color-border, #e6e9f0);--td-dialog-text: var(--td-color-text, #263147);--td-dialog-muted: var(--td-color-text-muted, #748096);display:flex;width:100%;max-height:inherit;flex-direction:column;overflow:hidden;color:var(--td-dialog-text);background:var(--td-dialog-surface);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-dialog--oscuro{--td-dialog-surface: var(--td-color-surface, #19191f);--td-dialog-footer: var(--td-color-surface-soft, #202028);--td-dialog-border: var(--td-color-border, #303039);--td-dialog-text: var(--td-color-text, #ededf0);--td-dialog-muted: var(--td-color-text-muted, #a1a1aa)}.td-dialog__header{display:flex;min-height:4.4rem;flex:0 0 auto;align-items:center;gap:.85rem;border-bottom:1px solid var(--td-dialog-border);padding:1rem 1.25rem 1rem 1.5rem;background:var(--td-dialog-surface)}.td-dialog__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:var(--td-radius-md, .75rem);color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #eeecff)}.td-dialog--oscuro .td-dialog__icono{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292540)}.td-dialog__titulos{min-width:0;flex:1}.td-dialog__titulos h2{margin:0;font-size:1rem;line-height:1.3;letter-spacing:-.015em}.td-dialog__titulos p{margin:.2rem 0 0;color:var(--td-dialog-muted);font-size:.73rem;line-height:1.45}.td-dialog__cerrar{display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .65rem);color:var(--td-dialog-muted);background:transparent;cursor:pointer}.td-dialog__cerrar:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-dialog--oscuro .td-dialog__cerrar:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292931)}.td-dialog__contenido{display:flex;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:1.5rem;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent) transparent;scrollbar-width:thin}.td-dialog__contenido ::ng-deep>*{display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido ::ng-deep :has(>td-dialog-actions){display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido::-webkit-scrollbar{width:.42rem}.td-dialog__contenido::-webkit-scrollbar-track{background:transparent}.td-dialog__contenido::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent)}.td-dialog__contenido::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--td-dialog-muted) 58%,transparent)}.td-dialog--pantalla{height:100%}@keyframes td-dialog-enter{0%{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}}@media(max-width:600px){:host{border-radius:var(--td-radius-xl, 1rem)}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2046
2046
|
}
|
|
2047
2047
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPanel, decorators: [{
|
|
2048
2048
|
type: Component,
|
|
@@ -2091,7 +2091,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2091
2091
|
<ng-container *ngComponentOutlet="payload.component" />
|
|
2092
2092
|
</div>
|
|
2093
2093
|
</section>
|
|
2094
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px
|
|
2094
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:var(--td-radius-xl, 1rem);outline:none;box-shadow:var(--td-shadow-lg, 0 28px 75px rgba(15, 23, 42, .24));animation:td-dialog-enter .18s cubic-bezier(.2,.8,.2,1)}:host-context(.td-dialog-overlay--fullscreen){height:100%;max-height:100%;border-radius:0}*{box-sizing:border-box}.td-dialog{--td-dialog-surface: var(--td-color-surface, #fff);--td-dialog-footer: var(--td-color-surface-soft, #fafbfc);--td-dialog-border: var(--td-color-border, #e6e9f0);--td-dialog-text: var(--td-color-text, #263147);--td-dialog-muted: var(--td-color-text-muted, #748096);display:flex;width:100%;max-height:inherit;flex-direction:column;overflow:hidden;color:var(--td-dialog-text);background:var(--td-dialog-surface);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-dialog--oscuro{--td-dialog-surface: var(--td-color-surface, #19191f);--td-dialog-footer: var(--td-color-surface-soft, #202028);--td-dialog-border: var(--td-color-border, #303039);--td-dialog-text: var(--td-color-text, #ededf0);--td-dialog-muted: var(--td-color-text-muted, #a1a1aa)}.td-dialog__header{display:flex;min-height:4.4rem;flex:0 0 auto;align-items:center;gap:.85rem;border-bottom:1px solid var(--td-dialog-border);padding:1rem 1.25rem 1rem 1.5rem;background:var(--td-dialog-surface)}.td-dialog__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:var(--td-radius-md, .75rem);color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #eeecff)}.td-dialog--oscuro .td-dialog__icono{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292540)}.td-dialog__titulos{min-width:0;flex:1}.td-dialog__titulos h2{margin:0;font-size:1rem;line-height:1.3;letter-spacing:-.015em}.td-dialog__titulos p{margin:.2rem 0 0;color:var(--td-dialog-muted);font-size:.73rem;line-height:1.45}.td-dialog__cerrar{display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .65rem);color:var(--td-dialog-muted);background:transparent;cursor:pointer}.td-dialog__cerrar:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-dialog--oscuro .td-dialog__cerrar:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292931)}.td-dialog__contenido{display:flex;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:1.5rem;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent) transparent;scrollbar-width:thin}.td-dialog__contenido ::ng-deep>*{display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido ::ng-deep :has(>td-dialog-actions){display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido::-webkit-scrollbar{width:.42rem}.td-dialog__contenido::-webkit-scrollbar-track{background:transparent}.td-dialog__contenido::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent)}.td-dialog__contenido::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--td-dialog-muted) 58%,transparent)}.td-dialog--pantalla{height:100%}@keyframes td-dialog-enter{0%{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}}@media(max-width:600px){:host{border-radius:var(--td-radius-xl, 1rem)}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"] }]
|
|
2095
2095
|
}] });
|
|
2096
2096
|
|
|
2097
2097
|
class TdDialog {
|
|
@@ -2214,11 +2214,11 @@ class TdFooter {
|
|
|
2214
2214
|
compacto = false;
|
|
2215
2215
|
anio = new Date().getFullYear();
|
|
2216
2216
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2217
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdFooter, isStandalone: true, selector: "td-footer", inputs: { empresa: "empresa", texto: "texto", version: "version", oscuro: "oscuro", compacto: "compacto", anio: "anio" }, ngImport: i0, template: "<footer\n class=\"td-footer\"\n [class.td-footer--oscuro]=\"oscuro\"\n [class.td-footer--compacto]=\"compacto\"\n>\n <div class=\"td-footer__identidad\">\n <span>\u00A9 {{ anio }} {{ empresa }}</span>\n @if (texto) {\n <small>{{ texto }}</small>\n }\n </div>\n\n <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n <ng-content select=\"[tdFooterLinks]\" />\n </nav>\n\n <div class=\"td-footer__final\">\n <ng-content select=\"[tdFooterActions]\" />\n @if (version) {\n <span class=\"td-footer__version\">v{{ version }}</span>\n }\n </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: var(--td-color-surface, #fff);--td-footer-borde: var(--td-color-border, #e2e8f0);--td-footer-texto: var(--td-color-text-muted, #475569);--td-footer-suave: var(--td-color-text-subtle, #94a3b8);display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:Inter,ui-sans-serif,system-ui
|
|
2217
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdFooter, isStandalone: true, selector: "td-footer", inputs: { empresa: "empresa", texto: "texto", version: "version", oscuro: "oscuro", compacto: "compacto", anio: "anio" }, ngImport: i0, template: "<footer\n class=\"td-footer\"\n [class.td-footer--oscuro]=\"oscuro\"\n [class.td-footer--compacto]=\"compacto\"\n>\n <div class=\"td-footer__identidad\">\n <span>\u00A9 {{ anio }} {{ empresa }}</span>\n @if (texto) {\n <small>{{ texto }}</small>\n }\n </div>\n\n <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n <ng-content select=\"[tdFooterLinks]\" />\n </nav>\n\n <div class=\"td-footer__final\">\n <ng-content select=\"[tdFooterActions]\" />\n @if (version) {\n <span class=\"td-footer__version\">v{{ version }}</span>\n }\n </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: var(--td-color-surface, #fff);--td-footer-borde: var(--td-color-border, #e2e8f0);--td-footer-texto: var(--td-color-text-muted, #475569);--td-footer-suave: var(--td-color-text-subtle, #94a3b8);display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);font-size:.75rem}.td-footer--oscuro{--td-footer-fondo: var(--td-color-surface, #111116);--td-footer-borde: var(--td-color-border, #29292f);--td-footer-texto: var(--td-color-text, #d4d4d8);--td-footer-suave: var(--td-color-text-muted, #71717a)}.td-footer--compacto{min-height:3.25rem;padding-block:.65rem}.td-footer__identidad{display:flex;min-width:0;flex-wrap:wrap;gap:.3rem .75rem;align-items:center}.td-footer__identidad span{font-weight:700}.td-footer__identidad small{color:var(--td-footer-suave);font-size:inherit}.td-footer__enlaces{display:flex;align-items:center;justify-content:center;gap:1rem}.td-footer__final{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}.td-footer__version{border:1px solid var(--td-footer-borde);border-radius:999px;padding:.22rem .55rem;color:var(--td-footer-suave);font:700 .65rem/1 ui-monospace,monospace}@media(max-width:720px){.td-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.td-footer__identidad,.td-footer__final{justify-content:center}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2218
2218
|
}
|
|
2219
2219
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdFooter, decorators: [{
|
|
2220
2220
|
type: Component,
|
|
2221
|
-
args: [{ selector: 'td-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer\n class=\"td-footer\"\n [class.td-footer--oscuro]=\"oscuro\"\n [class.td-footer--compacto]=\"compacto\"\n>\n <div class=\"td-footer__identidad\">\n <span>\u00A9 {{ anio }} {{ empresa }}</span>\n @if (texto) {\n <small>{{ texto }}</small>\n }\n </div>\n\n <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n <ng-content select=\"[tdFooterLinks]\" />\n </nav>\n\n <div class=\"td-footer__final\">\n <ng-content select=\"[tdFooterActions]\" />\n @if (version) {\n <span class=\"td-footer__version\">v{{ version }}</span>\n }\n </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: var(--td-color-surface, #fff);--td-footer-borde: var(--td-color-border, #e2e8f0);--td-footer-texto: var(--td-color-text-muted, #475569);--td-footer-suave: var(--td-color-text-subtle, #94a3b8);display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:Inter,ui-sans-serif,system-ui
|
|
2221
|
+
args: [{ selector: 'td-footer', changeDetection: ChangeDetectionStrategy.OnPush, template: "<footer\n class=\"td-footer\"\n [class.td-footer--oscuro]=\"oscuro\"\n [class.td-footer--compacto]=\"compacto\"\n>\n <div class=\"td-footer__identidad\">\n <span>\u00A9 {{ anio }} {{ empresa }}</span>\n @if (texto) {\n <small>{{ texto }}</small>\n }\n </div>\n\n <nav class=\"td-footer__enlaces\" aria-label=\"Enlaces del pie de p\u00E1gina\">\n <ng-content select=\"[tdFooterLinks]\" />\n </nav>\n\n <div class=\"td-footer__final\">\n <ng-content select=\"[tdFooterActions]\" />\n @if (version) {\n <span class=\"td-footer__version\">v{{ version }}</span>\n }\n </div>\n</footer>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-footer{--td-footer-fondo: var(--td-color-surface, #fff);--td-footer-borde: var(--td-color-border, #e2e8f0);--td-footer-texto: var(--td-color-text-muted, #475569);--td-footer-suave: var(--td-color-text-subtle, #94a3b8);display:grid;min-height:4.5rem;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;border-top:1px solid var(--td-footer-borde);padding:1rem 1.5rem;color:var(--td-footer-texto);background:var(--td-footer-fondo);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif);font-size:.75rem}.td-footer--oscuro{--td-footer-fondo: var(--td-color-surface, #111116);--td-footer-borde: var(--td-color-border, #29292f);--td-footer-texto: var(--td-color-text, #d4d4d8);--td-footer-suave: var(--td-color-text-muted, #71717a)}.td-footer--compacto{min-height:3.25rem;padding-block:.65rem}.td-footer__identidad{display:flex;min-width:0;flex-wrap:wrap;gap:.3rem .75rem;align-items:center}.td-footer__identidad span{font-weight:700}.td-footer__identidad small{color:var(--td-footer-suave);font-size:inherit}.td-footer__enlaces{display:flex;align-items:center;justify-content:center;gap:1rem}.td-footer__final{display:flex;align-items:center;justify-content:flex-end;gap:.75rem}.td-footer__version{border:1px solid var(--td-footer-borde);border-radius:999px;padding:.22rem .55rem;color:var(--td-footer-suave);font:700 .65rem/1 ui-monospace,monospace}@media(max-width:720px){.td-footer{grid-template-columns:1fr;justify-items:center;text-align:center}.td-footer__identidad,.td-footer__final{justify-content:center}}\n"] }]
|
|
2222
2222
|
}], propDecorators: { empresa: [{
|
|
2223
2223
|
type: Input
|
|
2224
2224
|
}], texto: [{
|
|
@@ -2282,11 +2282,11 @@ class TdHeader {
|
|
|
2282
2282
|
this.panelPerfilAbierto = false;
|
|
2283
2283
|
}
|
|
2284
2284
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2285
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdHeader, isStandalone: true, selector: "td-header", inputs: { menuAbierto: "menuAbierto", mostrarMenu: "mostrarMenu", usuario: "usuario", cargo: "cargo", avatarUrl: "avatarUrl", notificaciones: "notificaciones", oscuro: "oscuro", fijo: "fijo" }, outputs: { menuToggle: "menuToggle", notificacionSeleccionada: "notificacionSeleccionada", verTodasNotificaciones: "verTodasNotificaciones", accionPerfil: "accionPerfil" }, host: { listeners: { "document:keydown.escape": "cerrarConEscape()" } }, ngImport: i0, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:0 8px 30px #232a440d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:.75rem;padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:999px;padding:0 .15rem;color:#fff;background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:.8rem;padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:.7rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:1rem;color:var(--texto);background:var(--fondo);box-shadow:0 22px 55px #0f172a2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2285
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdHeader, isStandalone: true, selector: "td-header", inputs: { menuAbierto: "menuAbierto", mostrarMenu: "mostrarMenu", usuario: "usuario", cargo: "cargo", avatarUrl: "avatarUrl", notificaciones: "notificaciones", oscuro: "oscuro", fijo: "fijo" }, outputs: { menuToggle: "menuToggle", notificacionSeleccionada: "notificacionSeleccionada", verTodasNotificaciones: "verTodasNotificaciones", accionPerfil: "accionPerfil" }, host: { listeners: { "document:keydown.escape": "cerrarConEscape()" } }, ngImport: i0, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2286
2286
|
}
|
|
2287
2287
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdHeader, decorators: [{
|
|
2288
2288
|
type: Component,
|
|
2289
|
-
args: [{ selector: 'td-header', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:0 8px 30px #232a440d;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:.75rem;padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:999px;padding:0 .15rem;color:#fff;background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:.8rem;padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:.7rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:1rem;color:var(--texto);background:var(--fondo);box-shadow:0 22px 55px #0f172a2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:50%;background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"] }]
|
|
2289
|
+
args: [{ selector: 'td-header', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<header\n class=\"td-header\"\n [class.td-header--oscuro]=\"oscuro\"\n [class.td-header--fijo]=\"fijo\"\n>\n <div class=\"td-header__inicio\">\n @if (mostrarMenu) {\n <button\n class=\"td-header__boton td-header__menu\"\n type=\"button\"\n [attr.aria-label]=\"menuAbierto ? 'Cerrar sidebar' : 'Abrir sidebar'\"\n [attr.aria-expanded]=\"menuAbierto\"\n (click)=\"alternarMenu()\"\n >\n <td-icon [nombre]=\"menuAbierto ? 'close' : 'menu'\" />\n </button>\n }\n\n <ng-content select=\"[tdHeaderStart]\" />\n </div>\n\n <div class=\"td-header__centro\">\n <ng-content select=\"[tdHeaderCenter]\" />\n </div>\n\n <div class=\"td-header__acciones\">\n <ng-content select=\"[tdHeaderActions]\" />\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__boton td-header__notificaciones\"\n type=\"button\"\n aria-label=\"Notificaciones\"\n [attr.aria-expanded]=\"panelNotificacionesAbierto\"\n (click)=\"alternarNotificaciones()\"\n >\n <td-icon nombre=\"notifications\" />\n @if (notificacionesNoLeidas() > 0) {\n <span>{{ notificacionesNoLeidas() > 99 ? '99+' : notificacionesNoLeidas() }}</span>\n }\n </button>\n\n @if (panelNotificacionesAbierto) {\n <section class=\"td-header__panel td-header__panel--notificaciones\">\n <header>\n <div>\n <strong>Notificaciones</strong>\n <small>{{ notificacionesNoLeidas() }} sin leer</small>\n </div>\n <td-icon nombre=\"notifications\" />\n </header>\n\n <div class=\"td-header__lista-notificaciones\">\n @for (notificacion of notificaciones; track notificacion.id) {\n <button\n type=\"button\"\n [class.td-header__notificacion--nueva]=\"!notificacion.leida\"\n (click)=\"seleccionarNotificacion(notificacion)\"\n >\n <span class=\"td-header__notificacion-icono\">\n <td-icon [nombre]=\"notificacion.icono || 'notifications'\" />\n </span>\n <span>\n <strong>{{ notificacion.titulo }}</strong>\n @if (notificacion.descripcion) {\n <small>{{ notificacion.descripcion }}</small>\n }\n @if (notificacion.fecha) {\n <time>{{ notificacion.fecha }}</time>\n }\n </span>\n </button>\n } @empty {\n <p class=\"td-header__vacio\">No tienes notificaciones.</p>\n }\n </div>\n\n @if (notificaciones.length) {\n <button\n class=\"td-header__ver-todas\"\n type=\"button\"\n (click)=\"verTodasNotificaciones.emit(); panelNotificacionesAbierto = false\"\n >\n Ver todas las notificaciones\n </button>\n }\n </section>\n }\n </div>\n\n @if (usuario) {\n <span class=\"td-header__separador\" aria-hidden=\"true\"></span>\n\n <div class=\"td-header__desplegable\">\n <button\n class=\"td-header__perfil\"\n type=\"button\"\n aria-label=\"Abrir perfil de usuario\"\n [attr.aria-expanded]=\"panelPerfilAbierto\"\n (click)=\"alternarPerfil()\"\n >\n <span class=\"td-header__avatar\">\n @if (avatarUrl) {\n <img [src]=\"avatarUrl\" [alt]=\"usuario\" />\n } @else {\n {{ inicialesUsuario() }}\n }\n </span>\n <span class=\"td-header__usuario\">\n <strong>{{ usuario }}</strong>\n @if (cargo) {\n <small>{{ cargo }}</small>\n }\n </span>\n <td-icon nombre=\"chevron_down\" tamano=\"0.85rem\" />\n </button>\n\n @if (panelPerfilAbierto) {\n <section class=\"td-header__panel td-header__panel--perfil\">\n <div class=\"td-header__perfil-resumen\">\n <span class=\"td-header__avatar td-header__avatar--grande\">{{ inicialesUsuario() }}</span>\n <div>\n <strong>{{ usuario }}</strong>\n <small>{{ cargo || 'Usuario' }}</small>\n </div>\n </div>\n <div class=\"td-header__perfil-opciones\">\n <button type=\"button\" (click)=\"emitirAccionPerfil('perfil')\">\n <td-icon nombre=\"person\" /> Mi perfil\n </button>\n <button type=\"button\" (click)=\"emitirAccionPerfil('configuracion')\">\n <td-icon nombre=\"settings\" /> Configuraci\u00F3n\n </button>\n <button class=\"td-header__salir\" type=\"button\" (click)=\"emitirAccionPerfil('salir')\">\n <td-icon nombre=\"close\" /> Cerrar sesi\u00F3n\n </button>\n </div>\n </section>\n }\n </div>\n }\n </div>\n</header>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-header{--fondo: color-mix(in srgb, var(--td-color-surface, #fff) 92%, transparent);--borde: var(--td-color-border, #e5e9f1);--texto: var(--td-color-text, #172036);--suave: var(--td-color-text-muted, #7b8498);--hover: var(--td-color-surface-soft, #f3f5fa);--acento: var(--td-color-primary, #5746d8);position:relative;z-index:30;display:grid;min-height:4.25rem;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;border-bottom:1px solid var(--borde);padding:.65rem 1.25rem;color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-header, 0 8px 30px rgba(35, 42, 68, .05));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-header--fijo{position:sticky;top:0}.td-header--oscuro{--fondo: color-mix(in srgb, var(--td-color-surface, #181b22) 94%, transparent);--borde: var(--td-color-border, #2b2c35);--texto: var(--td-color-text, #f5f5f6);--suave: var(--td-color-text-muted, #92929f);--hover: var(--td-color-surface-soft, #272730);--acento: var(--td-color-primary, #a89cf7)}.td-header__inicio,.td-header__acciones{display:flex;min-width:0;align-items:center;gap:.5rem}.td-header__acciones{justify-content:flex-end}.td-header__centro{min-width:0}.td-header__boton{position:relative;display:grid;width:2.55rem;height:2.55rem;place-items:center;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);padding:0;color:var(--suave);background:transparent;cursor:pointer}.td-header__boton:hover,.td-header__perfil:hover,.td-header__menu{border-color:var(--borde);color:var(--acento);background:var(--hover)}.td-header__notificaciones>span{position:absolute;top:-.05rem;right:-.12rem;display:grid;min-width:1.05rem;height:1.05rem;place-items:center;border:2px solid var(--fondo);border-radius:var(--td-radius-pill, 999px);padding:0 .15rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #ef4444);font-size:.5rem;font-weight:800}.td-header__separador{width:1px;height:1.75rem;margin:0 .2rem;background:var(--borde)}.td-header__desplegable{position:relative}.td-header__perfil{display:flex;align-items:center;gap:.55rem;border:1px solid transparent;border-radius:var(--td-radius-lg, .8rem);padding:.28rem .42rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__avatar{display:grid;width:2.15rem;height:2.15rem;flex:0 0 2.15rem;place-items:center;overflow:hidden;border:2px solid color-mix(in srgb,var(--acento) 18%,var(--borde));border-radius:var(--td-radius-md, .7rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--hover));font-size:.68rem;font-weight:850}.td-header__avatar img{width:100%;height:100%;object-fit:cover}.td-header__avatar--grande{width:2.8rem;height:2.8rem;flex-basis:2.8rem}.td-header__usuario{display:grid;max-width:9rem;gap:.05rem}.td-header__usuario strong,.td-header__usuario small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-header__usuario strong{font-size:.75rem}.td-header__usuario small{color:var(--suave);font-size:.66rem}.td-header__panel{position:absolute;top:calc(100% + .75rem);right:0;width:min(22rem,100vw - 1.5rem);overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);color:var(--texto);background:var(--fondo);box-shadow:var(--td-shadow-panel, 0 22px 55px rgba(15, 23, 42, .18));-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:td-header-panel .14s ease-out}.td-header__panel>header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:1rem;color:var(--acento)}.td-header__panel>header div,.td-header__perfil-resumen div{display:grid;gap:.15rem}.td-header__panel>header strong,.td-header__perfil-resumen strong{color:var(--texto);font-size:.82rem}.td-header__panel>header small,.td-header__perfil-resumen small{color:var(--suave);font-size:.68rem}.td-header__lista-notificaciones{max-height:22rem;overflow-y:auto}.td-header__lista-notificaciones>button{position:relative;display:flex;width:100%;gap:.75rem;border:0;border-bottom:1px solid var(--borde);padding:.85rem 1rem;color:var(--texto);background:transparent;font:inherit;text-align:left;cursor:pointer}.td-header__lista-notificaciones>button:hover{background:var(--hover)}.td-header__notificacion--nueva:after{position:absolute;top:1rem;right:.8rem;width:.4rem;height:.4rem;border-radius:var(--td-radius-pill, 50%);background:var(--acento);content:\"\"}.td-header__notificacion-icono{display:grid;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;place-items:center;border-radius:.65rem;color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-header__lista-notificaciones button>span:last-child{display:grid;min-width:0;gap:.18rem;padding-right:.7rem}.td-header__lista-notificaciones strong{font-size:.75rem}.td-header__lista-notificaciones small{color:var(--suave);font-size:.68rem;line-height:1.4}.td-header__lista-notificaciones time{color:var(--acento);font-size:.61rem}.td-header__ver-todas{width:100%;border:0;padding:.8rem;color:var(--acento);background:transparent;font:750 .7rem/1 inherit;cursor:pointer}.td-header__ver-todas:hover{background:var(--hover)}.td-header__vacio{margin:0;padding:2rem 1rem;color:var(--suave);font-size:.75rem;text-align:center}.td-header__panel--perfil{width:17rem}.td-header__perfil-resumen{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--borde);padding:1rem}.td-header__perfil-opciones{padding:.45rem}.td-header__perfil-opciones button{display:flex;width:100%;align-items:center;gap:.65rem;border:0;border-radius:.55rem;padding:.65rem .7rem;color:var(--texto);background:transparent;font:600 .72rem/1 inherit;cursor:pointer}.td-header__perfil-opciones button:hover{background:var(--hover)}.td-header__perfil-opciones .td-header__salir{color:var(--td-color-danger, #dc2626)}@keyframes td-header-panel{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:640px){.td-header{grid-template-columns:1fr auto;padding-inline:.75rem}.td-header__centro,.td-header__usuario,.td-header__separador{display:none}.td-header__panel{position:fixed;top:4.5rem;right:.75rem}}\n"] }]
|
|
2290
2290
|
}], propDecorators: { menuAbierto: [{
|
|
2291
2291
|
type: Input
|
|
2292
2292
|
}], mostrarMenu: [{
|
|
@@ -2755,7 +2755,7 @@ class TdInput {
|
|
|
2755
2755
|
}
|
|
2756
2756
|
</div>
|
|
2757
2757
|
}
|
|
2758
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-muted, #748096);position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius
|
|
2758
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-input{--td-input-bg: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-muted, #748096);position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: var(--td-color-surface, #19191f);--td-input-border: var(--td-color-border, #34343e);--td-input-text: var(--td-color-text, #ededf0);--td-input-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-input-border))}.td-input--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-input--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-input--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:50%;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .25rem;color:var(--td-input-muted);background:transparent;font-size:.78rem;font-weight:750;line-height:1;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;white-space:nowrap;pointer-events:none}.td-input--with-icon label{left:2.55rem}.td-input--with-prefix label{left:3.05rem}.td-input--with-icon.td-input--with-prefix label{left:4.85rem}.td-input--floating label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-input-bg);font-size:.65rem;transform:translateY(0)}.td-input--focused label{color:var(--td-color-primary, #5746d8)}.td-input--error label{color:var(--td-color-danger, #d33f3f)}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}.td-input__affix{flex:0 0 auto;color:var(--td-input-muted);font:750 .76rem/1 system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;-webkit-user-select:none;user-select:none}.td-input__affix--prefix{padding-right:.05rem}.td-input__affix--suffix{padding-left:.05rem}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .5rem);color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-input--dark .td-input__action:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292931)}.td-input__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-input__message{min-width:0;flex:1 1 auto;margin:0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-input__message--error{color:var(--td-color-danger, #c43636)}.td-input__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:var(--td-color-primary, #5746d8);font-weight:700}.td-input--dark+.td-input__support .td-input__message,.td-input--dark+.td-input__support .td-input__counter{color:var(--td-color-text-muted, #a1a1aa)}.td-input--dark+.td-input__support .td-input__message--error{color:var(--td-color-danger, #f28b8b)}.td-input--dark+.td-input__support .td-input__counter--limit{color:var(--td-color-primary, #b9b0fa)}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2759
2759
|
}
|
|
2760
2760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, decorators: [{
|
|
2761
2761
|
type: Component,
|
|
@@ -2861,7 +2861,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2861
2861
|
], host: {
|
|
2862
2862
|
'[hidden]': 'hidden()',
|
|
2863
2863
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
2864
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-muted, #748096);position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius
|
|
2864
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-input{--td-input-bg: var(--td-color-surface, #fff);--td-input-border: var(--td-color-border, #dfe3eb);--td-input-text: var(--td-color-text, #263147);--td-input-muted: var(--td-color-text-muted, #748096);position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: var(--td-color-surface, #19191f);--td-input-border: var(--td-color-border, #34343e);--td-input-text: var(--td-color-text, #ededf0);--td-input-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-input-border))}.td-input--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-input--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-input--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:50%;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .25rem;color:var(--td-input-muted);background:transparent;font-size:.78rem;font-weight:750;line-height:1;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;white-space:nowrap;pointer-events:none}.td-input--with-icon label{left:2.55rem}.td-input--with-prefix label{left:3.05rem}.td-input--with-icon.td-input--with-prefix label{left:4.85rem}.td-input--floating label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-input-bg);font-size:.65rem;transform:translateY(0)}.td-input--focused label{color:var(--td-color-primary, #5746d8)}.td-input--error label{color:var(--td-color-danger, #d33f3f)}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}.td-input__affix{flex:0 0 auto;color:var(--td-input-muted);font:750 .76rem/1 system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;-webkit-user-select:none;user-select:none}.td-input__affix--prefix{padding-right:.05rem}.td-input__affix--suffix{padding-left:.05rem}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .5rem);color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-input--dark .td-input__action:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292931)}.td-input__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-input__message{min-width:0;flex:1 1 auto;margin:0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-input__message--error{color:var(--td-color-danger, #c43636)}.td-input__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-input__counter--limit{color:var(--td-color-primary, #5746d8);font-weight:700}.td-input--dark+.td-input__support .td-input__message,.td-input--dark+.td-input__support .td-input__counter{color:var(--td-color-text-muted, #a1a1aa)}.td-input--dark+.td-input__support .td-input__message--error{color:var(--td-color-danger, #f28b8b)}.td-input--dark+.td-input__support .td-input__counter--limit{color:var(--td-color-primary, #b9b0fa)}\n"] }]
|
|
2865
2865
|
}], propDecorators: { nativeInput: [{
|
|
2866
2866
|
type: ViewChild,
|
|
2867
2867
|
args: ['nativeInput']
|
|
@@ -2907,6 +2907,315 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2907
2907
|
type: Input
|
|
2908
2908
|
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
2909
2909
|
|
|
2910
|
+
let textareaSequence = 0;
|
|
2911
|
+
class TdTextarea {
|
|
2912
|
+
cdr = inject(ChangeDetectorRef);
|
|
2913
|
+
formBridge = createTdFormControlBridge();
|
|
2914
|
+
generatedId = `td-textarea-${++textareaSequence}`;
|
|
2915
|
+
legacyMinLength = signal(null, ...(ngDevMode ? [{ debugName: "legacyMinLength" }] : /* istanbul ignore next */ []));
|
|
2916
|
+
legacyMaxLength = signal(null, ...(ngDevMode ? [{ debugName: "legacyMaxLength" }] : /* istanbul ignore next */ []));
|
|
2917
|
+
receivedNullValue = false;
|
|
2918
|
+
nativeTextarea;
|
|
2919
|
+
id = '';
|
|
2920
|
+
label = 'Campo';
|
|
2921
|
+
placeholder = '';
|
|
2922
|
+
hint = '';
|
|
2923
|
+
rows = 4;
|
|
2924
|
+
dark = false;
|
|
2925
|
+
clearable = false;
|
|
2926
|
+
emptyValue = 'auto';
|
|
2927
|
+
autoResize = true;
|
|
2928
|
+
maxAutoRows = 10;
|
|
2929
|
+
name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
2930
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2931
|
+
disabledReasons = input([], ...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
2932
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2933
|
+
hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
2934
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
2935
|
+
pending = input(false, ...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
2936
|
+
dirty = input(false, ...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
2937
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2938
|
+
errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
2939
|
+
touched = model(false, ...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2940
|
+
touch = output();
|
|
2941
|
+
error = input('', ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2942
|
+
showCounter = input(true, ...(ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []));
|
|
2943
|
+
minLength = input(undefined, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
|
|
2944
|
+
maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
2945
|
+
set minlength(value) {
|
|
2946
|
+
this.legacyMinLength.set(value);
|
|
2947
|
+
}
|
|
2948
|
+
set maxlength(value) {
|
|
2949
|
+
this.legacyMaxLength.set(value);
|
|
2950
|
+
}
|
|
2951
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2952
|
+
focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
2953
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
2954
|
+
displayError = computed(() => this.error() || this.errors()[0]?.message || '', ...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
2955
|
+
hasError = computed(() => this.invalid() || !!this.displayError(), ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2956
|
+
resolvedMinLength = computed(() => this.minLength() ?? this.legacyMinLength(), ...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
|
|
2957
|
+
resolvedMaxLength = computed(() => this.maxLength() ?? this.legacyMaxLength(), ...(ngDevMode ? [{ debugName: "resolvedMaxLength" }] : /* istanbul ignore next */ []));
|
|
2958
|
+
currentLength = computed(() => String(this.value() ?? '').length, ...(ngDevMode ? [{ debugName: "currentLength" }] : /* istanbul ignore next */ []));
|
|
2959
|
+
counterVisible = computed(() => this.showCounter() && this.resolvedMaxLength() !== null &&
|
|
2960
|
+
this.resolvedMaxLength() !== undefined, ...(ngDevMode ? [{ debugName: "counterVisible" }] : /* istanbul ignore next */ []));
|
|
2961
|
+
counterAtLimit = computed(() => {
|
|
2962
|
+
const maxLength = this.resolvedMaxLength();
|
|
2963
|
+
return maxLength !== null && maxLength !== undefined &&
|
|
2964
|
+
this.currentLength() >= maxLength;
|
|
2965
|
+
}, ...(ngDevMode ? [{ debugName: "counterAtLimit" }] : /* istanbul ignore next */ []));
|
|
2966
|
+
hasSupportingContent = computed(() => !!this.displayError() || !!this.hint || this.counterVisible(), ...(ngDevMode ? [{ debugName: "hasSupportingContent" }] : /* istanbul ignore next */ []));
|
|
2967
|
+
hasValue = computed(() => {
|
|
2968
|
+
const currentValue = this.value();
|
|
2969
|
+
return currentValue !== null && currentValue !== undefined && currentValue.length > 0;
|
|
2970
|
+
}, ...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
2971
|
+
labelFloating = computed(() => this.focused() || this.hasValue(), ...(ngDevMode ? [{ debugName: "labelFloating" }] : /* istanbul ignore next */ []));
|
|
2972
|
+
get textareaId() {
|
|
2973
|
+
return this.id || this.generatedId;
|
|
2974
|
+
}
|
|
2975
|
+
get descriptionId() {
|
|
2976
|
+
return this.hasSupportingContent() ? `${this.textareaId}-description` : null;
|
|
2977
|
+
}
|
|
2978
|
+
onChange = () => undefined;
|
|
2979
|
+
ngAfterViewInit() {
|
|
2980
|
+
this.resizeTextarea();
|
|
2981
|
+
}
|
|
2982
|
+
writeValue(value) {
|
|
2983
|
+
if (value === null || value === undefined) {
|
|
2984
|
+
this.receivedNullValue = true;
|
|
2985
|
+
this.value.set(null);
|
|
2986
|
+
}
|
|
2987
|
+
else {
|
|
2988
|
+
this.value.set(String(value));
|
|
2989
|
+
}
|
|
2990
|
+
queueMicrotask(() => this.resizeTextarea());
|
|
2991
|
+
this.cdr.markForCheck();
|
|
2992
|
+
}
|
|
2993
|
+
registerOnChange(fn) {
|
|
2994
|
+
this.onChange = fn;
|
|
2995
|
+
}
|
|
2996
|
+
registerOnTouched(fn) {
|
|
2997
|
+
this.formBridge.registerOnTouched(fn);
|
|
2998
|
+
}
|
|
2999
|
+
setDisabledState(disabled) {
|
|
3000
|
+
this.formBridge.setDisabledState(disabled);
|
|
3001
|
+
}
|
|
3002
|
+
focus(options) {
|
|
3003
|
+
this.nativeTextarea?.nativeElement.focus(options);
|
|
3004
|
+
}
|
|
3005
|
+
handleInput(event) {
|
|
3006
|
+
const textarea = event.target;
|
|
3007
|
+
this.setValue(textarea.value ? textarea.value : this.resolveEmptyValue());
|
|
3008
|
+
this.resizeTextarea();
|
|
3009
|
+
}
|
|
3010
|
+
handleFocus() {
|
|
3011
|
+
this.focused.set(true);
|
|
3012
|
+
}
|
|
3013
|
+
handleBlur() {
|
|
3014
|
+
this.focused.set(false);
|
|
3015
|
+
this.formBridge.markTouched(this.touched, this.touch);
|
|
3016
|
+
}
|
|
3017
|
+
clear() {
|
|
3018
|
+
this.setValue(this.resolveEmptyValue());
|
|
3019
|
+
if (this.nativeTextarea) {
|
|
3020
|
+
this.nativeTextarea.nativeElement.value = this.value() ?? '';
|
|
3021
|
+
}
|
|
3022
|
+
this.resizeTextarea();
|
|
3023
|
+
}
|
|
3024
|
+
setValue(value) {
|
|
3025
|
+
this.value.set(value);
|
|
3026
|
+
this.onChange(value);
|
|
3027
|
+
}
|
|
3028
|
+
resolveEmptyValue() {
|
|
3029
|
+
if (this.emptyValue === 'null')
|
|
3030
|
+
return null;
|
|
3031
|
+
if (this.emptyValue === 'empty-string')
|
|
3032
|
+
return '';
|
|
3033
|
+
return this.receivedNullValue ? null : '';
|
|
3034
|
+
}
|
|
3035
|
+
resizeTextarea() {
|
|
3036
|
+
if (!this.autoResize || !this.nativeTextarea)
|
|
3037
|
+
return;
|
|
3038
|
+
const textarea = this.nativeTextarea.nativeElement;
|
|
3039
|
+
textarea.style.height = 'auto';
|
|
3040
|
+
const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight || '20');
|
|
3041
|
+
const maxHeight = this.maxAutoRows && this.maxAutoRows > 0
|
|
3042
|
+
? lineHeight * this.maxAutoRows
|
|
3043
|
+
: Number.POSITIVE_INFINITY;
|
|
3044
|
+
const nextHeight = Math.min(textarea.scrollHeight, maxHeight);
|
|
3045
|
+
textarea.style.height = `${nextHeight}px`;
|
|
3046
|
+
textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
|
|
3047
|
+
}
|
|
3048
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3049
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdTextarea, isStandalone: true, selector: "td-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: false, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, maxAutoRows: { classPropertyName: "maxAutoRows", publicName: "maxAutoRows", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
3050
|
+
{
|
|
3051
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3052
|
+
useExisting: forwardRef(() => TdTextarea),
|
|
3053
|
+
multi: true,
|
|
3054
|
+
},
|
|
3055
|
+
], viewQueries: [{ propertyName: "nativeTextarea", first: true, predicate: ["nativeTextarea"], descendants: true }], ngImport: i0, template: `
|
|
3056
|
+
<div
|
|
3057
|
+
class="td-textarea"
|
|
3058
|
+
[class.td-textarea--focused]="focused()"
|
|
3059
|
+
[class.td-textarea--error]="hasError()"
|
|
3060
|
+
[class.td-textarea--disabled]="isDisabled()"
|
|
3061
|
+
[class.td-textarea--dark]="dark"
|
|
3062
|
+
[class.td-textarea--floating]="labelFloating()"
|
|
3063
|
+
>
|
|
3064
|
+
<label [for]="textareaId">{{ label }}</label>
|
|
3065
|
+
|
|
3066
|
+
<textarea
|
|
3067
|
+
#nativeTextarea
|
|
3068
|
+
[id]="textareaId"
|
|
3069
|
+
[name]="name()"
|
|
3070
|
+
[value]="value() ?? ''"
|
|
3071
|
+
[placeholder]="labelFloating() ? placeholder : ''"
|
|
3072
|
+
[rows]="rows"
|
|
3073
|
+
[disabled]="isDisabled()"
|
|
3074
|
+
[readonly]="readonly()"
|
|
3075
|
+
[required]="required()"
|
|
3076
|
+
[attr.minlength]="resolvedMinLength()"
|
|
3077
|
+
[attr.maxlength]="resolvedMaxLength()"
|
|
3078
|
+
[attr.aria-describedby]="descriptionId"
|
|
3079
|
+
[attr.aria-invalid]="hasError()"
|
|
3080
|
+
(input)="handleInput($event)"
|
|
3081
|
+
(focus)="handleFocus()"
|
|
3082
|
+
(blur)="handleBlur()"
|
|
3083
|
+
></textarea>
|
|
3084
|
+
|
|
3085
|
+
@if (clearable && value() && !isDisabled() && !readonly()) {
|
|
3086
|
+
<button type="button" class="td-textarea__clear" title="Limpiar" (click)="clear()">
|
|
3087
|
+
×
|
|
3088
|
+
</button>
|
|
3089
|
+
}
|
|
3090
|
+
</div>
|
|
3091
|
+
|
|
3092
|
+
@if (hasSupportingContent()) {
|
|
3093
|
+
<div class="td-textarea__support" [id]="descriptionId">
|
|
3094
|
+
@if (displayError() || hint) {
|
|
3095
|
+
<p
|
|
3096
|
+
class="td-textarea__message"
|
|
3097
|
+
[class.td-textarea__message--error]="hasError()"
|
|
3098
|
+
>
|
|
3099
|
+
{{ displayError() || hint }}
|
|
3100
|
+
</p>
|
|
3101
|
+
} @else {
|
|
3102
|
+
<span class="td-textarea__message" aria-hidden="true"></span>
|
|
3103
|
+
}
|
|
3104
|
+
|
|
3105
|
+
@if (counterVisible()) {
|
|
3106
|
+
<span
|
|
3107
|
+
class="td-textarea__counter"
|
|
3108
|
+
[class.td-textarea__counter--limit]="counterAtLimit()"
|
|
3109
|
+
>
|
|
3110
|
+
{{ currentLength() }}/{{ resolvedMaxLength() }}
|
|
3111
|
+
</span>
|
|
3112
|
+
}
|
|
3113
|
+
</div>
|
|
3114
|
+
}
|
|
3115
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-textarea{--td-textarea-bg: var(--td-color-surface, #fff);--td-textarea-border: var(--td-color-border, #dfe3eb);--td-textarea-text: var(--td-color-text, #263147);--td-textarea-muted: var(--td-color-text-muted, #748096);position:relative;min-height:5.6rem;border:1px solid var(--td-textarea-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-textarea-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-textarea--dark{--td-textarea-bg: var(--td-color-surface, #19191f);--td-textarea-border: var(--td-color-border, #34343e);--td-textarea-text: var(--td-color-text, #ededf0);--td-textarea-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-textarea:hover:not(.td-textarea--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-textarea-border))}.td-textarea--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-textarea--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-textarea--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-textarea label{position:absolute;z-index:1;top:1.55rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .25rem;color:var(--td-textarea-muted);background:transparent;font-size:.78rem;font-weight:750;line-height:1;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;white-space:nowrap;pointer-events:none}.td-textarea--floating label{top:-.48rem;padding:0 .35rem;background:var(--td-textarea-bg);font-size:.65rem;transform:translateY(0)}.td-textarea--focused label{color:var(--td-color-primary, #5746d8)}.td-textarea--error label{color:var(--td-color-danger, #d33f3f)}textarea{display:block;width:100%;min-width:0;min-height:5.45rem;resize:vertical;border:0;outline:0;padding:.9rem .78rem;color:var(--td-textarea-text);background:transparent;font:550 .78rem/1.45 system-ui,sans-serif}textarea::placeholder{color:color-mix(in srgb,var(--td-textarea-muted) 72%,transparent)}textarea:disabled{cursor:not-allowed}.td-textarea__clear{position:absolute;top:.55rem;right:.55rem;display:grid;width:1.9rem;height:1.9rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .5rem);color:var(--td-textarea-muted);background:transparent;cursor:pointer;font:760 1.05rem/1 system-ui,sans-serif}.td-textarea__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-textarea__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-textarea__message{min-width:0;flex:1 1 auto;margin:0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-textarea__message--error{color:var(--td-color-danger, #c43636)}.td-textarea__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-textarea__counter--limit{color:var(--td-color-primary, #5746d8);font-weight:700}.td-textarea--dark+.td-textarea__support .td-textarea__message,.td-textarea--dark+.td-textarea__support .td-textarea__counter{color:var(--td-color-text-muted, #a1a1aa)}.td-textarea--dark+.td-textarea__support .td-textarea__message--error{color:var(--td-color-danger, #f28b8b)}.td-textarea--dark+.td-textarea__support .td-textarea__counter--limit{color:var(--td-color-primary, #b9b0fa)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3116
|
+
}
|
|
3117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTextarea, decorators: [{
|
|
3118
|
+
type: Component,
|
|
3119
|
+
args: [{ selector: 'td-textarea', template: `
|
|
3120
|
+
<div
|
|
3121
|
+
class="td-textarea"
|
|
3122
|
+
[class.td-textarea--focused]="focused()"
|
|
3123
|
+
[class.td-textarea--error]="hasError()"
|
|
3124
|
+
[class.td-textarea--disabled]="isDisabled()"
|
|
3125
|
+
[class.td-textarea--dark]="dark"
|
|
3126
|
+
[class.td-textarea--floating]="labelFloating()"
|
|
3127
|
+
>
|
|
3128
|
+
<label [for]="textareaId">{{ label }}</label>
|
|
3129
|
+
|
|
3130
|
+
<textarea
|
|
3131
|
+
#nativeTextarea
|
|
3132
|
+
[id]="textareaId"
|
|
3133
|
+
[name]="name()"
|
|
3134
|
+
[value]="value() ?? ''"
|
|
3135
|
+
[placeholder]="labelFloating() ? placeholder : ''"
|
|
3136
|
+
[rows]="rows"
|
|
3137
|
+
[disabled]="isDisabled()"
|
|
3138
|
+
[readonly]="readonly()"
|
|
3139
|
+
[required]="required()"
|
|
3140
|
+
[attr.minlength]="resolvedMinLength()"
|
|
3141
|
+
[attr.maxlength]="resolvedMaxLength()"
|
|
3142
|
+
[attr.aria-describedby]="descriptionId"
|
|
3143
|
+
[attr.aria-invalid]="hasError()"
|
|
3144
|
+
(input)="handleInput($event)"
|
|
3145
|
+
(focus)="handleFocus()"
|
|
3146
|
+
(blur)="handleBlur()"
|
|
3147
|
+
></textarea>
|
|
3148
|
+
|
|
3149
|
+
@if (clearable && value() && !isDisabled() && !readonly()) {
|
|
3150
|
+
<button type="button" class="td-textarea__clear" title="Limpiar" (click)="clear()">
|
|
3151
|
+
×
|
|
3152
|
+
</button>
|
|
3153
|
+
}
|
|
3154
|
+
</div>
|
|
3155
|
+
|
|
3156
|
+
@if (hasSupportingContent()) {
|
|
3157
|
+
<div class="td-textarea__support" [id]="descriptionId">
|
|
3158
|
+
@if (displayError() || hint) {
|
|
3159
|
+
<p
|
|
3160
|
+
class="td-textarea__message"
|
|
3161
|
+
[class.td-textarea__message--error]="hasError()"
|
|
3162
|
+
>
|
|
3163
|
+
{{ displayError() || hint }}
|
|
3164
|
+
</p>
|
|
3165
|
+
} @else {
|
|
3166
|
+
<span class="td-textarea__message" aria-hidden="true"></span>
|
|
3167
|
+
}
|
|
3168
|
+
|
|
3169
|
+
@if (counterVisible()) {
|
|
3170
|
+
<span
|
|
3171
|
+
class="td-textarea__counter"
|
|
3172
|
+
[class.td-textarea__counter--limit]="counterAtLimit()"
|
|
3173
|
+
>
|
|
3174
|
+
{{ currentLength() }}/{{ resolvedMaxLength() }}
|
|
3175
|
+
</span>
|
|
3176
|
+
}
|
|
3177
|
+
</div>
|
|
3178
|
+
}
|
|
3179
|
+
`, providers: [
|
|
3180
|
+
{
|
|
3181
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3182
|
+
useExisting: forwardRef(() => TdTextarea),
|
|
3183
|
+
multi: true,
|
|
3184
|
+
},
|
|
3185
|
+
], host: {
|
|
3186
|
+
'[hidden]': 'hidden()',
|
|
3187
|
+
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
3188
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-textarea{--td-textarea-bg: var(--td-color-surface, #fff);--td-textarea-border: var(--td-color-border, #dfe3eb);--td-textarea-text: var(--td-color-text, #263147);--td-textarea-muted: var(--td-color-text-muted, #748096);position:relative;min-height:5.6rem;border:1px solid var(--td-textarea-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-textarea-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-textarea--dark{--td-textarea-bg: var(--td-color-surface, #19191f);--td-textarea-border: var(--td-color-border, #34343e);--td-textarea-text: var(--td-color-text, #ededf0);--td-textarea-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-textarea:hover:not(.td-textarea--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-textarea-border))}.td-textarea--focused{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-textarea--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-textarea--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8);cursor:not-allowed}.td-textarea label{position:absolute;z-index:1;top:1.55rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .25rem;color:var(--td-textarea-muted);background:transparent;font-size:.78rem;font-weight:750;line-height:1;text-overflow:ellipsis;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;white-space:nowrap;pointer-events:none}.td-textarea--floating label{top:-.48rem;padding:0 .35rem;background:var(--td-textarea-bg);font-size:.65rem;transform:translateY(0)}.td-textarea--focused label{color:var(--td-color-primary, #5746d8)}.td-textarea--error label{color:var(--td-color-danger, #d33f3f)}textarea{display:block;width:100%;min-width:0;min-height:5.45rem;resize:vertical;border:0;outline:0;padding:.9rem .78rem;color:var(--td-textarea-text);background:transparent;font:550 .78rem/1.45 system-ui,sans-serif}textarea::placeholder{color:color-mix(in srgb,var(--td-textarea-muted) 72%,transparent)}textarea:disabled{cursor:not-allowed}.td-textarea__clear{position:absolute;top:.55rem;right:.55rem;display:grid;width:1.9rem;height:1.9rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .5rem);color:var(--td-textarea-muted);background:transparent;cursor:pointer;font:760 1.05rem/1 system-ui,sans-serif}.td-textarea__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-textarea__support{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:.75rem;margin:.38rem .75rem 0}.td-textarea__message{min-width:0;flex:1 1 auto;margin:0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-textarea__message--error{color:var(--td-color-danger, #c43636)}.td-textarea__counter{flex:0 0 auto;color:var(--td-color-text-muted, #748096);font-size:.66rem;font-variant-numeric:tabular-nums;line-height:1.4;white-space:nowrap}.td-textarea__counter--limit{color:var(--td-color-primary, #5746d8);font-weight:700}.td-textarea--dark+.td-textarea__support .td-textarea__message,.td-textarea--dark+.td-textarea__support .td-textarea__counter{color:var(--td-color-text-muted, #a1a1aa)}.td-textarea--dark+.td-textarea__support .td-textarea__message--error{color:var(--td-color-danger, #f28b8b)}.td-textarea--dark+.td-textarea__support .td-textarea__counter--limit{color:var(--td-color-primary, #b9b0fa)}\n"] }]
|
|
3189
|
+
}], propDecorators: { nativeTextarea: [{
|
|
3190
|
+
type: ViewChild,
|
|
3191
|
+
args: ['nativeTextarea']
|
|
3192
|
+
}], id: [{
|
|
3193
|
+
type: Input
|
|
3194
|
+
}], label: [{
|
|
3195
|
+
type: Input
|
|
3196
|
+
}], placeholder: [{
|
|
3197
|
+
type: Input
|
|
3198
|
+
}], hint: [{
|
|
3199
|
+
type: Input
|
|
3200
|
+
}], rows: [{
|
|
3201
|
+
type: Input
|
|
3202
|
+
}], dark: [{
|
|
3203
|
+
type: Input
|
|
3204
|
+
}], clearable: [{
|
|
3205
|
+
type: Input
|
|
3206
|
+
}], emptyValue: [{
|
|
3207
|
+
type: Input
|
|
3208
|
+
}], autoResize: [{
|
|
3209
|
+
type: Input,
|
|
3210
|
+
args: [{ transform: booleanAttribute }]
|
|
3211
|
+
}], maxAutoRows: [{
|
|
3212
|
+
type: Input
|
|
3213
|
+
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], showCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCounter", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], minlength: [{
|
|
3214
|
+
type: Input
|
|
3215
|
+
}], maxlength: [{
|
|
3216
|
+
type: Input
|
|
3217
|
+
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
3218
|
+
|
|
2910
3219
|
let autocompleteSequence = 0;
|
|
2911
3220
|
class TdAutocompleteSelect {
|
|
2912
3221
|
cdr = inject(ChangeDetectorRef);
|
|
@@ -3269,7 +3578,7 @@ class TdAutocompleteSelect {
|
|
|
3269
3578
|
}
|
|
3270
3579
|
</div>
|
|
3271
3580
|
</ng-template>
|
|
3272
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius
|
|
3581
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3273
3582
|
}
|
|
3274
3583
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, decorators: [{
|
|
3275
3584
|
type: Component,
|
|
@@ -3385,7 +3694,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3385
3694
|
], host: {
|
|
3386
3695
|
'[hidden]': 'hidden()',
|
|
3387
3696
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
3388
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius
|
|
3697
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
|
|
3389
3698
|
}], ctorParameters: () => [], propDecorators: { searchInput: [{
|
|
3390
3699
|
type: ViewChild,
|
|
3391
3700
|
args: ['searchInput']
|
|
@@ -3763,7 +4072,7 @@ class TdSelect {
|
|
|
3763
4072
|
}
|
|
3764
4073
|
</div>
|
|
3765
4074
|
</ng-template>
|
|
3766
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius
|
|
4075
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3767
4076
|
}
|
|
3768
4077
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, decorators: [{
|
|
3769
4078
|
type: Component,
|
|
@@ -3883,7 +4192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3883
4192
|
], host: {
|
|
3884
4193
|
'[hidden]': 'hidden()',
|
|
3885
4194
|
'[attr.aria-busy]': 'pending() ? "true" : null',
|
|
3886
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius
|
|
4195
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"] }]
|
|
3887
4196
|
}], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
|
|
3888
4197
|
type: ViewChild,
|
|
3889
4198
|
args: [CdkConnectedOverlay]
|
|
@@ -3979,11 +4288,11 @@ class TdSidebar {
|
|
|
3979
4288
|
}));
|
|
3980
4289
|
}
|
|
3981
4290
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3982
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui
|
|
4291
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family: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", "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 });
|
|
3983
4292
|
}
|
|
3984
4293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSidebar, decorators: [{
|
|
3985
4294
|
type: Component,
|
|
3986
|
-
args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family:Inter,ui-sans-serif,system-ui
|
|
4295
|
+
args: [{ selector: 'td-sidebar', imports: [NgTemplateOutlet, RouterLink, RouterLinkActive, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [class.td-sidebar__enlace--activo]=\"estaExpandido(clave)\"\n [attr.aria-expanded]=\"estaExpandido(clave)\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"alternarGrupo(clave)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n <td-icon\n class=\"td-sidebar__flecha\"\n [class.td-sidebar__flecha--abierta]=\"estaExpandido(clave)\"\n nombre=\"chevron_right\"\n />\n }\n </button>\n } @else {\n <a\n class=\"td-sidebar__enlace\"\n [routerLink]=\"item.ruta || '/'\"\n routerLinkActive=\"td-sidebar__enlace--ruta-activa\"\n [routerLinkActiveOptions]=\"{ exact: item.ruta === '/' }\"\n [attr.title]=\"!abiertoInterno() ? item.nombre : null\"\n (click)=\"seleccionarItem(item, nivel)\"\n >\n <td-icon class=\"td-sidebar__icono\" [nombre]=\"item.icono || 'folder'\" />\n @if (abiertoInterno()) {\n <span>{{ item.nombre }}</span>\n }\n </a>\n }\n\n @if (abiertoInterno() && tieneHijos && estaExpandido(clave)) {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{\n items: item.subMenus,\n nivel: nivel + 1,\n padre: clave\n }\"\n />\n }\n </li>\n }\n </ul>\n</ng-template>\n", styles: [":host{display:block;height:100%}*{box-sizing:border-box}.td-sidebar{--td-fondo: var(--td-color-surface, #fff);--td-borde: var(--td-color-border, #e2e8f0);--td-texto: var(--td-color-text, #334155);--td-texto-suave: var(--td-color-text-muted, #64748b);--td-hover: var(--td-color-surface-soft, #f1f5f9);--td-activo: var(--td-color-primary-soft, #e8efff);--td-acento: var(--td-color-primary, #2563eb);display:flex;width:18rem;height:100%;min-height:28rem;flex-direction:column;overflow:hidden;border-right:1px solid var(--td-borde);color:var(--td-texto);background:var(--td-fondo);font-family: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"] }]
|
|
3987
4296
|
}], propDecorators: { titulo: [{
|
|
3988
4297
|
type: Input
|
|
3989
4298
|
}], subtitulo: [{
|
|
@@ -4251,7 +4560,7 @@ class TdTabs {
|
|
|
4251
4560
|
</div>
|
|
4252
4561
|
}
|
|
4253
4562
|
</section>
|
|
4254
|
-
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius
|
|
4563
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:var(--td-radius-pill, 999px);padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:var(--td-radius-pill, 999px) var(--td-radius-pill, 999px) 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .8rem);padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:var(--td-shadow-sm, 0 3px 10px rgba(15, 23, 42, .08))}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .9rem);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs__list{justify-content:flex-start!important}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4255
4564
|
}
|
|
4256
4565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTabs, decorators: [{
|
|
4257
4566
|
type: Component,
|
|
@@ -4307,7 +4616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4307
4616
|
</div>
|
|
4308
4617
|
}
|
|
4309
4618
|
</section>
|
|
4310
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius
|
|
4619
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: var(--td-color-surface, #fff);--td-tabs-soft: var(--td-color-surface-soft, #f7f8fb);--td-tabs-border: var(--td-color-border, #e3e7ef);--td-tabs-text: var(--td-color-text, #263147);--td-tabs-muted: var(--td-color-text-muted, #748096);--td-tabs-accent: var(--td-color-primary, #5746d8);min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: var(--td-color-surface, #19191f);--td-tabs-soft: var(--td-color-surface-soft, #202028);--td-tabs-border: var(--td-color-border, #303039);--td-tabs-text: var(--td-color-text, #ededf0);--td-tabs-muted: var(--td-color-text-muted, #a1a1aa);--td-tabs-accent: var(--td-color-primary, #b9b0fa)}.td-tabs__list{display:flex;width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scroll-padding-inline:.5rem;scroll-snap-type:inline proximity;touch-action:pan-x;-webkit-overflow-scrolling:touch;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:safe center}.td-tabs--align-fin .td-tabs__list{justify-content:safe flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;scroll-snap-align:start;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:var(--td-radius-pill, 999px);padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:var(--td-radius-pill, 999px) var(--td-radius-pill, 999px) 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .8rem);padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:var(--td-shadow-sm, 0 3px 10px rgba(15, 23, 42, .08))}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:var(--td-radius-lg, .9rem);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}@media(max-width:600px){.td-tabs__list{justify-content:flex-start!important}.td-tabs--stretch .td-tabs__tab{min-width:max-content;flex:0 0 auto}.td-tabs--contenida .td-tabs__list{padding-inline:.25rem}}\n"] }]
|
|
4311
4620
|
}], propDecorators: { tabQuery: [{
|
|
4312
4621
|
type: ContentChildren,
|
|
4313
4622
|
args: [TdTab]
|
|
@@ -4338,32 +4647,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4338
4647
|
}] } });
|
|
4339
4648
|
|
|
4340
4649
|
const TD_THEME_LIGHT_COLORS = [
|
|
4650
|
+
{ name: 'Font family', cssVariable: '--td-font-family', value: 'Inter, system-ui', usage: 'Base typography for every TelcomDev component.' },
|
|
4341
4651
|
{ name: 'Primary', cssVariable: '--td-color-primary', value: '#3157A4', usage: 'Main actions, focus and active navigation.' },
|
|
4342
4652
|
{ name: 'Primary hover', cssVariable: '--td-color-primary-hover', value: '#254680', usage: 'Hover state for primary actions.' },
|
|
4343
4653
|
{ name: 'Primary soft', cssVariable: '--td-color-primary-soft', value: '#EAF0FB', usage: 'Selected rows, subtle badges and active surfaces.' },
|
|
4654
|
+
{ name: 'On primary', cssVariable: '--td-color-on-primary', value: '#FFFFFF', usage: 'Text and icons placed over solid semantic colors.' },
|
|
4344
4655
|
{ name: 'Success', cssVariable: '--td-color-success', value: '#16784A', usage: 'Positive states and confirmations.' },
|
|
4345
4656
|
{ name: 'Warning', cssVariable: '--td-color-warning', value: '#A8660B', usage: 'Preventive states and attention.' },
|
|
4346
4657
|
{ name: 'Danger', cssVariable: '--td-color-danger', value: '#B93A3A', usage: 'Errors and destructive actions.' },
|
|
4347
4658
|
{ name: 'Info', cssVariable: '--td-color-info', value: '#2563A8', usage: 'Informational states.' },
|
|
4348
4659
|
{ name: 'Surface', cssVariable: '--td-color-surface', value: '#FFFFFF', usage: 'Inputs, dialogs, tables and panels.' },
|
|
4349
4660
|
{ name: 'Surface soft', cssVariable: '--td-color-surface-soft', value: '#F6F8FB', usage: 'Headers, subtle backgrounds and table bars.' },
|
|
4661
|
+
{ name: 'Surface muted', cssVariable: '--td-color-surface-muted', value: '#EDF1F6', usage: 'Neutral buttons, chips and disabled/subtle surfaces.' },
|
|
4350
4662
|
{ name: 'Border', cssVariable: '--td-color-border', value: '#DDE3EE', usage: 'Outlines, separators and dividers.' },
|
|
4663
|
+
{ name: 'Border strong', cssVariable: '--td-color-border-strong', value: '#C8D1DF', usage: 'Checkboxes, avatars and emphasized outlines.' },
|
|
4351
4664
|
{ name: 'Text', cssVariable: '--td-color-text', value: '#202B3D', usage: 'Main content text.' },
|
|
4352
4665
|
{ name: 'Muted text', cssVariable: '--td-color-text-muted', value: '#66758B', usage: 'Metadata, hints and secondary labels.' },
|
|
4666
|
+
{ name: 'Focus ring', cssVariable: '--td-focus-ring', value: '0 0 0 3px ...', usage: 'Keyboard and focus states.' },
|
|
4667
|
+
{ name: 'Radius md', cssVariable: '--td-radius-md', value: '0.75rem', usage: 'Default control radius.' },
|
|
4668
|
+
{ name: 'Shadow md', cssVariable: '--td-shadow-md', value: '0 18px 46px ...', usage: 'Floating panels and overlays.' },
|
|
4353
4669
|
];
|
|
4354
4670
|
const TD_THEME_DARK_COLORS = [
|
|
4671
|
+
{ name: 'Font family', cssVariable: '--td-font-family', value: 'Inter, system-ui', usage: 'Base typography for every TelcomDev component.' },
|
|
4355
4672
|
{ name: 'Primary', cssVariable: '--td-color-primary', value: '#8AA7E6', usage: 'Main actions, focus and active navigation.' },
|
|
4356
4673
|
{ name: 'Primary hover', cssVariable: '--td-color-primary-hover', value: '#A8BDF0', usage: 'Hover state for primary actions.' },
|
|
4357
4674
|
{ name: 'Primary soft', cssVariable: '--td-color-primary-soft', value: '#1F2B45', usage: 'Selected rows, subtle badges and active surfaces.' },
|
|
4675
|
+
{ name: 'On primary', cssVariable: '--td-color-on-primary', value: '#FFFFFF', usage: 'Text and icons placed over solid semantic colors.' },
|
|
4358
4676
|
{ name: 'Success', cssVariable: '--td-color-success', value: '#56C28D', usage: 'Positive states and confirmations.' },
|
|
4359
4677
|
{ name: 'Warning', cssVariable: '--td-color-warning', value: '#E2A84D', usage: 'Preventive states and attention.' },
|
|
4360
4678
|
{ name: 'Danger', cssVariable: '--td-color-danger', value: '#F07878', usage: 'Errors and destructive actions.' },
|
|
4361
4679
|
{ name: 'Info', cssVariable: '--td-color-info', value: '#79A9E8', usage: 'Informational states.' },
|
|
4362
4680
|
{ name: 'Surface', cssVariable: '--td-color-surface', value: '#181B22', usage: 'Inputs, dialogs, tables and panels.' },
|
|
4363
4681
|
{ name: 'Surface soft', cssVariable: '--td-color-surface-soft', value: '#20242D', usage: 'Headers, subtle backgrounds and table bars.' },
|
|
4682
|
+
{ name: 'Surface muted', cssVariable: '--td-color-surface-muted', value: '#272D38', usage: 'Neutral buttons, chips and disabled/subtle surfaces.' },
|
|
4364
4683
|
{ name: 'Border', cssVariable: '--td-color-border', value: '#343B49', usage: 'Outlines, separators and dividers.' },
|
|
4684
|
+
{ name: 'Border strong', cssVariable: '--td-color-border-strong', value: '#465164', usage: 'Checkboxes, avatars and emphasized outlines.' },
|
|
4365
4685
|
{ name: 'Text', cssVariable: '--td-color-text', value: '#EEF2F8', usage: 'Main content text.' },
|
|
4366
4686
|
{ name: 'Muted text', cssVariable: '--td-color-text-muted', value: '#A7B0BE', usage: 'Metadata, hints and secondary labels.' },
|
|
4687
|
+
{ name: 'Focus ring', cssVariable: '--td-focus-ring', value: '0 0 0 3px ...', usage: 'Keyboard and focus states.' },
|
|
4688
|
+
{ name: 'Radius md', cssVariable: '--td-radius-md', value: '0.75rem', usage: 'Default control radius.' },
|
|
4689
|
+
{ name: 'Shadow md', cssVariable: '--td-shadow-md', value: '0 20px 54px ...', usage: 'Floating panels and overlays.' },
|
|
4367
4690
|
];
|
|
4368
4691
|
|
|
4369
4692
|
const THEME_CLASS_LIGHT = 'td-theme-light';
|
|
@@ -4417,5 +4740,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4417
4740
|
* Generated bundle index. Do not edit.
|
|
4418
4741
|
*/
|
|
4419
4742
|
|
|
4420
|
-
export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TdThemeService, TelcomdevUi, createTdFormControlBridge };
|
|
4743
|
+
export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TD_THEME_DARK_COLORS, TD_THEME_LIGHT_COLORS, TdAlerta, TdAutocompleteSelect, TdButton, TdCheckbox, TdDataTable, TdDatePicker, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TelcomdevUi, createTdFormControlBridge };
|
|
4421
4744
|
//# sourceMappingURL=telcomdev-ui.mjs.map
|