@telcomdev/ui 0.1.9 → 0.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/telcomdev-ui.mjs +923 -238
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +2 -1
- package/types/telcomdev-ui.d.ts +156 -10
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Injectable, inject, HostBinding, Input,
|
|
2
|
+
import { ChangeDetectionStrategy, Component, Injectable, inject, HostBinding, Input, EventEmitter, booleanAttribute, Output, ViewChild, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef, InjectionToken, HostListener, Directive, DestroyRef, TemplateRef, ViewChildren, ContentChildren, effect } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/forms';
|
|
4
4
|
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
5
5
|
import { FORM_FIELD } from '@angular/forms/signals';
|
|
@@ -12,12 +12,12 @@ import { CdkDrag, CdkDragHandle } from '@angular/cdk/drag-drop';
|
|
|
12
12
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
13
13
|
|
|
14
14
|
class TelcomdevUi {
|
|
15
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
16
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
15
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TelcomdevUi, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: TelcomdevUi, isStandalone: true, selector: "td-telcomdev-ui", ngImport: i0, template: ` <p>telcomdev-ui works!</p> `, isInline: true, styles: [""], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
17
17
|
}
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TelcomdevUi, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
|
-
args: [{ selector: 'td-telcomdev-ui', imports: [], template: ` <p>telcomdev-ui works!</p>
|
|
20
|
+
args: [{ selector: 'td-telcomdev-ui', imports: [], template: ` <p>telcomdev-ui works!</p> `, changeDetection: ChangeDetectionStrategy.Eager }]
|
|
21
21
|
}] });
|
|
22
22
|
|
|
23
23
|
class TdAlerta {
|
|
@@ -628,10 +628,10 @@ class TdIconoRegistry {
|
|
|
628
628
|
normalizar(nombre) {
|
|
629
629
|
return (nombre ?? '').trim().toLowerCase();
|
|
630
630
|
}
|
|
631
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
632
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
631
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdIconoRegistry, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
632
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdIconoRegistry, providedIn: 'root' });
|
|
633
633
|
}
|
|
634
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
634
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdIconoRegistry, decorators: [{
|
|
635
635
|
type: Injectable,
|
|
636
636
|
args: [{ providedIn: 'root' }]
|
|
637
637
|
}] });
|
|
@@ -650,8 +650,8 @@ class TdIcon {
|
|
|
650
650
|
definicion() {
|
|
651
651
|
return this.registry.obtener(this.nombre);
|
|
652
652
|
}
|
|
653
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
654
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
653
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
654
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: TdIcon, isStandalone: true, selector: "td-icon", inputs: { nombre: "nombre", titulo: "titulo", tamano: "tamano" }, host: { properties: { "style.--td-icon-size": "this.tamanoHost" } }, ngImport: i0, template: `
|
|
655
655
|
<svg
|
|
656
656
|
[attr.viewBox]="definicion().viewBox || '0 0 24 24'"
|
|
657
657
|
[attr.aria-hidden]="titulo ? null : 'true'"
|
|
@@ -670,7 +670,7 @@ class TdIcon {
|
|
|
670
670
|
</svg>
|
|
671
671
|
`, isInline: true, styles: [":host{display:inline-flex;width:var(--td-icon-size, 1.25rem);height:var(--td-icon-size, 1.25rem);flex:0 0 auto;color:inherit;line-height:0;vertical-align:middle}svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
672
672
|
}
|
|
673
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
673
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdIcon, decorators: [{
|
|
674
674
|
type: Component,
|
|
675
675
|
args: [{ selector: 'td-icon', template: `
|
|
676
676
|
<svg
|
|
@@ -730,8 +730,8 @@ class TdButton {
|
|
|
730
730
|
return;
|
|
731
731
|
this.pressed.emit(event);
|
|
732
732
|
}
|
|
733
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
733
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdButton, isStandalone: true, selector: "td-button", inputs: { variant: "variant", tone: "tone", size: "size", type: "type", icon: "icon", iconPosition: "iconPosition", disabled: "disabled", loading: "loading", block: "block", iconOnly: ["iconOnly", "iconOnly", booleanAttribute], ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { pressed: "pressed" }, viewQueries: [{ propertyName: "contentRef", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: `
|
|
735
735
|
<button
|
|
736
736
|
class="td-button"
|
|
737
737
|
[class]="'td-button td-button--' + variant + ' td-button--' + tone + ' td-button--' + size"
|
|
@@ -764,7 +764,7 @@ class TdButton {
|
|
|
764
764
|
</button>
|
|
765
765
|
`, 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 });
|
|
766
766
|
}
|
|
767
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
767
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdButton, decorators: [{
|
|
768
768
|
type: Component,
|
|
769
769
|
args: [{ selector: 'td-button', imports: [TdIcon], template: `
|
|
770
770
|
<button
|
|
@@ -838,7 +838,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
838
838
|
function createTdFormControlBridge() {
|
|
839
839
|
const injector = inject(Injector);
|
|
840
840
|
const cdr = inject(ChangeDetectorRef);
|
|
841
|
-
const cvaDisabled = signal(false,
|
|
841
|
+
const cvaDisabled = signal(false, /* @ts-ignore */
|
|
842
|
+
...(ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []));
|
|
842
843
|
let onCvaTouched = () => undefined;
|
|
843
844
|
const usesSignalForms = () => !!injector.get(FORM_FIELD, null, { self: true, optional: true });
|
|
844
845
|
return {
|
|
@@ -887,31 +888,55 @@ class TdCheckbox {
|
|
|
887
888
|
formBridge = createTdFormControlBridge();
|
|
888
889
|
generatedId = `td-checkbox-${++checkboxSequence}`;
|
|
889
890
|
nativeInput;
|
|
890
|
-
id = input('',
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
891
|
+
id = input('', /* @ts-ignore */
|
|
892
|
+
...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
|
|
893
|
+
label = input('Opción', /* @ts-ignore */
|
|
894
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
895
|
+
description = input('', /* @ts-ignore */
|
|
896
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
897
|
+
hint = input('', /* @ts-ignore */
|
|
898
|
+
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
899
|
+
dark = input(false, /* @ts-ignore */
|
|
900
|
+
...(ngDevMode ? [{ debugName: "dark" }] : /* istanbul ignore next */ []));
|
|
901
|
+
name = input('', /* @ts-ignore */
|
|
902
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
903
|
+
disabled = input(false, /* @ts-ignore */
|
|
904
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
905
|
+
disabledReasons = input([], /* @ts-ignore */
|
|
906
|
+
...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
907
|
+
readonly = input(false, /* @ts-ignore */
|
|
908
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
909
|
+
hidden = input(false, /* @ts-ignore */
|
|
910
|
+
...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
911
|
+
invalid = input(false, /* @ts-ignore */
|
|
912
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
913
|
+
pending = input(false, /* @ts-ignore */
|
|
914
|
+
...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
915
|
+
dirty = input(false, /* @ts-ignore */
|
|
916
|
+
...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
917
|
+
required = input(false, /* @ts-ignore */
|
|
918
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
919
|
+
errors = input([], /* @ts-ignore */
|
|
920
|
+
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
921
|
+
touched = model(false, /* @ts-ignore */
|
|
922
|
+
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
906
923
|
touch = output();
|
|
907
|
-
error = input('',
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
924
|
+
error = input('', /* @ts-ignore */
|
|
925
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
926
|
+
errorDisplay = input('auto', /* @ts-ignore */
|
|
927
|
+
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
928
|
+
checked = model(false, /* @ts-ignore */
|
|
929
|
+
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
930
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
931
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
932
|
+
fieldError = computed(() => this.errors()[0]?.message || '', /* @ts-ignore */
|
|
933
|
+
...(ngDevMode ? [{ debugName: "fieldError" }] : /* istanbul ignore next */ []));
|
|
934
|
+
shouldDisplayFieldError = computed(() => this.formBridge.shouldDisplayError(this.errorDisplay(), this.invalid(), !!this.fieldError(), this.touched(), this.dirty()), /* @ts-ignore */
|
|
935
|
+
...(ngDevMode ? [{ debugName: "shouldDisplayFieldError" }] : /* istanbul ignore next */ []));
|
|
936
|
+
displayError = computed(() => this.error() || (this.shouldDisplayFieldError() ? this.fieldError() : ''), /* @ts-ignore */
|
|
937
|
+
...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
938
|
+
hasError = computed(() => !!this.error() || this.shouldDisplayFieldError(), /* @ts-ignore */
|
|
939
|
+
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
915
940
|
get inputId() {
|
|
916
941
|
return this.id() || this.generatedId;
|
|
917
942
|
}
|
|
@@ -955,8 +980,8 @@ class TdCheckbox {
|
|
|
955
980
|
handleBlur() {
|
|
956
981
|
this.formBridge.markTouched(this.touched, this.touch);
|
|
957
982
|
}
|
|
958
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
959
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
983
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
984
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdCheckbox, isStandalone: true, selector: "td-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", checked: "checkedChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
960
985
|
{
|
|
961
986
|
provide: NG_VALUE_ACCESSOR,
|
|
962
987
|
useExisting: forwardRef(() => TdCheckbox),
|
|
@@ -1013,7 +1038,7 @@ class TdCheckbox {
|
|
|
1013
1038
|
}
|
|
1014
1039
|
`, 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 });
|
|
1015
1040
|
}
|
|
1016
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1041
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdCheckbox, decorators: [{
|
|
1017
1042
|
type: Component,
|
|
1018
1043
|
args: [{ selector: 'td-checkbox', imports: [TdIcon], template: `
|
|
1019
1044
|
<label
|
|
@@ -1081,6 +1106,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1081
1106
|
|
|
1082
1107
|
class TdDataTable {
|
|
1083
1108
|
viewport;
|
|
1109
|
+
imagenDialog;
|
|
1084
1110
|
datos = [];
|
|
1085
1111
|
columnas = [];
|
|
1086
1112
|
acciones = [];
|
|
@@ -1102,9 +1128,11 @@ class TdDataTable {
|
|
|
1102
1128
|
debounceBusqueda = 250;
|
|
1103
1129
|
busquedaChange = new EventEmitter();
|
|
1104
1130
|
accion = new EventEmitter();
|
|
1131
|
+
imagenClick = new EventEmitter();
|
|
1105
1132
|
botonClick = new EventEmitter();
|
|
1106
1133
|
cargarMas = new EventEmitter();
|
|
1107
1134
|
busqueda = '';
|
|
1135
|
+
imagenActiva = null;
|
|
1108
1136
|
timeoutBusqueda = null;
|
|
1109
1137
|
datosAnteriores = [];
|
|
1110
1138
|
recalculoPendiente = null;
|
|
@@ -1158,8 +1186,29 @@ class TdDataTable {
|
|
|
1158
1186
|
return valor ? 'Sí' : 'No';
|
|
1159
1187
|
if (columna.tipo === 'estado')
|
|
1160
1188
|
return valor ? 'Activo' : 'Inactivo';
|
|
1189
|
+
if (columna.tipo === 'fecha' || columna.tipo === 'fechaHora' || columna.tipo === 'hora') {
|
|
1190
|
+
return this.formatearFecha(valor, columna);
|
|
1191
|
+
}
|
|
1192
|
+
if (columna.tipo === 'numero' ||
|
|
1193
|
+
columna.tipo === 'decimal' ||
|
|
1194
|
+
columna.tipo === 'moneda' ||
|
|
1195
|
+
columna.tipo === 'porcentaje') {
|
|
1196
|
+
return this.formatearNumero(valor, columna);
|
|
1197
|
+
}
|
|
1161
1198
|
return String(valor);
|
|
1162
1199
|
}
|
|
1200
|
+
imagenSrc(columna, fila, indice) {
|
|
1201
|
+
const valor = this.valor(fila, columna.clave);
|
|
1202
|
+
const src = columna.imagen?.src?.(valor, fila, indice) ?? valor;
|
|
1203
|
+
return typeof src === 'string' ? src.trim() : '';
|
|
1204
|
+
}
|
|
1205
|
+
imagenAlt(columna, fila, indice) {
|
|
1206
|
+
const valor = this.valor(fila, columna.clave);
|
|
1207
|
+
return columna.imagen?.alt?.(valor, fila, indice) || this.textoCelda(columna, fila, indice);
|
|
1208
|
+
}
|
|
1209
|
+
imagenForma(columna) {
|
|
1210
|
+
return columna.imagen?.forma ?? 'redondeada';
|
|
1211
|
+
}
|
|
1163
1212
|
tonoCelda(columna, fila) {
|
|
1164
1213
|
const valor = this.valor(fila, columna.clave);
|
|
1165
1214
|
if (columna.tono)
|
|
@@ -1171,7 +1220,11 @@ class TdDataTable {
|
|
|
1171
1220
|
return 'neutro';
|
|
1172
1221
|
}
|
|
1173
1222
|
accionesVisibles(fila) {
|
|
1174
|
-
return this.acciones.filter((accion) =>
|
|
1223
|
+
return this.acciones.filter((accion) => {
|
|
1224
|
+
if (accion.condicion && !accion.condicion(fila))
|
|
1225
|
+
return false;
|
|
1226
|
+
return accion.visible?.(fila) ?? true;
|
|
1227
|
+
});
|
|
1175
1228
|
}
|
|
1176
1229
|
iconoAccion(accion, fila) {
|
|
1177
1230
|
return typeof accion.icono === 'function' ? accion.icono(fila) : accion.icono;
|
|
@@ -1192,6 +1245,36 @@ class TdDataTable {
|
|
|
1192
1245
|
return;
|
|
1193
1246
|
this.accion.emit({ accion, fila, indice });
|
|
1194
1247
|
}
|
|
1248
|
+
abrirImagen(columna, fila, indice) {
|
|
1249
|
+
const src = this.imagenSrc(columna, fila, indice);
|
|
1250
|
+
if (!src || columna.imagen?.clickeable === false)
|
|
1251
|
+
return;
|
|
1252
|
+
const alt = this.imagenAlt(columna, fila, indice);
|
|
1253
|
+
this.imagenActiva = { src, alt };
|
|
1254
|
+
setTimeout(() => {
|
|
1255
|
+
const dialog = this.imagenDialog?.nativeElement;
|
|
1256
|
+
if (dialog && !dialog.open)
|
|
1257
|
+
dialog.showModal();
|
|
1258
|
+
});
|
|
1259
|
+
this.imagenClick.emit({
|
|
1260
|
+
columna,
|
|
1261
|
+
fila,
|
|
1262
|
+
indice,
|
|
1263
|
+
src,
|
|
1264
|
+
alt,
|
|
1265
|
+
});
|
|
1266
|
+
}
|
|
1267
|
+
cerrarImagen() {
|
|
1268
|
+
const dialog = this.imagenDialog?.nativeElement;
|
|
1269
|
+
if (dialog?.open)
|
|
1270
|
+
dialog.close();
|
|
1271
|
+
this.imagenActiva = null;
|
|
1272
|
+
}
|
|
1273
|
+
cerrarImagenSiBackdrop(event) {
|
|
1274
|
+
if (event.target instanceof HTMLDialogElement) {
|
|
1275
|
+
this.cerrarImagen();
|
|
1276
|
+
}
|
|
1277
|
+
}
|
|
1195
1278
|
marcarScrollUsuario() {
|
|
1196
1279
|
this.scrollDeUsuarioPendiente = true;
|
|
1197
1280
|
}
|
|
@@ -1253,15 +1336,78 @@ class TdDataTable {
|
|
|
1253
1336
|
this.cargarMas.emit();
|
|
1254
1337
|
}
|
|
1255
1338
|
}
|
|
1256
|
-
|
|
1257
|
-
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", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", 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 class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.max-height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\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 </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__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: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1339
|
+
formatearFecha(valor, columna) {
|
|
1340
|
+
const fecha = this.normalizarFecha(valor);
|
|
1341
|
+
if (!fecha)
|
|
1342
|
+
return '—';
|
|
1343
|
+
const opcionesPorTipo = {
|
|
1344
|
+
fecha: { day: '2-digit', month: '2-digit', year: 'numeric' },
|
|
1345
|
+
fechaHora: {
|
|
1346
|
+
day: '2-digit',
|
|
1347
|
+
month: '2-digit',
|
|
1348
|
+
year: 'numeric',
|
|
1349
|
+
hour: '2-digit',
|
|
1350
|
+
minute: '2-digit',
|
|
1351
|
+
},
|
|
1352
|
+
hora: { hour: '2-digit', minute: '2-digit' },
|
|
1353
|
+
};
|
|
1354
|
+
try {
|
|
1355
|
+
return new Intl.DateTimeFormat(columna.locale ?? 'es-PE', columna.formatoFecha ?? opcionesPorTipo[columna.tipo ?? 'fecha']).format(fecha);
|
|
1356
|
+
}
|
|
1357
|
+
catch {
|
|
1358
|
+
return String(valor);
|
|
1359
|
+
}
|
|
1360
|
+
}
|
|
1361
|
+
normalizarFecha(valor) {
|
|
1362
|
+
if (valor instanceof Date)
|
|
1363
|
+
return Number.isNaN(valor.getTime()) ? null : valor;
|
|
1364
|
+
if (typeof valor === 'number' || typeof valor === 'string') {
|
|
1365
|
+
const fecha = new Date(valor);
|
|
1366
|
+
return Number.isNaN(fecha.getTime()) ? null : fecha;
|
|
1367
|
+
}
|
|
1368
|
+
return null;
|
|
1369
|
+
}
|
|
1370
|
+
formatearNumero(valor, columna) {
|
|
1371
|
+
const numero = typeof valor === 'number' ? valor : Number(valor);
|
|
1372
|
+
if (!Number.isFinite(numero))
|
|
1373
|
+
return String(valor);
|
|
1374
|
+
const opciones = {
|
|
1375
|
+
...(columna.formatoNumero ?? {}),
|
|
1376
|
+
};
|
|
1377
|
+
if (columna.tipo === 'decimal') {
|
|
1378
|
+
opciones.minimumFractionDigits ??= columna.decimales ?? 2;
|
|
1379
|
+
opciones.maximumFractionDigits ??= columna.decimales ?? 2;
|
|
1380
|
+
}
|
|
1381
|
+
if (columna.tipo === 'moneda') {
|
|
1382
|
+
opciones.style = 'currency';
|
|
1383
|
+
opciones.currency = columna.moneda ?? 'PEN';
|
|
1384
|
+
opciones.minimumFractionDigits ??= columna.decimales ?? 2;
|
|
1385
|
+
opciones.maximumFractionDigits ??= columna.decimales ?? 2;
|
|
1386
|
+
}
|
|
1387
|
+
if (columna.tipo === 'porcentaje') {
|
|
1388
|
+
opciones.style = 'percent';
|
|
1389
|
+
opciones.minimumFractionDigits ??= columna.decimales ?? 0;
|
|
1390
|
+
opciones.maximumFractionDigits ??= columna.decimales ?? 2;
|
|
1391
|
+
}
|
|
1392
|
+
try {
|
|
1393
|
+
return new Intl.NumberFormat(columna.locale ?? 'es-PE', opciones).format(numero);
|
|
1394
|
+
}
|
|
1395
|
+
catch {
|
|
1396
|
+
return String(valor);
|
|
1397
|
+
}
|
|
1398
|
+
}
|
|
1399
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDataTable, isStandalone: true, selector: "td-data-table", inputs: { datos: "datos", columnas: "columnas", acciones: "acciones", botones: "botones", total: "total", cargando: "cargando", puedeCargarMas: "puedeCargarMas", virtualizar: "virtualizar", virtualizarDesde: "virtualizarDesde", itemSize: "itemSize", filasAntesDeCargar: "filasAntesDeCargar", altura: "altura", campoId: "campoId", oscuro: "oscuro", mostrarBusqueda: "mostrarBusqueda", placeholderBusqueda: "placeholderBusqueda", textoVacio: "textoVacio", descripcionVacio: "descripcionVacio", debounceBusqueda: "debounceBusqueda" }, outputs: { busquedaChange: "busquedaChange", accion: "accion", imagenClick: "imagenClick", botonClick: "botonClick", cargarMas: "cargarMas" }, viewQueries: [{ propertyName: "viewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "imagenDialog", first: true, predicate: ["imagenDialog"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<section class=\"td-tabla\" [class.td-tabla--oscura]=\"oscuro\">\n <div class=\"td-tabla__toolbar\">\n <div class=\"td-tabla__filtros\">\n @if (mostrarBusqueda) {\n <label class=\"td-tabla__busqueda\">\n <td-icon nombre=\"search\" />\n <input\n type=\"search\"\n [(ngModel)]=\"busqueda\"\n [placeholder]=\"placeholderBusqueda\"\n (input)=\"buscar()\"\n />\n @if (busqueda) {\n <button type=\"button\" title=\"Limpiar b\u00FAsqueda\" (click)=\"limpiarBusqueda()\">\n <td-icon nombre=\"close\" tamano=\"1rem\" />\n </button>\n }\n </label>\n }\n <ng-content select=\"[tdDataTableFilters]\" />\n </div>\n </div>\n\n <div class=\"td-tabla__superficie\">\n <div class=\"td-tabla__resumen\">\n <span><strong>{{ datos.length }}</strong> de {{ total || datos.length }} registros</span>\n <div class=\"td-tabla__resumen-acciones\">\n <ng-content select=\"[tdDataTableActions]\" />\n @for (boton of botonesVisibles(); track boton.id) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__boton td-tabla__boton--' + (boton.tono || 'neutro')\"\n [disabled]=\"boton.deshabilitado\"\n (click)=\"botonClick.emit(boton)\"\n >\n <td-icon [nombre]=\"boton.icono\" />\n <span>{{ boton.etiqueta }}</span>\n </button>\n }\n </div>\n </div>\n\n @if (datos.length) {\n <div class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.max-height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @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 </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{padding:.75rem}.td-tabla-imagen{width:calc(100vw - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i2.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i2.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i2.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1258
1401
|
}
|
|
1259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1402
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDataTable, decorators: [{
|
|
1260
1403
|
type: Component,
|
|
1261
|
-
args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, 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 class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.max-height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (\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 </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__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"] }]
|
|
1404
|
+
args: [{ selector: 'td-data-table', imports: [FormsModule, NgTemplateOutlet, 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 class=\"td-tabla__scroll-x\">\n <div class=\"td-tabla__contenido\" [style.--td-tabla-columnas]=\"columnasGrid()\">\n <div class=\"td-tabla__encabezado\" role=\"row\">\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"columnheader\"\n [class]=\"'td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n {{ columna.encabezado }}\n </div>\n }\n @if (acciones.length) {\n <div role=\"columnheader\" class=\"td-tabla__alinear--centro\">Acciones</div>\n }\n </div>\n\n @if (usaVirtualizacion()) {\n <cdk-virtual-scroll-viewport\n class=\"td-tabla__viewport\"\n [itemSize]=\"itemSize\"\n [style.height]=\"altura\"\n (scroll)=\"alDesplazarViewport()\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n <ng-container\n *cdkVirtualFor=\"let fila of datos; let indice = index; trackBy: trackFila\"\n >\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n </ng-container>\n </cdk-virtual-scroll-viewport>\n } @else {\n <div\n class=\"td-tabla__viewport td-tabla__viewport--normal\"\n [style.max-height]=\"altura\"\n (scroll)=\"alDesplazarLista($event)\"\n (wheel)=\"marcarScrollUsuario()\"\n (touchmove)=\"marcarScrollUsuario()\"\n (keydown.arrowdown)=\"marcarScrollUsuario()\"\n (keydown.pagedown)=\"marcarScrollUsuario()\"\n (keydown.end)=\"marcarScrollUsuario()\"\n >\n @for (fila of datos; track trackFila($index, fila); let indice = $index) {\n <ng-container\n [ngTemplateOutlet]=\"filaTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: fila, indice: indice }\"\n />\n }\n </div>\n }\n </div>\n </div>\n\n <ng-template #filaTemplate let-fila let-indice=\"indice\">\n <div\n class=\"td-tabla__fila\"\n role=\"row\"\n [style.height.px]=\"itemSize\"\n >\n @for (columna of columnas; track columna.clave) {\n <div\n role=\"cell\"\n [class]=\"'td-tabla__celda td-tabla__alinear--' + (columna.alineacion || 'inicio')\"\n >\n @if (columna.tipo === 'imagen') {\n @if (imagenSrc(columna, fila, indice); as src) {\n <button\n type=\"button\"\n [class]=\"'td-tabla__imagen td-tabla__imagen--' + imagenForma(columna)\"\n [title]=\"imagenAlt(columna, fila, indice)\"\n (click)=\"abrirImagen(columna, fila, indice)\"\n >\n <img [src]=\"src\" [alt]=\"imagenAlt(columna, fila, indice)\" loading=\"lazy\" />\n </button>\n } @else {\n <span\n [class]=\"'td-tabla__imagen td-tabla__imagen--placeholder td-tabla__imagen--' + imagenForma(columna)\"\n >\n <td-icon [nombre]=\"columna.imagen?.placeholder || 'image'\" />\n </span>\n }\n } @else if (\n columna.tipo === 'estado' ||\n columna.tipo === 'booleano' ||\n columna.tipo === 'chip'\n ) {\n <span [class]=\"'td-tabla__chip td-tabla__chip--' + tonoCelda(columna, fila)\">\n {{ textoCelda(columna, fila, indice) }}\n </span>\n } @else {\n <span\n [class.td-tabla__numero]=\"\n columna.tipo === 'numero' ||\n columna.tipo === 'decimal' ||\n columna.tipo === 'moneda' ||\n columna.tipo === 'porcentaje'\n \"\n >\n {{ textoCelda(columna, fila, indice) }}\n </span>\n }\n </div>\n }\n\n @if (acciones.length) {\n <div class=\"td-tabla__acciones-fila\" role=\"cell\">\n @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 </ng-template>\n\n @if (cargando) {\n <div class=\"td-tabla__cargando\" role=\"status\" aria-live=\"polite\">\n <i aria-hidden=\"true\"></i>\n <span>Cargando m\u00E1s registros...</span>\n </div>\n }\n } @else if (!cargando) {\n <div class=\"td-tabla__vacio\">\n <span><td-icon nombre=\"inbox\" tamano=\"2.4rem\" /></span>\n <h3>{{ textoVacio }}</h3>\n <p>{{ descripcionVacio }}</p>\n </div>\n }\n\n @if (cargando && !datos.length) {\n <div class=\"td-tabla__skeleton\">\n @for (item of [1, 2, 3, 4, 5]; track item) {\n <span></span>\n }\n </div>\n }\n </div>\n</section>\n\n@if (imagenActiva; as imagen) {\n <dialog\n #imagenDialog\n class=\"td-tabla-imagen\"\n [attr.aria-label]=\"imagen.alt\"\n (click)=\"cerrarImagenSiBackdrop($event)\"\n (cancel)=\"cerrarImagen()\"\n (close)=\"imagenActiva = null\"\n >\n <section class=\"td-tabla-imagen__panel\">\n <header>\n <span>{{ imagen.alt }}</span>\n <button type=\"button\" aria-label=\"Cerrar\" (click)=\"cerrarImagen()\">\n <td-icon nombre=\"close\" />\n </button>\n </header>\n <div>\n <img [src]=\"imagen.src\" [alt]=\"imagen.alt\" />\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-tabla{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--hover: var(--td-color-surface-soft, #f7f8fc);--acento: var(--td-color-primary, #5746d8);color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);position:relative;z-index:0;isolation:isolate;contain:layout paint style;overflow-anchor:none}.td-tabla--oscura{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--hover: var(--td-color-surface-muted, #202028);--acento: var(--td-color-primary, #a89cf7)}.td-tabla__toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.55rem 0 .95rem}.td-tabla__filtros{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:.8rem .65rem}.td-tabla__busqueda{display:flex;width:min(22rem,100%);min-height:3.15rem;align-items:center;gap:.6rem;border:1px solid var(--borde);border-radius:var(--td-radius-md, .78rem);padding:0 .75rem;color:var(--suave);background:var(--fondo);transition:border-color .14s ease,box-shadow .14s ease}.td-tabla__busqueda:focus-within{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 15%, transparent))}.td-tabla__busqueda input{min-width:0;flex:1;border:0;appearance:none;outline:0;color:var(--texto);background:transparent;font:inherit;font-size:.78rem}.td-tabla__busqueda input::-webkit-search-cancel-button,.td-tabla__busqueda input::-webkit-search-decoration{appearance:none;display:none}.td-tabla__busqueda input::-ms-clear,.td-tabla__busqueda input::-ms-reveal{display:none;width:0;height:0}.td-tabla__busqueda button{display:grid;place-items:center;border:0;padding:.2rem;color:var(--suave);background:transparent;cursor:pointer}.td-tabla__vacio button,.td-tabla__boton{display:inline-flex;height:2.55rem;align-items:center;gap:.45rem;border:0;border-radius:var(--td-radius-md, .7rem);padding:0 1rem;color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2));font-size:.75rem;font-weight:750;cursor:pointer}.td-tabla__resumen-acciones{display:flex;align-items:center;gap:.45rem}.td-tabla__boton{height:2.15rem;padding:0 .75rem;box-shadow:none;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5)}.td-tabla__boton--primario{color:var(--td-color-on-primary, #fff);background:linear-gradient(135deg,var(--td-color-primary, #5746d8),var(--td-color-info, #7657df));box-shadow:var(--td-shadow-sm, 0 7px 16px rgba(87, 70, 216, .2))}.td-tabla__boton--exito{color:var(--td-color-on-primary, #fff);background:var(--td-color-success, #168447)}.td-tabla__boton--advertencia{color:var(--td-color-on-primary, #fff);background:var(--td-color-warning, #b66d05)}.td-tabla__boton--peligro{color:var(--td-color-on-primary, #fff);background:var(--td-color-danger, #d33f3f)}.td-tabla__boton:disabled{opacity:.45;cursor:not-allowed}.td-tabla__superficie{position:relative;z-index:0;overflow:hidden;border:1px solid var(--borde);border-radius:var(--td-radius-xl, 1rem);background:var(--fondo);box-shadow:var(--td-shadow-sm, 0 12px 32px rgba(31, 42, 68, .06))}.td-tabla__resumen{display:flex;min-height:3rem;align-items:center;justify-content:space-between;border-bottom:1px solid var(--borde);padding:.7rem 1rem;color:var(--suave);background:var(--fondo-suave);font-size:.7rem}.td-tabla__resumen strong{color:var(--texto)}.td-tabla__cargando{position:absolute;z-index:4;right:0;bottom:0;left:0;display:flex;min-height:2.75rem;align-items:center;justify-content:center;gap:.55rem;border-top:1px solid var(--borde);color:var(--suave);background:color-mix(in srgb,var(--fondo-suave) 94%,transparent);box-shadow:0 -8px 20px color-mix(in srgb,var(--texto) 8%,transparent);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);font-size:.7rem;font-weight:650;pointer-events:none}.td-tabla__cargando i{width:.85rem;height:.85rem;border:2px solid var(--borde);border-top-color:var(--acento);border-radius:var(--td-radius-pill, 50%);animation:td-tabla-girar .7s linear infinite}.td-tabla__encabezado,.td-tabla__fila{display:grid;align-items:center;grid-template-columns:var(--td-tabla-columnas)}.td-tabla__scroll-x{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 42%,transparent) transparent}.td-tabla__contenido{display:grid;grid-template-columns:var(--td-tabla-columnas);min-width:max-content}.td-tabla__encabezado{position:relative;z-index:2;grid-column:1/-1;min-height:2.75rem;border-bottom:1px solid var(--borde);color:var(--suave);background:var(--fondo-suave);font-size:.62rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.td-tabla__encabezado>div,.td-tabla__celda{padding:.6rem 1rem}.td-tabla__viewport{grid-column:1/-1;width:100%;min-width:0;min-height:12rem;overflow-x:hidden;overflow-anchor:none;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--suave) 45%,transparent) transparent}.td-tabla__viewport--normal{overflow-x:hidden;overflow-y:auto}.td-tabla__fila{grid-column:1/-1;border-bottom:1px solid var(--borde);transition:background .12s ease}.td-tabla__fila:hover{background:var(--hover)}.td-tabla__celda{overflow:hidden;color:var(--texto);font-size:.75rem;text-overflow:ellipsis;white-space:nowrap}.td-tabla__numero{font-variant-numeric:tabular-nums}.td-tabla__alinear--inicio{text-align:left}.td-tabla__alinear--centro{text-align:center;justify-content:center}.td-tabla__alinear--fin{text-align:right;justify-content:flex-end}.td-tabla__imagen{display:inline-grid;width:2.35rem;height:2.35rem;place-items:center;overflow:hidden;border:1px solid var(--borde);padding:0;color:var(--suave);background:var(--fondo-suave);vertical-align:middle}button.td-tabla__imagen{cursor:zoom-in}button.td-tabla__imagen:hover{border-color:var(--acento);box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--acento) 14%, transparent))}.td-tabla__imagen img{width:100%;height:100%;object-fit:cover}.td-tabla__imagen--cuadrada{border-radius:var(--td-radius-sm, .55rem)}.td-tabla__imagen--redondeada{border-radius:var(--td-radius-md, .85rem)}.td-tabla__imagen--circular{border-radius:var(--td-radius-pill, 999px)}.td-tabla__imagen--placeholder{border-style:dashed}.td-tabla__chip{display:inline-flex;border-radius:var(--td-radius-pill, 999px);padding:.25rem .55rem;color:var(--td-color-text-muted, #526077);background:var(--td-color-surface-muted, #edf0f5);font-size:.65rem;font-weight:750}.td-tabla__chip--primario{color:var(--td-color-primary, #4f46e5);background:var(--td-color-primary-soft, #eeecff)}.td-tabla__chip--exito{color:var(--td-color-success, #13713a);background:var(--td-color-success-soft, #dff7e8)}.td-tabla__chip--advertencia{color:var(--td-color-warning, #9a5a05);background:var(--td-color-warning-soft, #fff0cf)}.td-tabla__chip--peligro{color:var(--td-color-danger, #b53434);background:var(--td-color-danger-soft, #fee5e5)}.td-tabla__acciones-fila{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:0 .7rem}.td-tabla__accion{display:grid;width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--suave);background:transparent;cursor:pointer}.td-tabla__accion:hover{background:var(--hover);color:var(--acento)}.td-tabla__accion--exito{color:var(--td-color-success, #168447)}.td-tabla__accion--peligro{color:var(--td-color-danger, #dc3e3e)}.td-tabla__accion--advertencia{color:var(--td-color-warning, #b66d05)}.td-tabla__accion:disabled{opacity:.35;cursor:not-allowed}.td-tabla__vacio{display:grid;min-height:21rem;place-items:center;align-content:center;padding:2rem;text-align:center}.td-tabla__vacio>span{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.2rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,transparent)}.td-tabla__vacio h3{margin:1rem 0 .3rem;font-size:1rem}.td-tabla__vacio p{margin:0 0 1.25rem;color:var(--suave);font-size:.75rem}.td-tabla__skeleton{padding:.5rem 1rem}.td-tabla__skeleton span{display:block;height:3.5rem;border-bottom:1px solid var(--borde);background:linear-gradient(90deg,transparent,var(--hover),transparent);background-size:200% 100%;animation:td-tabla-cargar 1.2s linear infinite}.td-tabla__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}@keyframes td-tabla-girar{to{transform:rotate(360deg)}}@keyframes td-tabla-cargar{to{background-position:-200% 0}}.td-tabla-imagen{width:min(680px,100vw - 2rem);max-width:none;max-height:min(76dvh,620px);border:0;padding:0;overflow:visible;color:inherit;background:transparent}.td-tabla-imagen::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-tabla-imagen__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(76dvh,620px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-tabla-imagen__panel header{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-tabla-imagen__panel span{overflow:hidden;color:var(--td-color-text, #263147);font-size:.78rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.td-tabla-imagen__panel button{display:grid;width:2.1rem;height:2.1rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-tabla-imagen__panel>div{display:grid;min-height:18rem;overflow:hidden;padding:1rem;background:var(--td-color-surface-soft, #f8fafc)}.td-tabla-imagen__panel img{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);margin:auto;border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16))}@media(max-width:640px){.td-tabla__toolbar{align-items:stretch;flex-direction:column}.td-tabla__busqueda{width:100%}.td-tabla__resumen{align-items:flex-start;flex-direction:column}.td-tabla__resumen-acciones{width:100%;flex-wrap:wrap}.td-tabla-imagen{padding:.75rem}.td-tabla-imagen{width:calc(100vw - 1.5rem)}.td-tabla-imagen__panel{width:100%;max-height:calc(100dvh - 1.5rem);height:auto;border-radius:var(--td-radius-xl, 1rem)}.td-tabla-imagen__panel>div{min-height:14rem;padding:.75rem}.td-tabla-imagen__panel img{max-height:calc(100dvh - 7rem)}}\n"] }]
|
|
1262
1405
|
}], propDecorators: { viewport: [{
|
|
1263
1406
|
type: ViewChild,
|
|
1264
1407
|
args: [CdkVirtualScrollViewport]
|
|
1408
|
+
}], imagenDialog: [{
|
|
1409
|
+
type: ViewChild,
|
|
1410
|
+
args: ['imagenDialog']
|
|
1265
1411
|
}], datos: [{
|
|
1266
1412
|
type: Input
|
|
1267
1413
|
}], columnas: [{
|
|
@@ -1304,6 +1450,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
1304
1450
|
type: Output
|
|
1305
1451
|
}], accion: [{
|
|
1306
1452
|
type: Output
|
|
1453
|
+
}], imagenClick: [{
|
|
1454
|
+
type: Output
|
|
1307
1455
|
}], botonClick: [{
|
|
1308
1456
|
type: Output
|
|
1309
1457
|
}], cargarMas: [{
|
|
@@ -1335,30 +1483,49 @@ class TdDatePicker {
|
|
|
1335
1483
|
placeholder = 'Selecciona una fecha';
|
|
1336
1484
|
mode = 'fecha';
|
|
1337
1485
|
hint = '';
|
|
1338
|
-
name = input('',
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1486
|
+
name = input('', /* @ts-ignore */
|
|
1487
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
1488
|
+
disabled = input(false, /* @ts-ignore */
|
|
1489
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
1490
|
+
disabledReasons = input([], /* @ts-ignore */
|
|
1491
|
+
...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
1492
|
+
readonly = input(false, /* @ts-ignore */
|
|
1493
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
1494
|
+
hidden = input(false, /* @ts-ignore */
|
|
1495
|
+
...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
1496
|
+
invalid = input(false, /* @ts-ignore */
|
|
1497
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
1498
|
+
pending = input(false, /* @ts-ignore */
|
|
1499
|
+
...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
1500
|
+
dirty = input(false, /* @ts-ignore */
|
|
1501
|
+
...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
1502
|
+
required = input(false, /* @ts-ignore */
|
|
1503
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
1504
|
+
errors = input([], /* @ts-ignore */
|
|
1505
|
+
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
1506
|
+
touched = model(false, /* @ts-ignore */
|
|
1507
|
+
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
1349
1508
|
touch = output();
|
|
1350
|
-
error = input('',
|
|
1351
|
-
|
|
1509
|
+
error = input('', /* @ts-ignore */
|
|
1510
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
1511
|
+
errorDisplay = input('auto', /* @ts-ignore */
|
|
1512
|
+
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
1352
1513
|
minDate = null;
|
|
1353
1514
|
maxDate = null;
|
|
1354
1515
|
clearable = true;
|
|
1355
1516
|
dark = false;
|
|
1356
|
-
value = model(null,
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1517
|
+
value = model(null, /* @ts-ignore */
|
|
1518
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
1519
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
1520
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1521
|
+
fieldError = computed(() => this.errors()[0]?.message || '', /* @ts-ignore */
|
|
1522
|
+
...(ngDevMode ? [{ debugName: "fieldError" }] : /* istanbul ignore next */ []));
|
|
1523
|
+
shouldDisplayFieldError = computed(() => this.formBridge.shouldDisplayError(this.errorDisplay(), this.invalid(), !!this.fieldError(), this.touched(), this.dirty()), /* @ts-ignore */
|
|
1524
|
+
...(ngDevMode ? [{ debugName: "shouldDisplayFieldError" }] : /* istanbul ignore next */ []));
|
|
1525
|
+
displayError = computed(() => this.error() || (this.shouldDisplayFieldError() ? this.fieldError() : ''), /* @ts-ignore */
|
|
1526
|
+
...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
1527
|
+
hasError = computed(() => !!this.error() || this.shouldDisplayFieldError(), /* @ts-ignore */
|
|
1528
|
+
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
1362
1529
|
selectionChange = new EventEmitter();
|
|
1363
1530
|
openedChange = new EventEmitter();
|
|
1364
1531
|
open = false;
|
|
@@ -1707,8 +1874,8 @@ class TdDatePicker {
|
|
|
1707
1874
|
return !((typeof this.minDate === 'string' && last < this.minDate) ||
|
|
1708
1875
|
(typeof this.maxDate === 'string' && first > this.maxDate));
|
|
1709
1876
|
}
|
|
1710
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1711
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1877
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDatePicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1878
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDatePicker, isStandalone: true, selector: "td-date-picker", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange", selectionChange: "selectionChange", openedChange: "openedChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
1712
1879
|
{
|
|
1713
1880
|
provide: NG_VALUE_ACCESSOR,
|
|
1714
1881
|
useExisting: forwardRef(() => TdDatePicker),
|
|
@@ -1885,7 +2052,7 @@ class TdDatePicker {
|
|
|
1885
2052
|
</ng-template>
|
|
1886
2053
|
`, 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 });
|
|
1887
2054
|
}
|
|
1888
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2055
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDatePicker, decorators: [{
|
|
1889
2056
|
type: Component,
|
|
1890
2057
|
args: [{ selector: 'td-date-picker', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], template: `
|
|
1891
2058
|
<div
|
|
@@ -2122,8 +2289,8 @@ class TdDialogPanel {
|
|
|
2122
2289
|
typeof window.matchMedia === 'function' &&
|
|
2123
2290
|
window.matchMedia('(max-width: 600px), (pointer: coarse)').matches;
|
|
2124
2291
|
}
|
|
2125
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2292
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2293
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdDialogPanel, isStandalone: true, selector: "td-dialog-panel", ngImport: i0, template: `
|
|
2127
2294
|
<section
|
|
2128
2295
|
class="td-dialog"
|
|
2129
2296
|
cdkDrag
|
|
@@ -2177,7 +2344,7 @@ class TdDialogPanel {
|
|
|
2177
2344
|
</section>
|
|
2178
2345
|
`, 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__drag-zone{display:flex;min-width:0;flex:1;align-items:center;gap:.85rem}.td-dialog--draggable .td-dialog__drag-zone{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.td-dialog--draggable .td-dialog__drag-zone:active{cursor:grabbing}.td-dialog__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:var(--td-radius-md, .75rem);color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #eeecff)}.td-dialog--oscuro .td-dialog__icono{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292540)}.td-dialog__titulos{min-width:0;flex:1}.td-dialog__titulos h2{margin:0;font-size:1rem;line-height:1.3;letter-spacing:-.015em}.td-dialog__titulos p{margin:.2rem 0 0;color:var(--td-dialog-muted);font-size:.73rem;line-height:1.45}.td-dialog__cerrar{display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .65rem);color:var(--td-dialog-muted);background:transparent;cursor:pointer}.td-dialog__cerrar:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-dialog--oscuro .td-dialog__cerrar:hover{color:var(--td-color-primary, #b9b0fa);background:var(--td-color-primary-soft, #292931)}.td-dialog__contenido{display:flex;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:1.5rem;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent) transparent;scrollbar-width:thin}.td-dialog__contenido ::ng-deep>*{display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido ::ng-deep :has(>td-dialog-actions){display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido::-webkit-scrollbar{width:.42rem}.td-dialog__contenido::-webkit-scrollbar-track{background:transparent}.td-dialog__contenido::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent)}.td-dialog__contenido::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--td-dialog-muted) 58%,transparent)}.td-dialog--pantalla{height:100%}@keyframes td-dialog-enter{0%{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}}@media(max-width:600px){:host{border-radius:var(--td-radius-xl, 1rem)}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"], dependencies: [{ kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { 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 });
|
|
2179
2346
|
}
|
|
2180
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2347
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogPanel, decorators: [{
|
|
2181
2348
|
type: Component,
|
|
2182
2349
|
args: [{ selector: 'td-dialog-panel', imports: [CdkDrag, CdkDragHandle, NgComponentOutlet, TdIcon], template: `
|
|
2183
2350
|
<section
|
|
@@ -2297,19 +2464,19 @@ class TdDialog {
|
|
|
2297
2464
|
...extra,
|
|
2298
2465
|
];
|
|
2299
2466
|
}
|
|
2300
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2301
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
2467
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
2468
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialog, providedIn: 'root' });
|
|
2302
2469
|
}
|
|
2303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialog, decorators: [{
|
|
2304
2471
|
type: Injectable,
|
|
2305
2472
|
args: [{ providedIn: 'root' }]
|
|
2306
2473
|
}] });
|
|
2307
2474
|
|
|
2308
2475
|
class TdDialogActions {
|
|
2309
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2310
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
2476
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: TdDialogActions, isStandalone: true, selector: "td-dialog-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{bottom:-1.1rem;min-height:auto;align-items:stretch;flex-direction:column-reverse;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.7rem 1.1rem}:host ::ng-deep button{width:100%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2311
2478
|
}
|
|
2312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2479
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogActions, decorators: [{
|
|
2313
2480
|
type: Component,
|
|
2314
2481
|
args: [{ selector: 'td-dialog-actions', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:sticky;z-index:3;bottom:-1.5rem;display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{bottom:-1.1rem;min-height:auto;align-items:stretch;flex-direction:column-reverse;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.7rem 1.1rem}:host ::ng-deep button{width:100%}}\n"] }]
|
|
2315
2482
|
}] });
|
|
@@ -2320,10 +2487,10 @@ class TdDialogClose {
|
|
|
2320
2487
|
close() {
|
|
2321
2488
|
this.dialogRef.close(this.result);
|
|
2322
2489
|
}
|
|
2323
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2324
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2490
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2491
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: TdDialogClose, isStandalone: true, selector: "[tdDialogClose]", inputs: { result: ["tdDialogClose", "result"] }, host: { listeners: { "click": "close()" } }, ngImport: i0 });
|
|
2325
2492
|
}
|
|
2326
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2493
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogClose, decorators: [{
|
|
2327
2494
|
type: Directive,
|
|
2328
2495
|
args: [{
|
|
2329
2496
|
selector: '[tdDialogClose]',
|
|
@@ -2336,10 +2503,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2336
2503
|
args: ['click']
|
|
2337
2504
|
}] } });
|
|
2338
2505
|
class TdDialogPrimary {
|
|
2339
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2340
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
2506
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogPrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2507
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.4", type: TdDialogPrimary, isStandalone: true, selector: "[tdDialogPrimary]", ngImport: i0 });
|
|
2341
2508
|
}
|
|
2342
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdDialogPrimary, decorators: [{
|
|
2343
2510
|
type: Directive,
|
|
2344
2511
|
args: [{
|
|
2345
2512
|
selector: '[tdDialogPrimary]',
|
|
@@ -2353,10 +2520,10 @@ class TdFooter {
|
|
|
2353
2520
|
oscuro = false;
|
|
2354
2521
|
compacto = false;
|
|
2355
2522
|
anio = new Date().getFullYear();
|
|
2356
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2357
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
2523
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdFooter, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2524
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 });
|
|
2358
2525
|
}
|
|
2359
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2526
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdFooter, decorators: [{
|
|
2360
2527
|
type: Component,
|
|
2361
2528
|
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"] }]
|
|
2362
2529
|
}], propDecorators: { empresa: [{
|
|
@@ -2373,6 +2540,270 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
2373
2540
|
type: Input
|
|
2374
2541
|
}] } });
|
|
2375
2542
|
|
|
2543
|
+
class TdFileViewer {
|
|
2544
|
+
cdr = inject(ChangeDetectorRef);
|
|
2545
|
+
visorDialog;
|
|
2546
|
+
pdfCanvas;
|
|
2547
|
+
archivos = [];
|
|
2548
|
+
titulo = 'Archivos adjuntos';
|
|
2549
|
+
descripcion = 'Visualiza imagenes, PDF y descarga otros formatos.';
|
|
2550
|
+
oscuro = false;
|
|
2551
|
+
compacto = false;
|
|
2552
|
+
seleccionar = new EventEmitter();
|
|
2553
|
+
descargar = new EventEmitter();
|
|
2554
|
+
seleccionado = null;
|
|
2555
|
+
zoom = 1;
|
|
2556
|
+
rotacion = 0;
|
|
2557
|
+
pdfCargando = false;
|
|
2558
|
+
pdfError = '';
|
|
2559
|
+
pdfPaginaActual = 1;
|
|
2560
|
+
pdfTotalPaginas = 0;
|
|
2561
|
+
pdfJs;
|
|
2562
|
+
pdfDocumento;
|
|
2563
|
+
pdfRenderTask;
|
|
2564
|
+
pdfRenderToken = 0;
|
|
2565
|
+
abrir(archivo) {
|
|
2566
|
+
this.limpiarPdf();
|
|
2567
|
+
this.seleccionado = archivo;
|
|
2568
|
+
this.zoom = 1;
|
|
2569
|
+
this.rotacion = 0;
|
|
2570
|
+
this.pdfPaginaActual = 1;
|
|
2571
|
+
setTimeout(() => {
|
|
2572
|
+
const dialog = this.visorDialog?.nativeElement;
|
|
2573
|
+
if (dialog && !dialog.open)
|
|
2574
|
+
dialog.showModal();
|
|
2575
|
+
if (this.esPdf(archivo)) {
|
|
2576
|
+
void this.cargarPdf(archivo);
|
|
2577
|
+
}
|
|
2578
|
+
});
|
|
2579
|
+
this.seleccionar.emit(archivo);
|
|
2580
|
+
}
|
|
2581
|
+
cerrar() {
|
|
2582
|
+
const dialog = this.visorDialog?.nativeElement;
|
|
2583
|
+
if (dialog?.open)
|
|
2584
|
+
dialog.close();
|
|
2585
|
+
this.seleccionado = null;
|
|
2586
|
+
this.zoom = 1;
|
|
2587
|
+
this.rotacion = 0;
|
|
2588
|
+
this.limpiarPdf();
|
|
2589
|
+
}
|
|
2590
|
+
cerrarSiBackdrop(event) {
|
|
2591
|
+
if (event.target instanceof HTMLDialogElement) {
|
|
2592
|
+
this.cerrar();
|
|
2593
|
+
}
|
|
2594
|
+
}
|
|
2595
|
+
descargarArchivo(archivo, event) {
|
|
2596
|
+
event?.stopPropagation();
|
|
2597
|
+
this.descargar.emit(archivo);
|
|
2598
|
+
}
|
|
2599
|
+
tipoArchivo(archivo) {
|
|
2600
|
+
const tipo = `${archivo.tipo ?? ''} ${archivo.nombre} ${archivo.url}`.toLowerCase();
|
|
2601
|
+
if (tipo.includes('image/') || /\.(png|jpe?g|gif|webp|svg)$/i.test(tipo))
|
|
2602
|
+
return 'imagen';
|
|
2603
|
+
if (tipo.includes('pdf') || /\.pdf(\?|#|$)/i.test(tipo))
|
|
2604
|
+
return 'pdf';
|
|
2605
|
+
if (tipo.includes('excel') || tipo.includes('spreadsheet') || /\.(xls|xlsx|csv)(\?|#|$)/i.test(tipo))
|
|
2606
|
+
return 'excel';
|
|
2607
|
+
if (tipo.includes('xml') || /\.xml(\?|#|$)/i.test(tipo))
|
|
2608
|
+
return 'xml';
|
|
2609
|
+
if (tipo.includes('zip') || /\.(zip|rar|7z)(\?|#|$)/i.test(tipo))
|
|
2610
|
+
return 'zip';
|
|
2611
|
+
return 'archivo';
|
|
2612
|
+
}
|
|
2613
|
+
iconoArchivo(archivo) {
|
|
2614
|
+
const tipo = this.tipoArchivo(archivo);
|
|
2615
|
+
if (tipo === 'imagen')
|
|
2616
|
+
return 'image';
|
|
2617
|
+
if (tipo === 'archivo')
|
|
2618
|
+
return 'file';
|
|
2619
|
+
return tipo;
|
|
2620
|
+
}
|
|
2621
|
+
esImagen(archivo) {
|
|
2622
|
+
return !!archivo && this.tipoArchivo(archivo) === 'imagen';
|
|
2623
|
+
}
|
|
2624
|
+
esPdf(archivo) {
|
|
2625
|
+
return !!archivo && this.tipoArchivo(archivo) === 'pdf';
|
|
2626
|
+
}
|
|
2627
|
+
tieneVistaPrevia(archivo) {
|
|
2628
|
+
return this.esImagen(archivo) || this.esPdf(archivo);
|
|
2629
|
+
}
|
|
2630
|
+
indiceSeleccionado() {
|
|
2631
|
+
return this.seleccionado
|
|
2632
|
+
? this.archivos.findIndex((archivo) => archivo.id === this.seleccionado?.id)
|
|
2633
|
+
: -1;
|
|
2634
|
+
}
|
|
2635
|
+
seleccionarAnterior() {
|
|
2636
|
+
const indice = this.indiceSeleccionado();
|
|
2637
|
+
if (indice <= 0)
|
|
2638
|
+
return;
|
|
2639
|
+
this.abrir(this.archivos[indice - 1]);
|
|
2640
|
+
}
|
|
2641
|
+
seleccionarSiguiente() {
|
|
2642
|
+
const indice = this.indiceSeleccionado();
|
|
2643
|
+
if (indice < 0 || indice >= this.archivos.length - 1)
|
|
2644
|
+
return;
|
|
2645
|
+
this.abrir(this.archivos[indice + 1]);
|
|
2646
|
+
}
|
|
2647
|
+
cambiarZoom(delta) {
|
|
2648
|
+
this.zoom = Math.min(2.5, Math.max(0.5, Number((this.zoom + delta).toFixed(2))));
|
|
2649
|
+
if (this.esPdf(this.seleccionado) && this.pdfDocumento) {
|
|
2650
|
+
void this.renderizarPaginaPdf();
|
|
2651
|
+
}
|
|
2652
|
+
}
|
|
2653
|
+
restablecerZoom() {
|
|
2654
|
+
this.zoom = 1;
|
|
2655
|
+
this.rotacion = 0;
|
|
2656
|
+
if (this.esPdf(this.seleccionado) && this.pdfDocumento) {
|
|
2657
|
+
void this.renderizarPaginaPdf();
|
|
2658
|
+
}
|
|
2659
|
+
}
|
|
2660
|
+
rotar() {
|
|
2661
|
+
this.rotacion = (this.rotacion + 90) % 360;
|
|
2662
|
+
}
|
|
2663
|
+
paginaPdfAnterior() {
|
|
2664
|
+
if (this.pdfPaginaActual <= 1)
|
|
2665
|
+
return;
|
|
2666
|
+
this.pdfPaginaActual -= 1;
|
|
2667
|
+
void this.renderizarPaginaPdf();
|
|
2668
|
+
}
|
|
2669
|
+
paginaPdfSiguiente() {
|
|
2670
|
+
if (!this.pdfTotalPaginas || this.pdfPaginaActual >= this.pdfTotalPaginas)
|
|
2671
|
+
return;
|
|
2672
|
+
this.pdfPaginaActual += 1;
|
|
2673
|
+
void this.renderizarPaginaPdf();
|
|
2674
|
+
}
|
|
2675
|
+
tamanoLegible(archivo) {
|
|
2676
|
+
if (archivo.tamano === null || archivo.tamano === undefined || archivo.tamano === '')
|
|
2677
|
+
return '';
|
|
2678
|
+
if (typeof archivo.tamano === 'string')
|
|
2679
|
+
return archivo.tamano;
|
|
2680
|
+
const unidades = ['B', 'KB', 'MB', 'GB'];
|
|
2681
|
+
let valor = archivo.tamano;
|
|
2682
|
+
let indice = 0;
|
|
2683
|
+
while (valor >= 1024 && indice < unidades.length - 1) {
|
|
2684
|
+
valor /= 1024;
|
|
2685
|
+
indice += 1;
|
|
2686
|
+
}
|
|
2687
|
+
return `${valor.toFixed(indice ? 1 : 0)} ${unidades[indice]}`;
|
|
2688
|
+
}
|
|
2689
|
+
async cargarPdf(archivo) {
|
|
2690
|
+
const token = ++this.pdfRenderToken;
|
|
2691
|
+
this.pdfCargando = true;
|
|
2692
|
+
this.pdfError = '';
|
|
2693
|
+
this.pdfTotalPaginas = 0;
|
|
2694
|
+
this.cdr.markForCheck();
|
|
2695
|
+
try {
|
|
2696
|
+
const pdfjs = await this.obtenerPdfJs();
|
|
2697
|
+
const loadingTask = pdfjs.getDocument({ url: archivo.url });
|
|
2698
|
+
const documento = (await loadingTask.promise);
|
|
2699
|
+
if (token !== this.pdfRenderToken) {
|
|
2700
|
+
await documento.destroy?.();
|
|
2701
|
+
return;
|
|
2702
|
+
}
|
|
2703
|
+
this.pdfDocumento = documento;
|
|
2704
|
+
this.pdfTotalPaginas = documento.numPages;
|
|
2705
|
+
this.pdfPaginaActual = Math.min(Math.max(this.pdfPaginaActual, 1), documento.numPages || 1);
|
|
2706
|
+
this.pdfCargando = false;
|
|
2707
|
+
this.cdr.markForCheck();
|
|
2708
|
+
await this.renderizarPaginaPdf();
|
|
2709
|
+
}
|
|
2710
|
+
catch {
|
|
2711
|
+
if (token !== this.pdfRenderToken)
|
|
2712
|
+
return;
|
|
2713
|
+
this.pdfCargando = false;
|
|
2714
|
+
this.pdfError = 'No se pudo cargar la vista previa del PDF.';
|
|
2715
|
+
this.cdr.markForCheck();
|
|
2716
|
+
}
|
|
2717
|
+
}
|
|
2718
|
+
async renderizarPaginaPdf() {
|
|
2719
|
+
if (!this.pdfDocumento || !this.pdfCanvas)
|
|
2720
|
+
return;
|
|
2721
|
+
const token = this.pdfRenderToken;
|
|
2722
|
+
this.pdfCargando = true;
|
|
2723
|
+
this.pdfError = '';
|
|
2724
|
+
this.cdr.markForCheck();
|
|
2725
|
+
try {
|
|
2726
|
+
this.pdfRenderTask?.cancel();
|
|
2727
|
+
const pagina = await this.pdfDocumento.getPage(this.pdfPaginaActual);
|
|
2728
|
+
if (token !== this.pdfRenderToken)
|
|
2729
|
+
return;
|
|
2730
|
+
const canvas = this.pdfCanvas.nativeElement;
|
|
2731
|
+
const contexto = canvas.getContext('2d');
|
|
2732
|
+
if (!contexto)
|
|
2733
|
+
throw new Error('Canvas context unavailable');
|
|
2734
|
+
const dpr = Math.max(window.devicePixelRatio || 1, 1);
|
|
2735
|
+
const viewport = pagina.getViewport({ scale: this.zoom });
|
|
2736
|
+
canvas.width = Math.floor(viewport.width * dpr);
|
|
2737
|
+
canvas.height = Math.floor(viewport.height * dpr);
|
|
2738
|
+
canvas.style.width = `${viewport.width}px`;
|
|
2739
|
+
canvas.style.height = `${viewport.height}px`;
|
|
2740
|
+
contexto.setTransform(dpr, 0, 0, dpr, 0, 0);
|
|
2741
|
+
contexto.clearRect(0, 0, viewport.width, viewport.height);
|
|
2742
|
+
const renderTask = pagina.render({ canvasContext: contexto, viewport });
|
|
2743
|
+
this.pdfRenderTask = renderTask;
|
|
2744
|
+
await renderTask.promise;
|
|
2745
|
+
if (token !== this.pdfRenderToken)
|
|
2746
|
+
return;
|
|
2747
|
+
this.pdfCargando = false;
|
|
2748
|
+
this.cdr.markForCheck();
|
|
2749
|
+
}
|
|
2750
|
+
catch (error) {
|
|
2751
|
+
if (error?.name === 'RenderingCancelledException')
|
|
2752
|
+
return;
|
|
2753
|
+
if (token !== this.pdfRenderToken)
|
|
2754
|
+
return;
|
|
2755
|
+
this.pdfCargando = false;
|
|
2756
|
+
this.pdfError = 'No se pudo renderizar esta pagina del PDF.';
|
|
2757
|
+
this.cdr.markForCheck();
|
|
2758
|
+
}
|
|
2759
|
+
}
|
|
2760
|
+
async obtenerPdfJs() {
|
|
2761
|
+
if (this.pdfJs)
|
|
2762
|
+
return this.pdfJs;
|
|
2763
|
+
const pdfjs = await import('pdfjs-dist');
|
|
2764
|
+
pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
|
|
2765
|
+
this.pdfJs = pdfjs;
|
|
2766
|
+
return pdfjs;
|
|
2767
|
+
}
|
|
2768
|
+
limpiarPdf() {
|
|
2769
|
+
this.pdfRenderToken += 1;
|
|
2770
|
+
this.pdfRenderTask?.cancel();
|
|
2771
|
+
this.pdfRenderTask = undefined;
|
|
2772
|
+
void this.pdfDocumento?.destroy?.();
|
|
2773
|
+
this.pdfDocumento = undefined;
|
|
2774
|
+
this.pdfCargando = false;
|
|
2775
|
+
this.pdfError = '';
|
|
2776
|
+
this.pdfPaginaActual = 1;
|
|
2777
|
+
this.pdfTotalPaginas = 0;
|
|
2778
|
+
}
|
|
2779
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdFileViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2780
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdFileViewer, isStandalone: true, selector: "td-file-viewer", inputs: { archivos: "archivos", titulo: "titulo", descripcion: "descripcion", oscuro: "oscuro", compacto: "compacto" }, outputs: { seleccionar: "seleccionar", descargar: "descargar" }, viewQueries: [{ propertyName: "visorDialog", first: true, predicate: ["visorDialog"], descendants: true }, { propertyName: "pdfCanvas", first: true, predicate: ["pdfCanvas"], descendants: true }], ngImport: i0, template: "<section\n class=\"td-file-viewer\"\n [class.td-file-viewer--dark]=\"oscuro\"\n [class.td-file-viewer--compact]=\"compacto\"\n>\n <header class=\"td-file-viewer__header\">\n <div>\n <span>{{ archivos.length }} archivo{{ archivos.length === 1 ? '' : 's' }}</span>\n <h3>{{ titulo }}</h3>\n @if (descripcion) {\n <p>{{ descripcion }}</p>\n }\n </div>\n </header>\n\n @if (archivos.length) {\n <div class=\"td-file-viewer__grid\">\n @for (archivo of archivos; track archivo.id) {\n <button type=\"button\" class=\"td-file-viewer__item\" (click)=\"abrir(archivo)\">\n <span class=\"td-file-viewer__preview\" [class.td-file-viewer__preview--image]=\"tipoArchivo(archivo) === 'imagen'\">\n @if (tipoArchivo(archivo) === 'imagen') {\n <img [src]=\"archivo.thumbnailUrl || archivo.url\" [alt]=\"archivo.nombre\" loading=\"lazy\" />\n } @else {\n <td-icon [nombre]=\"iconoArchivo(archivo)\" tamano=\"1.55rem\" />\n }\n </span>\n\n <span class=\"td-file-viewer__meta\">\n <strong>{{ archivo.nombre }}</strong>\n @if (archivo.descripcion) {\n <small>{{ archivo.descripcion }}</small>\n }\n <em>\n {{ tieneVistaPrevia(archivo) ? 'Vista previa disponible' : 'Descarga / apertura externa' }}\n @if (tamanoLegible(archivo)) {\n - {{ tamanoLegible(archivo) }}\n }\n </em>\n </span>\n\n @if (archivo.descargable !== false) {\n <span\n role=\"button\"\n tabindex=\"-1\"\n class=\"td-file-viewer__download\"\n title=\"Descargar\"\n (click)=\"descargarArchivo(archivo, $event)\"\n >\n <td-icon nombre=\"download\" tamano=\"1rem\" />\n </span>\n }\n </button>\n }\n </div>\n } @else {\n <div class=\"td-file-viewer__empty\">\n <td-icon nombre=\"file\" tamano=\"2rem\" />\n <strong>No hay adjuntos</strong>\n <span>Cuando existan archivos apareceran en esta zona.</span>\n </div>\n }\n</section>\n\n@if (seleccionado; as archivo) {\n <dialog\n #visorDialog\n class=\"td-file-viewer-modal\"\n [class.td-file-viewer-modal--dark]=\"oscuro\"\n [attr.aria-label]=\"archivo.nombre\"\n (click)=\"cerrarSiBackdrop($event)\"\n (cancel)=\"cerrar()\"\n (close)=\"seleccionado = null\"\n >\n <section class=\"td-file-viewer-modal__panel\">\n <header class=\"td-file-viewer-modal__topbar\">\n <div class=\"td-file-viewer-modal__title\">\n <span class=\"td-file-viewer-modal__badge\">\n <td-icon [nombre]=\"iconoArchivo(archivo)\" tamano=\".95rem\" />\n {{ tipoArchivo(archivo) }}\n </span>\n <h3>{{ archivo.nombre }}</h3>\n @if (archivo.descripcion || tamanoLegible(archivo)) {\n <p>\n {{ archivo.descripcion || 'Archivo adjunto' }}\n @if (tamanoLegible(archivo)) {\n - {{ tamanoLegible(archivo) }}\n }\n </p>\n }\n </div>\n\n <nav class=\"td-file-viewer-modal__toolbar\" aria-label=\"Acciones del visor\">\n <button type=\"button\" title=\"Anterior\" [disabled]=\"indiceSeleccionado() <= 0\" (click)=\"seleccionarAnterior()\">\n <td-icon nombre=\"chevron_left\" />\n </button>\n <button type=\"button\" title=\"Siguiente\" [disabled]=\"indiceSeleccionado() >= archivos.length - 1\" (click)=\"seleccionarSiguiente()\">\n <td-icon nombre=\"chevron_right\" />\n </button>\n\n @if (esImagen(archivo) || esPdf(archivo)) {\n <span class=\"td-file-viewer-modal__divider\"></span>\n <button type=\"button\" title=\"Alejar\" (click)=\"cambiarZoom(-0.1)\">\n <span aria-hidden=\"true\">-</span>\n </button>\n <button type=\"button\" class=\"td-file-viewer-modal__zoom\" title=\"Restablecer zoom\" (click)=\"restablecerZoom()\">\n {{ (zoom * 100).toFixed(0) }}%\n </button>\n <button type=\"button\" title=\"Acercar\" (click)=\"cambiarZoom(0.1)\">\n <span aria-hidden=\"true\">+</span>\n </button>\n <button type=\"button\" class=\"td-file-viewer-modal__text-action\" title=\"Ajustar\" (click)=\"restablecerZoom()\">\n Ajustar\n </button>\n @if (esImagen(archivo)) {\n <button type=\"button\" class=\"td-file-viewer-modal__text-action\" title=\"Rotar\" (click)=\"rotar()\">\n Rotar\n </button>\n }\n }\n\n <span class=\"td-file-viewer-modal__divider\"></span>\n <a [href]=\"archivo.url\" target=\"_blank\" rel=\"noopener\" title=\"Abrir en nueva pestana\">\n <td-icon nombre=\"visibility\" />\n </a>\n @if (archivo.descargable !== false) {\n <a [href]=\"archivo.url\" [download]=\"archivo.nombre\" target=\"_blank\" rel=\"noopener\" title=\"Descargar\">\n <td-icon nombre=\"download\" />\n </a>\n }\n <button type=\"button\" title=\"Cerrar\" aria-label=\"Cerrar\" (click)=\"cerrar()\">\n <td-icon nombre=\"close\" />\n </button>\n </nav>\n </header>\n\n <div class=\"td-file-viewer-modal__workspace\">\n <main class=\"td-file-viewer-modal__canvas\">\n @if (esImagen(archivo)) {\n <img\n class=\"td-file-viewer-modal__image\"\n [src]=\"archivo.url\"\n [alt]=\"archivo.nombre\"\n [style.transform]=\"'scale(' + zoom + ') rotate(' + rotacion + 'deg)'\"\n />\n } @else if (esPdf(archivo)) {\n <section class=\"td-file-viewer-modal__pdf-shell\">\n <div class=\"td-file-viewer-modal__pdf-head\">\n <span>\n <td-icon nombre=\"pdf\" />\n Vista PDF\n </span>\n <div class=\"td-file-viewer-modal__pdf-pages\">\n <button type=\"button\" title=\"Pagina anterior\" [disabled]=\"pdfPaginaActual <= 1 || pdfCargando\" (click)=\"paginaPdfAnterior()\">\n <td-icon nombre=\"chevron_left\" />\n </button>\n <small>\n Pagina {{ pdfPaginaActual }} de {{ pdfTotalPaginas || '-' }}\n </small>\n <button type=\"button\" title=\"Pagina siguiente\" [disabled]=\"!pdfTotalPaginas || pdfPaginaActual >= pdfTotalPaginas || pdfCargando\" (click)=\"paginaPdfSiguiente()\">\n <td-icon nombre=\"chevron_right\" />\n </button>\n </div>\n </div>\n <div class=\"td-file-viewer-modal__pdf-canvas-wrap\">\n <canvas #pdfCanvas class=\"td-file-viewer-modal__pdf-canvas\"></canvas>\n\n @if (pdfCargando) {\n <div class=\"td-file-viewer-modal__pdf-state\">\n <span class=\"td-file-viewer-modal__spinner\"></span>\n <strong>Cargando PDF</strong>\n <small>Preparando pagina {{ pdfPaginaActual }}...</small>\n </div>\n }\n\n @if (pdfError) {\n <div class=\"td-file-viewer-modal__pdf-state td-file-viewer-modal__pdf-state--error\">\n <td-icon nombre=\"alert\" tamano=\"2rem\" />\n <strong>{{ pdfError }}</strong>\n <small>Prueba abrirlo en una nueva pesta\u00F1a o descargarlo.</small>\n </div>\n }\n </div>\n </section>\n } @else {\n <div class=\"td-file-viewer-modal__fallback\">\n <span class=\"td-file-viewer-modal__fallback-icon\">\n <td-icon [nombre]=\"iconoArchivo(archivo)\" tamano=\"3rem\" />\n </span>\n <h4>Vista previa no disponible</h4>\n <p>Este tipo de archivo debe abrirse o descargarse con una aplicacion compatible.</p>\n <a [href]=\"archivo.url\" target=\"_blank\" rel=\"noopener\">\n Abrir archivo\n </a>\n </div>\n }\n </main>\n\n @if (archivos.length > 1) {\n <footer class=\"td-file-viewer-modal__strip\">\n @for (item of archivos; track item.id) {\n <button\n type=\"button\"\n [class.td-file-viewer-modal__thumb--active]=\"item.id === archivo.id\"\n [title]=\"item.nombre\"\n (click)=\"abrir(item)\"\n >\n @if (tipoArchivo(item) === 'imagen') {\n <img [src]=\"item.thumbnailUrl || item.url\" [alt]=\"item.nombre\" loading=\"lazy\" />\n } @else {\n <td-icon [nombre]=\"iconoArchivo(item)\" />\n }\n @if (!tieneVistaPrevia(item)) {\n <span class=\"td-file-viewer-modal__no-preview\">Sin preview</span>\n }\n </button>\n }\n </footer>\n }\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-file-viewer{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--fondo-mudo: var(--td-color-surface-muted, #eef2f7);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--acento: var(--td-color-primary, #5746d8);display:grid;gap:1rem;color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-file-viewer--dark{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--fondo-mudo: var(--td-color-surface-muted, #202028);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--acento: var(--td-color-primary, #a89cf7)}.td-file-viewer__header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.td-file-viewer__header span,.td-file-viewer-modal__badge,.td-file-viewer-modal__details>span{color:var(--acento);font-size:.66rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.td-file-viewer__header h3,.td-file-viewer__header p,.td-file-viewer-modal h3,.td-file-viewer-modal p,.td-file-viewer-modal h4{margin:0}.td-file-viewer__header h3{margin-top:.18rem;font-size:1rem}.td-file-viewer__header p{margin-top:.25rem;color:var(--suave);font-size:.76rem;line-height:1.45}.td-file-viewer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.75rem}.td-file-viewer--compact .td-file-viewer__grid{grid-template-columns:1fr}.td-file-viewer__item{display:grid;grid-template-columns:3.25rem minmax(0,1fr) auto;align-items:center;gap:.75rem;border:1px solid var(--borde);border-radius:var(--td-radius-lg, 1rem);padding:.72rem;color:inherit;background:linear-gradient(135deg,var(--fondo),var(--fondo-suave));box-shadow:var(--td-shadow-xs, 0 6px 18px rgba(31, 42, 68, .06));text-align:left;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}.td-file-viewer__item:hover{border-color:var(--acento);box-shadow:var(--td-shadow-sm, 0 12px 28px rgba(31, 42, 68, .1));transform:translateY(-1px)}.td-file-viewer__preview{display:grid;width:3.25rem;height:3.25rem;place-items:center;overflow:hidden;border-radius:var(--td-radius-md, .85rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--fondo-suave))}.td-file-viewer__preview img{width:100%;height:100%;object-fit:cover}.td-file-viewer__meta{display:grid;min-width:0;gap:.15rem}.td-file-viewer__meta strong,.td-file-viewer__meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-file-viewer__meta strong{font-size:.8rem}.td-file-viewer__meta small,.td-file-viewer__meta em{color:var(--suave);font-size:.7rem;font-style:normal}.td-file-viewer__download{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .55rem);color:var(--suave)}.td-file-viewer__download:hover{color:var(--acento);background:var(--fondo-suave)}.td-file-viewer__empty{display:grid;min-height:12rem;place-items:center;align-content:center;gap:.35rem;border:1px dashed var(--borde);border-radius:var(--td-radius-lg, 1rem);color:var(--suave);background:var(--fondo-suave);text-align:center}.td-file-viewer__empty strong{color:var(--texto)}.td-file-viewer-modal{width:min(900px,100vw - 2rem);max-width:none;max-height:min(82dvh,720px);border:0;padding:0;overflow:visible;color:var(--td-color-text, #263147);background:transparent;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-file-viewer-modal::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-file-viewer-modal__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(82dvh,720px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-file-viewer-modal--dark .td-file-viewer-modal__panel{border-color:var(--td-color-border, #2d2d36);background:var(--td-color-surface, #15151b)}.td-file-viewer-modal__topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-file-viewer-modal__title{display:grid;min-width:0;gap:.12rem}.td-file-viewer-modal__badge{display:inline-flex;width:fit-content;align-items:center;gap:.35rem;color:var(--td-color-primary, #5746d8);font-size:.64rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.td-file-viewer-modal h3,.td-file-viewer-modal h4,.td-file-viewer-modal p{margin:0}.td-file-viewer-modal__title h3{overflow:hidden;color:var(--td-color-text, #263147);font-size:.9rem;text-overflow:ellipsis;white-space:nowrap}.td-file-viewer-modal__title p{overflow:hidden;color:var(--td-color-text-muted, #748096);font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.td-file-viewer-modal__toolbar{display:flex;flex:0 0 auto;align-items:center;gap:.3rem}.td-file-viewer-modal__toolbar button,.td-file-viewer-modal__toolbar a{display:inline-grid;min-width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);text-decoration:none;cursor:pointer}.td-file-viewer-modal__toolbar button:hover,.td-file-viewer-modal__toolbar a:hover{color:var(--td-color-primary, #5746d8)}.td-file-viewer-modal__toolbar button:disabled{opacity:.38;cursor:not-allowed}.td-file-viewer-modal__zoom{min-width:3rem!important;padding-inline:.45rem;color:var(--td-color-text, #263147)!important;font-size:.7rem;font-weight:800}.td-file-viewer-modal__text-action{width:auto!important;min-width:3.2rem!important;padding-inline:.55rem;color:var(--td-color-text, #263147)!important;font-size:.7rem;font-weight:800}.td-file-viewer-modal__divider{width:1px;height:1.25rem;margin-inline:.2rem;background:var(--td-color-border, #e4e8f0)}.td-file-viewer-modal__workspace{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;background:var(--td-color-surface-soft, #f8fafc)}.td-file-viewer-modal__canvas{display:grid;min-height:20rem;max-height:calc(82dvh - 8rem);place-items:center;overflow:auto;padding:1rem;background:linear-gradient(180deg,var(--td-color-surface-soft, #f8fafc),var(--td-color-surface, #fff))}.td-file-viewer-modal__image{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16));transition:transform .12s ease}.td-file-viewer-modal__pdf-shell{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(820px,100%);height:min(60dvh,560px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-lg, 1rem);background:var(--td-color-surface, #fff)}.td-file-viewer-modal__pdf-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.55rem .65rem .55rem .75rem}.td-file-viewer-modal__pdf-head span{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:850}.td-file-viewer-modal__pdf-head small{color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-file-viewer-modal__pdf-pages{display:inline-flex;align-items:center;gap:.35rem}.td-file-viewer-modal__pdf-pages button{display:inline-grid;width:1.8rem;height:1.8rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .5rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-file-viewer-modal__pdf-pages button:hover:not(:disabled){color:var(--td-color-primary, #5746d8)}.td-file-viewer-modal__pdf-pages button:disabled{opacity:.38;cursor:not-allowed}.td-file-viewer-modal__pdf-canvas-wrap{position:relative;display:grid;min-height:0;overflow:auto;place-items:start center;padding:1rem;background:radial-gradient(circle at 1px 1px,rgba(100,116,139,.18) 1px,transparent 0) 0 0/18px 18px,var(--td-color-surface-muted, #eef2f7)}.td-file-viewer-modal__pdf-canvas{display:block;max-width:none;border-radius:var(--td-radius-sm, .45rem);background:#fff;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .2))}.td-file-viewer-modal__pdf-state{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #748096);background:color-mix(in srgb,var(--td-color-surface, #fff) 78%,transparent);text-align:center}.td-file-viewer-modal__pdf-state strong{color:var(--td-color-text, #263147);font-size:.85rem}.td-file-viewer-modal__pdf-state--error{color:var(--td-color-danger, #dc2626);background:color-mix(in srgb,var(--td-color-surface, #fff) 92%,transparent)}.td-file-viewer-modal__spinner{display:block;width:2rem;height:2rem;border:3px solid color-mix(in srgb,var(--td-color-primary, #5746d8) 18%,transparent);border-top-color:var(--td-color-primary, #5746d8);border-radius:999px;animation:td-file-viewer-spin .8s linear infinite}@keyframes td-file-viewer-spin{to{transform:rotate(360deg)}}.td-file-viewer-modal__strip{display:flex;gap:.45rem;overflow-x:auto;border-top:1px solid var(--td-color-border, #e4e8f0);padding:.65rem .75rem;background:var(--td-color-surface, #fff)}.td-file-viewer-modal__strip button{position:relative;display:grid;width:2.4rem;height:2.4rem;flex:0 0 auto;place-items:center;overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-sm, .6rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-file-viewer-modal__strip img{width:100%;height:100%;object-fit:cover}.td-file-viewer-modal__thumb--active{border-color:var(--td-color-primary, #5746d8)!important;box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-primary, #5746d8) 15%, transparent))}.td-file-viewer-modal__no-preview{position:absolute;right:.12rem;bottom:.12rem;border-radius:var(--td-radius-pill, 999px);padding:.05rem .22rem;color:var(--td-color-text-muted, #748096);background:var(--td-color-surface, #fff);font-size:.46rem;font-weight:850;line-height:1.2}.td-file-viewer-modal__fallback{display:grid;place-items:center;align-content:center;gap:.7rem;color:var(--td-color-text-muted, #748096);text-align:center}.td-file-viewer-modal__fallback-icon{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.25rem);color:var(--td-color-primary, #5746d8);background:color-mix(in srgb,var(--td-color-primary, #5746d8) 10%,transparent)}.td-file-viewer-modal__fallback h4{color:var(--td-color-text, #263147)}.td-file-viewer-modal__fallback a{display:inline-flex;min-height:2.25rem;align-items:center;border-radius:var(--td-radius-md, .75rem);padding:0 .9rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-primary, #5746d8);font-size:.75rem;font-weight:800;text-decoration:none}@media(max-width:640px){.td-file-viewer-modal{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-file-viewer-modal__panel{max-height:calc(100dvh - 1.5rem)}.td-file-viewer-modal__topbar{align-items:flex-start;flex-direction:column}.td-file-viewer-modal__toolbar{width:100%;overflow-x:auto}.td-file-viewer-modal__canvas{min-height:16rem;max-height:calc(100dvh - 11rem);padding:.75rem}.td-file-viewer-modal__image,.td-file-viewer-modal__pdf-shell{max-height:calc(100dvh - 13rem)}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2781
|
+
}
|
|
2782
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdFileViewer, decorators: [{
|
|
2783
|
+
type: Component,
|
|
2784
|
+
args: [{ selector: 'td-file-viewer', imports: [TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n class=\"td-file-viewer\"\n [class.td-file-viewer--dark]=\"oscuro\"\n [class.td-file-viewer--compact]=\"compacto\"\n>\n <header class=\"td-file-viewer__header\">\n <div>\n <span>{{ archivos.length }} archivo{{ archivos.length === 1 ? '' : 's' }}</span>\n <h3>{{ titulo }}</h3>\n @if (descripcion) {\n <p>{{ descripcion }}</p>\n }\n </div>\n </header>\n\n @if (archivos.length) {\n <div class=\"td-file-viewer__grid\">\n @for (archivo of archivos; track archivo.id) {\n <button type=\"button\" class=\"td-file-viewer__item\" (click)=\"abrir(archivo)\">\n <span class=\"td-file-viewer__preview\" [class.td-file-viewer__preview--image]=\"tipoArchivo(archivo) === 'imagen'\">\n @if (tipoArchivo(archivo) === 'imagen') {\n <img [src]=\"archivo.thumbnailUrl || archivo.url\" [alt]=\"archivo.nombre\" loading=\"lazy\" />\n } @else {\n <td-icon [nombre]=\"iconoArchivo(archivo)\" tamano=\"1.55rem\" />\n }\n </span>\n\n <span class=\"td-file-viewer__meta\">\n <strong>{{ archivo.nombre }}</strong>\n @if (archivo.descripcion) {\n <small>{{ archivo.descripcion }}</small>\n }\n <em>\n {{ tieneVistaPrevia(archivo) ? 'Vista previa disponible' : 'Descarga / apertura externa' }}\n @if (tamanoLegible(archivo)) {\n - {{ tamanoLegible(archivo) }}\n }\n </em>\n </span>\n\n @if (archivo.descargable !== false) {\n <span\n role=\"button\"\n tabindex=\"-1\"\n class=\"td-file-viewer__download\"\n title=\"Descargar\"\n (click)=\"descargarArchivo(archivo, $event)\"\n >\n <td-icon nombre=\"download\" tamano=\"1rem\" />\n </span>\n }\n </button>\n }\n </div>\n } @else {\n <div class=\"td-file-viewer__empty\">\n <td-icon nombre=\"file\" tamano=\"2rem\" />\n <strong>No hay adjuntos</strong>\n <span>Cuando existan archivos apareceran en esta zona.</span>\n </div>\n }\n</section>\n\n@if (seleccionado; as archivo) {\n <dialog\n #visorDialog\n class=\"td-file-viewer-modal\"\n [class.td-file-viewer-modal--dark]=\"oscuro\"\n [attr.aria-label]=\"archivo.nombre\"\n (click)=\"cerrarSiBackdrop($event)\"\n (cancel)=\"cerrar()\"\n (close)=\"seleccionado = null\"\n >\n <section class=\"td-file-viewer-modal__panel\">\n <header class=\"td-file-viewer-modal__topbar\">\n <div class=\"td-file-viewer-modal__title\">\n <span class=\"td-file-viewer-modal__badge\">\n <td-icon [nombre]=\"iconoArchivo(archivo)\" tamano=\".95rem\" />\n {{ tipoArchivo(archivo) }}\n </span>\n <h3>{{ archivo.nombre }}</h3>\n @if (archivo.descripcion || tamanoLegible(archivo)) {\n <p>\n {{ archivo.descripcion || 'Archivo adjunto' }}\n @if (tamanoLegible(archivo)) {\n - {{ tamanoLegible(archivo) }}\n }\n </p>\n }\n </div>\n\n <nav class=\"td-file-viewer-modal__toolbar\" aria-label=\"Acciones del visor\">\n <button type=\"button\" title=\"Anterior\" [disabled]=\"indiceSeleccionado() <= 0\" (click)=\"seleccionarAnterior()\">\n <td-icon nombre=\"chevron_left\" />\n </button>\n <button type=\"button\" title=\"Siguiente\" [disabled]=\"indiceSeleccionado() >= archivos.length - 1\" (click)=\"seleccionarSiguiente()\">\n <td-icon nombre=\"chevron_right\" />\n </button>\n\n @if (esImagen(archivo) || esPdf(archivo)) {\n <span class=\"td-file-viewer-modal__divider\"></span>\n <button type=\"button\" title=\"Alejar\" (click)=\"cambiarZoom(-0.1)\">\n <span aria-hidden=\"true\">-</span>\n </button>\n <button type=\"button\" class=\"td-file-viewer-modal__zoom\" title=\"Restablecer zoom\" (click)=\"restablecerZoom()\">\n {{ (zoom * 100).toFixed(0) }}%\n </button>\n <button type=\"button\" title=\"Acercar\" (click)=\"cambiarZoom(0.1)\">\n <span aria-hidden=\"true\">+</span>\n </button>\n <button type=\"button\" class=\"td-file-viewer-modal__text-action\" title=\"Ajustar\" (click)=\"restablecerZoom()\">\n Ajustar\n </button>\n @if (esImagen(archivo)) {\n <button type=\"button\" class=\"td-file-viewer-modal__text-action\" title=\"Rotar\" (click)=\"rotar()\">\n Rotar\n </button>\n }\n }\n\n <span class=\"td-file-viewer-modal__divider\"></span>\n <a [href]=\"archivo.url\" target=\"_blank\" rel=\"noopener\" title=\"Abrir en nueva pestana\">\n <td-icon nombre=\"visibility\" />\n </a>\n @if (archivo.descargable !== false) {\n <a [href]=\"archivo.url\" [download]=\"archivo.nombre\" target=\"_blank\" rel=\"noopener\" title=\"Descargar\">\n <td-icon nombre=\"download\" />\n </a>\n }\n <button type=\"button\" title=\"Cerrar\" aria-label=\"Cerrar\" (click)=\"cerrar()\">\n <td-icon nombre=\"close\" />\n </button>\n </nav>\n </header>\n\n <div class=\"td-file-viewer-modal__workspace\">\n <main class=\"td-file-viewer-modal__canvas\">\n @if (esImagen(archivo)) {\n <img\n class=\"td-file-viewer-modal__image\"\n [src]=\"archivo.url\"\n [alt]=\"archivo.nombre\"\n [style.transform]=\"'scale(' + zoom + ') rotate(' + rotacion + 'deg)'\"\n />\n } @else if (esPdf(archivo)) {\n <section class=\"td-file-viewer-modal__pdf-shell\">\n <div class=\"td-file-viewer-modal__pdf-head\">\n <span>\n <td-icon nombre=\"pdf\" />\n Vista PDF\n </span>\n <div class=\"td-file-viewer-modal__pdf-pages\">\n <button type=\"button\" title=\"Pagina anterior\" [disabled]=\"pdfPaginaActual <= 1 || pdfCargando\" (click)=\"paginaPdfAnterior()\">\n <td-icon nombre=\"chevron_left\" />\n </button>\n <small>\n Pagina {{ pdfPaginaActual }} de {{ pdfTotalPaginas || '-' }}\n </small>\n <button type=\"button\" title=\"Pagina siguiente\" [disabled]=\"!pdfTotalPaginas || pdfPaginaActual >= pdfTotalPaginas || pdfCargando\" (click)=\"paginaPdfSiguiente()\">\n <td-icon nombre=\"chevron_right\" />\n </button>\n </div>\n </div>\n <div class=\"td-file-viewer-modal__pdf-canvas-wrap\">\n <canvas #pdfCanvas class=\"td-file-viewer-modal__pdf-canvas\"></canvas>\n\n @if (pdfCargando) {\n <div class=\"td-file-viewer-modal__pdf-state\">\n <span class=\"td-file-viewer-modal__spinner\"></span>\n <strong>Cargando PDF</strong>\n <small>Preparando pagina {{ pdfPaginaActual }}...</small>\n </div>\n }\n\n @if (pdfError) {\n <div class=\"td-file-viewer-modal__pdf-state td-file-viewer-modal__pdf-state--error\">\n <td-icon nombre=\"alert\" tamano=\"2rem\" />\n <strong>{{ pdfError }}</strong>\n <small>Prueba abrirlo en una nueva pesta\u00F1a o descargarlo.</small>\n </div>\n }\n </div>\n </section>\n } @else {\n <div class=\"td-file-viewer-modal__fallback\">\n <span class=\"td-file-viewer-modal__fallback-icon\">\n <td-icon [nombre]=\"iconoArchivo(archivo)\" tamano=\"3rem\" />\n </span>\n <h4>Vista previa no disponible</h4>\n <p>Este tipo de archivo debe abrirse o descargarse con una aplicacion compatible.</p>\n <a [href]=\"archivo.url\" target=\"_blank\" rel=\"noopener\">\n Abrir archivo\n </a>\n </div>\n }\n </main>\n\n @if (archivos.length > 1) {\n <footer class=\"td-file-viewer-modal__strip\">\n @for (item of archivos; track item.id) {\n <button\n type=\"button\"\n [class.td-file-viewer-modal__thumb--active]=\"item.id === archivo.id\"\n [title]=\"item.nombre\"\n (click)=\"abrir(item)\"\n >\n @if (tipoArchivo(item) === 'imagen') {\n <img [src]=\"item.thumbnailUrl || item.url\" [alt]=\"item.nombre\" loading=\"lazy\" />\n } @else {\n <td-icon [nombre]=\"iconoArchivo(item)\" />\n }\n @if (!tieneVistaPrevia(item)) {\n <span class=\"td-file-viewer-modal__no-preview\">Sin preview</span>\n }\n </button>\n }\n </footer>\n }\n </div>\n </section>\n </dialog>\n}\n", styles: [":host{display:block}*{box-sizing:border-box}.td-file-viewer{--fondo: var(--td-color-surface, #fff);--fondo-suave: var(--td-color-surface-soft, #f8fafc);--fondo-mudo: var(--td-color-surface-muted, #eef2f7);--borde: var(--td-color-border, #e4e8f0);--texto: var(--td-color-text, #263147);--suave: var(--td-color-text-muted, #748096);--acento: var(--td-color-primary, #5746d8);display:grid;gap:1rem;color:var(--texto);font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-file-viewer--dark{--fondo: var(--td-color-surface, #15151b);--fondo-suave: var(--td-color-surface-soft, #1b1b22);--fondo-mudo: var(--td-color-surface-muted, #202028);--borde: var(--td-color-border, #2d2d36);--texto: var(--td-color-text, #ededf0);--suave: var(--td-color-text-muted, #9393a0);--acento: var(--td-color-primary, #a89cf7)}.td-file-viewer__header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.td-file-viewer__header span,.td-file-viewer-modal__badge,.td-file-viewer-modal__details>span{color:var(--acento);font-size:.66rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}.td-file-viewer__header h3,.td-file-viewer__header p,.td-file-viewer-modal h3,.td-file-viewer-modal p,.td-file-viewer-modal h4{margin:0}.td-file-viewer__header h3{margin-top:.18rem;font-size:1rem}.td-file-viewer__header p{margin-top:.25rem;color:var(--suave);font-size:.76rem;line-height:1.45}.td-file-viewer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.75rem}.td-file-viewer--compact .td-file-viewer__grid{grid-template-columns:1fr}.td-file-viewer__item{display:grid;grid-template-columns:3.25rem minmax(0,1fr) auto;align-items:center;gap:.75rem;border:1px solid var(--borde);border-radius:var(--td-radius-lg, 1rem);padding:.72rem;color:inherit;background:linear-gradient(135deg,var(--fondo),var(--fondo-suave));box-shadow:var(--td-shadow-xs, 0 6px 18px rgba(31, 42, 68, .06));text-align:left;cursor:pointer;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}.td-file-viewer__item:hover{border-color:var(--acento);box-shadow:var(--td-shadow-sm, 0 12px 28px rgba(31, 42, 68, .1));transform:translateY(-1px)}.td-file-viewer__preview{display:grid;width:3.25rem;height:3.25rem;place-items:center;overflow:hidden;border-radius:var(--td-radius-md, .85rem);color:var(--acento);background:color-mix(in srgb,var(--acento) 10%,var(--fondo-suave))}.td-file-viewer__preview img{width:100%;height:100%;object-fit:cover}.td-file-viewer__meta{display:grid;min-width:0;gap:.15rem}.td-file-viewer__meta strong,.td-file-viewer__meta small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-file-viewer__meta strong{font-size:.8rem}.td-file-viewer__meta small,.td-file-viewer__meta em{color:var(--suave);font-size:.7rem;font-style:normal}.td-file-viewer__download{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .55rem);color:var(--suave)}.td-file-viewer__download:hover{color:var(--acento);background:var(--fondo-suave)}.td-file-viewer__empty{display:grid;min-height:12rem;place-items:center;align-content:center;gap:.35rem;border:1px dashed var(--borde);border-radius:var(--td-radius-lg, 1rem);color:var(--suave);background:var(--fondo-suave);text-align:center}.td-file-viewer__empty strong{color:var(--texto)}.td-file-viewer-modal{width:min(900px,100vw - 2rem);max-width:none;max-height:min(82dvh,720px);border:0;padding:0;overflow:visible;color:var(--td-color-text, #263147);background:transparent;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-file-viewer-modal::backdrop{background:#0a101e80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.td-file-viewer-modal__panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:100%;max-height:min(82dvh,720px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-xl, 1.15rem);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xl, 0 24px 72px rgba(15, 23, 42, .28))}.td-file-viewer-modal--dark .td-file-viewer-modal__panel{border-color:var(--td-color-border, #2d2d36);background:var(--td-color-surface, #15151b)}.td-file-viewer-modal__topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.75rem .9rem;background:var(--td-color-surface, #fff)}.td-file-viewer-modal__title{display:grid;min-width:0;gap:.12rem}.td-file-viewer-modal__badge{display:inline-flex;width:fit-content;align-items:center;gap:.35rem;color:var(--td-color-primary, #5746d8);font-size:.64rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.td-file-viewer-modal h3,.td-file-viewer-modal h4,.td-file-viewer-modal p{margin:0}.td-file-viewer-modal__title h3{overflow:hidden;color:var(--td-color-text, #263147);font-size:.9rem;text-overflow:ellipsis;white-space:nowrap}.td-file-viewer-modal__title p{overflow:hidden;color:var(--td-color-text-muted, #748096);font-size:.7rem;text-overflow:ellipsis;white-space:nowrap}.td-file-viewer-modal__toolbar{display:flex;flex:0 0 auto;align-items:center;gap:.3rem}.td-file-viewer-modal__toolbar button,.td-file-viewer-modal__toolbar a{display:inline-grid;min-width:2rem;height:2rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .55rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);text-decoration:none;cursor:pointer}.td-file-viewer-modal__toolbar button:hover,.td-file-viewer-modal__toolbar a:hover{color:var(--td-color-primary, #5746d8)}.td-file-viewer-modal__toolbar button:disabled{opacity:.38;cursor:not-allowed}.td-file-viewer-modal__zoom{min-width:3rem!important;padding-inline:.45rem;color:var(--td-color-text, #263147)!important;font-size:.7rem;font-weight:800}.td-file-viewer-modal__text-action{width:auto!important;min-width:3.2rem!important;padding-inline:.55rem;color:var(--td-color-text, #263147)!important;font-size:.7rem;font-weight:800}.td-file-viewer-modal__divider{width:1px;height:1.25rem;margin-inline:.2rem;background:var(--td-color-border, #e4e8f0)}.td-file-viewer-modal__workspace{display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;background:var(--td-color-surface-soft, #f8fafc)}.td-file-viewer-modal__canvas{display:grid;min-height:20rem;max-height:calc(82dvh - 8rem);place-items:center;overflow:auto;padding:1rem;background:linear-gradient(180deg,var(--td-color-surface-soft, #f8fafc),var(--td-color-surface, #fff))}.td-file-viewer-modal__image{display:block;width:auto;max-width:100%;max-height:min(58dvh,500px);border-radius:var(--td-radius-lg, 1rem);object-fit:contain;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .16));transition:transform .12s ease}.td-file-viewer-modal__pdf-shell{display:grid;grid-template-rows:auto minmax(0,1fr);width:min(820px,100%);height:min(60dvh,560px);overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-lg, 1rem);background:var(--td-color-surface, #fff)}.td-file-viewer-modal__pdf-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--td-color-border, #e4e8f0);padding:.55rem .65rem .55rem .75rem}.td-file-viewer-modal__pdf-head span{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:850}.td-file-viewer-modal__pdf-head small{color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-file-viewer-modal__pdf-pages{display:inline-flex;align-items:center;gap:.35rem}.td-file-viewer-modal__pdf-pages button{display:inline-grid;width:1.8rem;height:1.8rem;place-items:center;border:0;border-radius:var(--td-radius-sm, .5rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-file-viewer-modal__pdf-pages button:hover:not(:disabled){color:var(--td-color-primary, #5746d8)}.td-file-viewer-modal__pdf-pages button:disabled{opacity:.38;cursor:not-allowed}.td-file-viewer-modal__pdf-canvas-wrap{position:relative;display:grid;min-height:0;overflow:auto;place-items:start center;padding:1rem;background:radial-gradient(circle at 1px 1px,rgba(100,116,139,.18) 1px,transparent 0) 0 0/18px 18px,var(--td-color-surface-muted, #eef2f7)}.td-file-viewer-modal__pdf-canvas{display:block;max-width:none;border-radius:var(--td-radius-sm, .45rem);background:#fff;box-shadow:var(--td-shadow-md, 0 16px 42px rgba(15, 23, 42, .2))}.td-file-viewer-modal__pdf-state{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #748096);background:color-mix(in srgb,var(--td-color-surface, #fff) 78%,transparent);text-align:center}.td-file-viewer-modal__pdf-state strong{color:var(--td-color-text, #263147);font-size:.85rem}.td-file-viewer-modal__pdf-state--error{color:var(--td-color-danger, #dc2626);background:color-mix(in srgb,var(--td-color-surface, #fff) 92%,transparent)}.td-file-viewer-modal__spinner{display:block;width:2rem;height:2rem;border:3px solid color-mix(in srgb,var(--td-color-primary, #5746d8) 18%,transparent);border-top-color:var(--td-color-primary, #5746d8);border-radius:999px;animation:td-file-viewer-spin .8s linear infinite}@keyframes td-file-viewer-spin{to{transform:rotate(360deg)}}.td-file-viewer-modal__strip{display:flex;gap:.45rem;overflow-x:auto;border-top:1px solid var(--td-color-border, #e4e8f0);padding:.65rem .75rem;background:var(--td-color-surface, #fff)}.td-file-viewer-modal__strip button{position:relative;display:grid;width:2.4rem;height:2.4rem;flex:0 0 auto;place-items:center;overflow:hidden;border:1px solid var(--td-color-border, #e4e8f0);border-radius:var(--td-radius-sm, .6rem);color:var(--td-color-text-muted, #748096);background:var(--td-color-surface-soft, #f8fafc);cursor:pointer}.td-file-viewer-modal__strip img{width:100%;height:100%;object-fit:cover}.td-file-viewer-modal__thumb--active{border-color:var(--td-color-primary, #5746d8)!important;box-shadow:var(--td-focus-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-primary, #5746d8) 15%, transparent))}.td-file-viewer-modal__no-preview{position:absolute;right:.12rem;bottom:.12rem;border-radius:var(--td-radius-pill, 999px);padding:.05rem .22rem;color:var(--td-color-text-muted, #748096);background:var(--td-color-surface, #fff);font-size:.46rem;font-weight:850;line-height:1.2}.td-file-viewer-modal__fallback{display:grid;place-items:center;align-content:center;gap:.7rem;color:var(--td-color-text-muted, #748096);text-align:center}.td-file-viewer-modal__fallback-icon{display:grid;width:4.5rem;height:4.5rem;place-items:center;border-radius:var(--td-radius-xl, 1.25rem);color:var(--td-color-primary, #5746d8);background:color-mix(in srgb,var(--td-color-primary, #5746d8) 10%,transparent)}.td-file-viewer-modal__fallback h4{color:var(--td-color-text, #263147)}.td-file-viewer-modal__fallback a{display:inline-flex;min-height:2.25rem;align-items:center;border-radius:var(--td-radius-md, .75rem);padding:0 .9rem;color:var(--td-color-on-primary, #fff);background:var(--td-color-primary, #5746d8);font-size:.75rem;font-weight:800;text-decoration:none}@media(max-width:640px){.td-file-viewer-modal{width:calc(100vw - 1.5rem);max-height:calc(100dvh - 1.5rem)}.td-file-viewer-modal__panel{max-height:calc(100dvh - 1.5rem)}.td-file-viewer-modal__topbar{align-items:flex-start;flex-direction:column}.td-file-viewer-modal__toolbar{width:100%;overflow-x:auto}.td-file-viewer-modal__canvas{min-height:16rem;max-height:calc(100dvh - 11rem);padding:.75rem}.td-file-viewer-modal__image,.td-file-viewer-modal__pdf-shell{max-height:calc(100dvh - 13rem)}}\n"] }]
|
|
2785
|
+
}], propDecorators: { visorDialog: [{
|
|
2786
|
+
type: ViewChild,
|
|
2787
|
+
args: ['visorDialog']
|
|
2788
|
+
}], pdfCanvas: [{
|
|
2789
|
+
type: ViewChild,
|
|
2790
|
+
args: ['pdfCanvas']
|
|
2791
|
+
}], archivos: [{
|
|
2792
|
+
type: Input
|
|
2793
|
+
}], titulo: [{
|
|
2794
|
+
type: Input
|
|
2795
|
+
}], descripcion: [{
|
|
2796
|
+
type: Input
|
|
2797
|
+
}], oscuro: [{
|
|
2798
|
+
type: Input
|
|
2799
|
+
}], compacto: [{
|
|
2800
|
+
type: Input
|
|
2801
|
+
}], seleccionar: [{
|
|
2802
|
+
type: Output
|
|
2803
|
+
}], descargar: [{
|
|
2804
|
+
type: Output
|
|
2805
|
+
}] } });
|
|
2806
|
+
|
|
2376
2807
|
class TdHeader {
|
|
2377
2808
|
menuAbierto = true;
|
|
2378
2809
|
mostrarMenu = true;
|
|
@@ -2421,10 +2852,10 @@ class TdHeader {
|
|
|
2421
2852
|
this.panelNotificacionesAbierto = false;
|
|
2422
2853
|
this.panelPerfilAbierto = false;
|
|
2423
2854
|
}
|
|
2424
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2425
|
-
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:var(--td-z-header, 800);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 });
|
|
2855
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2856
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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:var(--td-z-header, 800);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 });
|
|
2426
2857
|
}
|
|
2427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
2858
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdHeader, decorators: [{
|
|
2428
2859
|
type: Component,
|
|
2429
2860
|
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:var(--td-z-header, 800);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"] }]
|
|
2430
2861
|
}], propDecorators: { menuAbierto: [{
|
|
@@ -2461,8 +2892,10 @@ class TdInput {
|
|
|
2461
2892
|
cdr = inject(ChangeDetectorRef);
|
|
2462
2893
|
formBridge = createTdFormControlBridge();
|
|
2463
2894
|
generatedId = `td-input-${++inputSequence}`;
|
|
2464
|
-
legacyMinLength = signal(null,
|
|
2465
|
-
|
|
2895
|
+
legacyMinLength = signal(null, /* @ts-ignore */
|
|
2896
|
+
...(ngDevMode ? [{ debugName: "legacyMinLength" }] : /* istanbul ignore next */ []));
|
|
2897
|
+
legacyMaxLength = signal(null, /* @ts-ignore */
|
|
2898
|
+
...(ngDevMode ? [{ debugName: "legacyMaxLength" }] : /* istanbul ignore next */ []));
|
|
2466
2899
|
receivedNullValue = false;
|
|
2467
2900
|
nativeInput;
|
|
2468
2901
|
id = '';
|
|
@@ -2474,23 +2907,37 @@ class TdInput {
|
|
|
2474
2907
|
prefix = '';
|
|
2475
2908
|
suffix = '';
|
|
2476
2909
|
hint = '';
|
|
2477
|
-
name = input('',
|
|
2478
|
-
|
|
2479
|
-
|
|
2480
|
-
|
|
2481
|
-
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
|
|
2487
|
-
|
|
2910
|
+
name = input('', /* @ts-ignore */
|
|
2911
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
2912
|
+
disabled = input(false, /* @ts-ignore */
|
|
2913
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
2914
|
+
disabledReasons = input([], /* @ts-ignore */
|
|
2915
|
+
...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
2916
|
+
readonly = input(false, /* @ts-ignore */
|
|
2917
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
2918
|
+
hidden = input(false, /* @ts-ignore */
|
|
2919
|
+
...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
2920
|
+
invalid = input(false, /* @ts-ignore */
|
|
2921
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
2922
|
+
pending = input(false, /* @ts-ignore */
|
|
2923
|
+
...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
2924
|
+
dirty = input(false, /* @ts-ignore */
|
|
2925
|
+
...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
2926
|
+
required = input(false, /* @ts-ignore */
|
|
2927
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
2928
|
+
errors = input([], /* @ts-ignore */
|
|
2929
|
+
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
2930
|
+
touched = model(false, /* @ts-ignore */
|
|
2931
|
+
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
2488
2932
|
touch = output();
|
|
2489
|
-
error = input('',
|
|
2490
|
-
|
|
2933
|
+
error = input('', /* @ts-ignore */
|
|
2934
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
2935
|
+
errorDisplay = input('auto', /* @ts-ignore */
|
|
2936
|
+
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
2491
2937
|
clearable = false;
|
|
2492
2938
|
dark = false;
|
|
2493
|
-
showCounter = input(true,
|
|
2939
|
+
showCounter = input(true, /* @ts-ignore */
|
|
2940
|
+
...(ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []));
|
|
2494
2941
|
emptyValue = 'auto';
|
|
2495
2942
|
sanitize = 'none';
|
|
2496
2943
|
sanitizeValue = null;
|
|
@@ -2499,9 +2946,12 @@ class TdInput {
|
|
|
2499
2946
|
decimalDigits = null;
|
|
2500
2947
|
minValue = input(undefined, { ...(ngDevMode ? { debugName: "minValue" } : /* istanbul ignore next */ {}), alias: 'min' });
|
|
2501
2948
|
maxValue = input(undefined, { ...(ngDevMode ? { debugName: "maxValue" } : /* istanbul ignore next */ {}), alias: 'max' });
|
|
2502
|
-
minLength = input(undefined,
|
|
2503
|
-
|
|
2504
|
-
|
|
2949
|
+
minLength = input(undefined, /* @ts-ignore */
|
|
2950
|
+
...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
|
|
2951
|
+
maxLength = input(undefined, /* @ts-ignore */
|
|
2952
|
+
...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
2953
|
+
pattern = input([], /* @ts-ignore */
|
|
2954
|
+
...(ngDevMode ? [{ debugName: "pattern" }] : /* istanbul ignore next */ []));
|
|
2505
2955
|
step = null;
|
|
2506
2956
|
set minlength(value) {
|
|
2507
2957
|
this.legacyMinLength.set(value);
|
|
@@ -2509,28 +2959,42 @@ class TdInput {
|
|
|
2509
2959
|
set maxlength(value) {
|
|
2510
2960
|
this.legacyMaxLength.set(value);
|
|
2511
2961
|
}
|
|
2512
|
-
value = model('',
|
|
2513
|
-
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2962
|
+
value = model('', /* @ts-ignore */
|
|
2963
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
2964
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
2965
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
2966
|
+
fieldError = computed(() => this.errors()[0]?.message || '', /* @ts-ignore */
|
|
2967
|
+
...(ngDevMode ? [{ debugName: "fieldError" }] : /* istanbul ignore next */ []));
|
|
2968
|
+
shouldDisplayFieldError = computed(() => this.formBridge.shouldDisplayError(this.errorDisplay(), this.invalid(), !!this.fieldError(), this.touched(), this.dirty()), /* @ts-ignore */
|
|
2969
|
+
...(ngDevMode ? [{ debugName: "shouldDisplayFieldError" }] : /* istanbul ignore next */ []));
|
|
2970
|
+
displayError = computed(() => this.error() || (this.shouldDisplayFieldError() ? this.fieldError() : ''), /* @ts-ignore */
|
|
2971
|
+
...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
2972
|
+
hasError = computed(() => !!this.error() || this.shouldDisplayFieldError(), /* @ts-ignore */
|
|
2973
|
+
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
2974
|
+
resolvedMinLength = computed(() => this.minLength() ?? this.legacyMinLength(), /* @ts-ignore */
|
|
2975
|
+
...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
|
|
2976
|
+
resolvedMaxLength = computed(() => this.maxLength() ?? this.legacyMaxLength(), /* @ts-ignore */
|
|
2977
|
+
...(ngDevMode ? [{ debugName: "resolvedMaxLength" }] : /* istanbul ignore next */ []));
|
|
2978
|
+
currentLength = computed(() => String(this.value() ?? '').length, /* @ts-ignore */
|
|
2979
|
+
...(ngDevMode ? [{ debugName: "currentLength" }] : /* istanbul ignore next */ []));
|
|
2521
2980
|
counterVisible = computed(() => this.showCounter() && this.resolvedMaxLength() !== null &&
|
|
2522
|
-
this.resolvedMaxLength() !== undefined,
|
|
2981
|
+
this.resolvedMaxLength() !== undefined, /* @ts-ignore */
|
|
2982
|
+
...(ngDevMode ? [{ debugName: "counterVisible" }] : /* istanbul ignore next */ []));
|
|
2523
2983
|
counterAtLimit = computed(() => {
|
|
2524
2984
|
const maxLength = this.resolvedMaxLength();
|
|
2525
2985
|
return maxLength !== null && maxLength !== undefined &&
|
|
2526
2986
|
this.currentLength() >= maxLength;
|
|
2527
|
-
},
|
|
2528
|
-
|
|
2987
|
+
}, /* @ts-ignore */
|
|
2988
|
+
...(ngDevMode ? [{ debugName: "counterAtLimit" }] : /* istanbul ignore next */ []));
|
|
2989
|
+
hasSupportingContent = computed(() => !!this.displayError() || !!this.hint || this.counterVisible(), /* @ts-ignore */
|
|
2990
|
+
...(ngDevMode ? [{ debugName: "hasSupportingContent" }] : /* istanbul ignore next */ []));
|
|
2529
2991
|
hasValue = computed(() => {
|
|
2530
2992
|
const currentValue = this.value();
|
|
2531
2993
|
return currentValue !== null && currentValue !== undefined && String(currentValue).length > 0;
|
|
2532
|
-
},
|
|
2533
|
-
|
|
2994
|
+
}, /* @ts-ignore */
|
|
2995
|
+
...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
2996
|
+
labelFloating = computed(() => this.focused() || this.hasValue() || this.type === 'date' || this.type === 'time', /* @ts-ignore */
|
|
2997
|
+
...(ngDevMode ? [{ debugName: "labelFloating" }] : /* istanbul ignore next */ []));
|
|
2534
2998
|
resolvedPattern = computed(() => {
|
|
2535
2999
|
const patterns = this.pattern();
|
|
2536
3000
|
if (!patterns.length)
|
|
@@ -2538,7 +3002,8 @@ class TdInput {
|
|
|
2538
3002
|
if (patterns.length === 1)
|
|
2539
3003
|
return patterns[0].source;
|
|
2540
3004
|
return patterns.map((item) => `(?=${item.source})`).join('') + '.*';
|
|
2541
|
-
},
|
|
3005
|
+
}, /* @ts-ignore */
|
|
3006
|
+
...(ngDevMode ? [{ debugName: "resolvedPattern" }] : /* istanbul ignore next */ []));
|
|
2542
3007
|
resolvedInputMode = computed(() => {
|
|
2543
3008
|
if (this.mask === 'time' || this.mask === 'time-seconds')
|
|
2544
3009
|
return 'numeric';
|
|
@@ -2550,8 +3015,10 @@ class TdInput {
|
|
|
2550
3015
|
if (presets.includes('decimal'))
|
|
2551
3016
|
return 'decimal';
|
|
2552
3017
|
return null;
|
|
2553
|
-
},
|
|
2554
|
-
|
|
3018
|
+
}, /* @ts-ignore */
|
|
3019
|
+
...(ngDevMode ? [{ debugName: "resolvedInputMode" }] : /* istanbul ignore next */ []));
|
|
3020
|
+
focused = signal(false, /* @ts-ignore */
|
|
3021
|
+
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
2555
3022
|
passwordVisible = false;
|
|
2556
3023
|
get inputId() {
|
|
2557
3024
|
return this.id || this.generatedId;
|
|
@@ -2798,8 +3265,8 @@ class TdInput {
|
|
|
2798
3265
|
this.value.set(value);
|
|
2799
3266
|
this.onChange(value);
|
|
2800
3267
|
}
|
|
2801
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
2802
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3268
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3269
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: false, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: false, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, emptyValue: { classPropertyName: "emptyValue", publicName: "emptyValue", isSignal: false, isRequired: false, transformFunction: null }, sanitize: { classPropertyName: "sanitize", publicName: "sanitize", isSignal: false, isRequired: false, transformFunction: null }, sanitizeValue: { classPropertyName: "sanitizeValue", publicName: "sanitizeValue", isSignal: false, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: false, isRequired: false, transformFunction: null }, integerDigits: { classPropertyName: "integerDigits", publicName: "integerDigits", isSignal: false, isRequired: false, transformFunction: null }, decimalDigits: { classPropertyName: "decimalDigits", publicName: "decimalDigits", isSignal: false, isRequired: false, transformFunction: null }, minValue: { classPropertyName: "minValue", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, maxValue: { classPropertyName: "maxValue", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: false, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
2803
3270
|
{
|
|
2804
3271
|
provide: NG_VALUE_ACCESSOR,
|
|
2805
3272
|
useExisting: forwardRef(() => TdInput),
|
|
@@ -2900,7 +3367,7 @@ class TdInput {
|
|
|
2900
3367
|
}
|
|
2901
3368
|
`, 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 });
|
|
2902
3369
|
}
|
|
2903
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdInput, decorators: [{
|
|
2904
3371
|
type: Component,
|
|
2905
3372
|
args: [{ selector: 'td-input', imports: [TdIcon], template: `
|
|
2906
3373
|
<div
|
|
@@ -3055,8 +3522,10 @@ class TdTextarea {
|
|
|
3055
3522
|
cdr = inject(ChangeDetectorRef);
|
|
3056
3523
|
formBridge = createTdFormControlBridge();
|
|
3057
3524
|
generatedId = `td-textarea-${++textareaSequence}`;
|
|
3058
|
-
legacyMinLength = signal(null,
|
|
3059
|
-
|
|
3525
|
+
legacyMinLength = signal(null, /* @ts-ignore */
|
|
3526
|
+
...(ngDevMode ? [{ debugName: "legacyMinLength" }] : /* istanbul ignore next */ []));
|
|
3527
|
+
legacyMaxLength = signal(null, /* @ts-ignore */
|
|
3528
|
+
...(ngDevMode ? [{ debugName: "legacyMaxLength" }] : /* istanbul ignore next */ []));
|
|
3060
3529
|
receivedNullValue = false;
|
|
3061
3530
|
nativeTextarea;
|
|
3062
3531
|
id = '';
|
|
@@ -3069,52 +3538,83 @@ class TdTextarea {
|
|
|
3069
3538
|
emptyValue = 'auto';
|
|
3070
3539
|
autoResize = true;
|
|
3071
3540
|
maxAutoRows = 10;
|
|
3072
|
-
name = input('',
|
|
3073
|
-
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
|
|
3082
|
-
|
|
3541
|
+
name = input('', /* @ts-ignore */
|
|
3542
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
3543
|
+
disabled = input(false, /* @ts-ignore */
|
|
3544
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3545
|
+
disabledReasons = input([], /* @ts-ignore */
|
|
3546
|
+
...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
3547
|
+
readonly = input(false, /* @ts-ignore */
|
|
3548
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
3549
|
+
hidden = input(false, /* @ts-ignore */
|
|
3550
|
+
...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
3551
|
+
invalid = input(false, /* @ts-ignore */
|
|
3552
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
3553
|
+
pending = input(false, /* @ts-ignore */
|
|
3554
|
+
...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
3555
|
+
dirty = input(false, /* @ts-ignore */
|
|
3556
|
+
...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
3557
|
+
required = input(false, /* @ts-ignore */
|
|
3558
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
3559
|
+
errors = input([], /* @ts-ignore */
|
|
3560
|
+
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
3561
|
+
touched = model(false, /* @ts-ignore */
|
|
3562
|
+
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
3083
3563
|
touch = output();
|
|
3084
|
-
error = input('',
|
|
3085
|
-
|
|
3086
|
-
|
|
3087
|
-
|
|
3088
|
-
|
|
3564
|
+
error = input('', /* @ts-ignore */
|
|
3565
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
3566
|
+
errorDisplay = input('auto', /* @ts-ignore */
|
|
3567
|
+
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
3568
|
+
showCounter = input(true, /* @ts-ignore */
|
|
3569
|
+
...(ngDevMode ? [{ debugName: "showCounter" }] : /* istanbul ignore next */ []));
|
|
3570
|
+
minLength = input(undefined, /* @ts-ignore */
|
|
3571
|
+
...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
|
|
3572
|
+
maxLength = input(undefined, /* @ts-ignore */
|
|
3573
|
+
...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
|
|
3089
3574
|
set minlength(value) {
|
|
3090
3575
|
this.legacyMinLength.set(value);
|
|
3091
3576
|
}
|
|
3092
3577
|
set maxlength(value) {
|
|
3093
3578
|
this.legacyMaxLength.set(value);
|
|
3094
3579
|
}
|
|
3095
|
-
value = model('',
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
|
|
3104
|
-
|
|
3580
|
+
value = model('', /* @ts-ignore */
|
|
3581
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
3582
|
+
focused = signal(false, /* @ts-ignore */
|
|
3583
|
+
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
3584
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
3585
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
3586
|
+
fieldError = computed(() => this.errors()[0]?.message || '', /* @ts-ignore */
|
|
3587
|
+
...(ngDevMode ? [{ debugName: "fieldError" }] : /* istanbul ignore next */ []));
|
|
3588
|
+
shouldDisplayFieldError = computed(() => this.formBridge.shouldDisplayError(this.errorDisplay(), this.invalid(), !!this.fieldError(), this.touched(), this.dirty()), /* @ts-ignore */
|
|
3589
|
+
...(ngDevMode ? [{ debugName: "shouldDisplayFieldError" }] : /* istanbul ignore next */ []));
|
|
3590
|
+
displayError = computed(() => this.error() || (this.shouldDisplayFieldError() ? this.fieldError() : ''), /* @ts-ignore */
|
|
3591
|
+
...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
3592
|
+
hasError = computed(() => !!this.error() || this.shouldDisplayFieldError(), /* @ts-ignore */
|
|
3593
|
+
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
3594
|
+
resolvedMinLength = computed(() => this.minLength() ?? this.legacyMinLength(), /* @ts-ignore */
|
|
3595
|
+
...(ngDevMode ? [{ debugName: "resolvedMinLength" }] : /* istanbul ignore next */ []));
|
|
3596
|
+
resolvedMaxLength = computed(() => this.maxLength() ?? this.legacyMaxLength(), /* @ts-ignore */
|
|
3597
|
+
...(ngDevMode ? [{ debugName: "resolvedMaxLength" }] : /* istanbul ignore next */ []));
|
|
3598
|
+
currentLength = computed(() => String(this.value() ?? '').length, /* @ts-ignore */
|
|
3599
|
+
...(ngDevMode ? [{ debugName: "currentLength" }] : /* istanbul ignore next */ []));
|
|
3105
3600
|
counterVisible = computed(() => this.showCounter() && this.resolvedMaxLength() !== null &&
|
|
3106
|
-
this.resolvedMaxLength() !== undefined,
|
|
3601
|
+
this.resolvedMaxLength() !== undefined, /* @ts-ignore */
|
|
3602
|
+
...(ngDevMode ? [{ debugName: "counterVisible" }] : /* istanbul ignore next */ []));
|
|
3107
3603
|
counterAtLimit = computed(() => {
|
|
3108
3604
|
const maxLength = this.resolvedMaxLength();
|
|
3109
3605
|
return maxLength !== null && maxLength !== undefined &&
|
|
3110
3606
|
this.currentLength() >= maxLength;
|
|
3111
|
-
},
|
|
3112
|
-
|
|
3607
|
+
}, /* @ts-ignore */
|
|
3608
|
+
...(ngDevMode ? [{ debugName: "counterAtLimit" }] : /* istanbul ignore next */ []));
|
|
3609
|
+
hasSupportingContent = computed(() => !!this.displayError() || !!this.hint || this.counterVisible(), /* @ts-ignore */
|
|
3610
|
+
...(ngDevMode ? [{ debugName: "hasSupportingContent" }] : /* istanbul ignore next */ []));
|
|
3113
3611
|
hasValue = computed(() => {
|
|
3114
3612
|
const currentValue = this.value();
|
|
3115
3613
|
return currentValue !== null && currentValue !== undefined && currentValue.length > 0;
|
|
3116
|
-
},
|
|
3117
|
-
|
|
3614
|
+
}, /* @ts-ignore */
|
|
3615
|
+
...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
3616
|
+
labelFloating = computed(() => this.focused() || this.hasValue(), /* @ts-ignore */
|
|
3617
|
+
...(ngDevMode ? [{ debugName: "labelFloating" }] : /* istanbul ignore next */ []));
|
|
3118
3618
|
get textareaId() {
|
|
3119
3619
|
return this.id || this.generatedId;
|
|
3120
3620
|
}
|
|
@@ -3191,8 +3691,8 @@ class TdTextarea {
|
|
|
3191
3691
|
textarea.style.height = `${nextHeight}px`;
|
|
3192
3692
|
textarea.style.overflowY = textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
|
|
3193
3693
|
}
|
|
3194
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3195
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
3694
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3695
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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 }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", 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: [
|
|
3196
3696
|
{
|
|
3197
3697
|
provide: NG_VALUE_ACCESSOR,
|
|
3198
3698
|
useExisting: forwardRef(() => TdTextarea),
|
|
@@ -3260,7 +3760,7 @@ class TdTextarea {
|
|
|
3260
3760
|
}
|
|
3261
3761
|
`, 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 });
|
|
3262
3762
|
}
|
|
3263
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
3763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTextarea, decorators: [{
|
|
3264
3764
|
type: Component,
|
|
3265
3765
|
args: [{ selector: 'td-textarea', template: `
|
|
3266
3766
|
<div
|
|
@@ -3362,6 +3862,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3362
3862
|
type: Input
|
|
3363
3863
|
}], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
3364
3864
|
|
|
3865
|
+
class TdMenu {
|
|
3866
|
+
items = [];
|
|
3867
|
+
etiqueta = '';
|
|
3868
|
+
icono = 'more_vertical';
|
|
3869
|
+
posicion = 'abajo-fin';
|
|
3870
|
+
ancho = '14rem';
|
|
3871
|
+
disabled = false;
|
|
3872
|
+
oscuro = false;
|
|
3873
|
+
ariaLabel = 'Abrir menu';
|
|
3874
|
+
seleccion = new EventEmitter();
|
|
3875
|
+
abiertoChange = new EventEmitter();
|
|
3876
|
+
abierto = false;
|
|
3877
|
+
get itemsVisibles() {
|
|
3878
|
+
return this.items.filter((item) => item.visible ?? true);
|
|
3879
|
+
}
|
|
3880
|
+
alternar() {
|
|
3881
|
+
if (this.disabled)
|
|
3882
|
+
return;
|
|
3883
|
+
this.establecerAbierto(!this.abierto);
|
|
3884
|
+
}
|
|
3885
|
+
cerrar() {
|
|
3886
|
+
this.establecerAbierto(false);
|
|
3887
|
+
}
|
|
3888
|
+
seleccionar(item) {
|
|
3889
|
+
if (item.deshabilitado)
|
|
3890
|
+
return;
|
|
3891
|
+
this.seleccion.emit({ item, id: item.id, data: item.data });
|
|
3892
|
+
this.cerrar();
|
|
3893
|
+
}
|
|
3894
|
+
posiciones() {
|
|
3895
|
+
const offset = 8;
|
|
3896
|
+
const mapa = {
|
|
3897
|
+
'abajo-inicio': [
|
|
3898
|
+
{
|
|
3899
|
+
originX: 'start',
|
|
3900
|
+
originY: 'bottom',
|
|
3901
|
+
overlayX: 'start',
|
|
3902
|
+
overlayY: 'top',
|
|
3903
|
+
offsetY: offset,
|
|
3904
|
+
},
|
|
3905
|
+
],
|
|
3906
|
+
'abajo-fin': [
|
|
3907
|
+
{
|
|
3908
|
+
originX: 'end',
|
|
3909
|
+
originY: 'bottom',
|
|
3910
|
+
overlayX: 'end',
|
|
3911
|
+
overlayY: 'top',
|
|
3912
|
+
offsetY: offset,
|
|
3913
|
+
},
|
|
3914
|
+
],
|
|
3915
|
+
'arriba-inicio': [
|
|
3916
|
+
{
|
|
3917
|
+
originX: 'start',
|
|
3918
|
+
originY: 'top',
|
|
3919
|
+
overlayX: 'start',
|
|
3920
|
+
overlayY: 'bottom',
|
|
3921
|
+
offsetY: -offset,
|
|
3922
|
+
},
|
|
3923
|
+
],
|
|
3924
|
+
'arriba-fin': [
|
|
3925
|
+
{
|
|
3926
|
+
originX: 'end',
|
|
3927
|
+
originY: 'top',
|
|
3928
|
+
overlayX: 'end',
|
|
3929
|
+
overlayY: 'bottom',
|
|
3930
|
+
offsetY: -offset,
|
|
3931
|
+
},
|
|
3932
|
+
],
|
|
3933
|
+
};
|
|
3934
|
+
return mapa[this.posicion];
|
|
3935
|
+
}
|
|
3936
|
+
establecerAbierto(valor) {
|
|
3937
|
+
if (this.abierto === valor)
|
|
3938
|
+
return;
|
|
3939
|
+
this.abierto = valor;
|
|
3940
|
+
this.abiertoChange.emit(valor);
|
|
3941
|
+
}
|
|
3942
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdMenu, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3943
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdMenu, isStandalone: true, selector: "td-menu", inputs: { items: "items", etiqueta: "etiqueta", icono: "icono", posicion: "posicion", ancho: "ancho", disabled: "disabled", oscuro: "oscuro", ariaLabel: "ariaLabel" }, outputs: { seleccion: "seleccion", abiertoChange: "abiertoChange" }, ngImport: i0, template: "<button\n #origen=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"td-menu__trigger\"\n [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"abierto\"\n aria-haspopup=\"menu\"\n (click)=\"alternar()\"\n>\n @if (icono) {\n <td-icon [nombre]=\"icono\" />\n }\n @if (etiqueta) {\n <span>{{ etiqueta }}</span>\n <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n }\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origen\"\n [cdkConnectedOverlayOpen]=\"abierto\"\n [cdkConnectedOverlayPositions]=\"posiciones()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'td-menu__backdrop'\"\n [cdkConnectedOverlayPanelClass]=\"'td-menu__overlay'\"\n (backdropClick)=\"cerrar()\"\n (detach)=\"cerrar()\"\n>\n <div\n class=\"td-menu\"\n [class.td-menu--oscuro]=\"oscuro\"\n [style.width]=\"ancho\"\n role=\"menu\"\n >\n @for (item of itemsVisibles; track item.id) {\n @if (item.separadorAntes) {\n <span class=\"td-menu__separador\" aria-hidden=\"true\"></span>\n }\n <button\n type=\"button\"\n role=\"menuitem\"\n [class]=\"'td-menu__item td-menu__item--' + (item.tono || 'neutro')\"\n [disabled]=\"item.deshabilitado\"\n (click)=\"seleccionar(item)\"\n >\n @if (item.icono) {\n <span class=\"td-menu__icono\">\n <td-icon [nombre]=\"item.icono\" />\n </span>\n }\n <span class=\"td-menu__texto\">\n <strong>{{ item.etiqueta }}</strong>\n @if (item.descripcion) {\n <small>{{ item.descripcion }}</small>\n }\n </span>\n </button>\n } @empty {\n <div class=\"td-menu__vacio\">\n <td-icon nombre=\"inbox\" />\n <span>Sin opciones disponibles</span>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-menu__trigger{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-md, .85rem);padding:0 .8rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xs, 0 6px 16px rgba(31, 42, 68, .06));font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}.td-menu__trigger:hover:not(:disabled),.td-menu__trigger[aria-expanded=true]{border-color:var(--td-color-primary, #5746d8);color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .14))}.td-menu__trigger:disabled{opacity:.55;cursor:not-allowed}.td-menu__trigger--icon-only{width:2.35rem;padding:0}.td-menu{overflow:hidden;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-lg, 1rem);padding:.35rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-lg, 0 22px 52px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-menu--oscuro{border-color:var(--td-color-border, #2d3342);color:var(--td-color-text, #f8fafc);background:var(--td-color-surface, #111827)}.td-menu__item{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.65rem;border:0;border-radius:var(--td-radius-md, .75rem);padding:.62rem .7rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-menu__item:hover:not(:disabled),.td-menu__item:focus-visible{outline:none;background:var(--td-color-primary-soft, #eef2ff)}.td-menu__item:disabled{opacity:.45;cursor:not-allowed}.td-menu__item--primario{color:var(--td-color-primary, #5746d8)}.td-menu__item--exito{color:var(--td-color-success, #07845c)}.td-menu__item--advertencia{color:var(--td-color-warning, #b7791f)}.td-menu__item--peligro{color:var(--td-color-danger, #dc2626)}.td-menu__icono{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .6rem);background:color-mix(in srgb,currentColor 10%,transparent)}.td-menu__texto{display:grid;min-width:0;gap:.12rem}.td-menu__texto strong,.td-menu__texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-menu__texto strong{font-size:.78rem}.td-menu__texto small{color:var(--td-color-text-muted, #64748b);font-size:.68rem;font-weight:650}.td-menu__separador{display:block;height:1px;margin:.35rem .45rem;background:var(--td-color-border, #d9e1ee)}.td-menu__vacio{display:grid;min-height:5.5rem;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #64748b);font-size:.75rem;font-weight:750}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3944
|
+
}
|
|
3945
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdMenu, decorators: [{
|
|
3946
|
+
type: Component,
|
|
3947
|
+
args: [{ selector: 'td-menu', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #origen=\"cdkOverlayOrigin\"\n cdkOverlayOrigin\n type=\"button\"\n class=\"td-menu__trigger\"\n [class.td-menu__trigger--icon-only]=\"!etiqueta\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel\"\n [attr.aria-expanded]=\"abierto\"\n aria-haspopup=\"menu\"\n (click)=\"alternar()\"\n>\n @if (icono) {\n <td-icon [nombre]=\"icono\" />\n }\n @if (etiqueta) {\n <span>{{ etiqueta }}</span>\n <td-icon nombre=\"chevron_down\" tamano=\".95rem\" />\n }\n</button>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origen\"\n [cdkConnectedOverlayOpen]=\"abierto\"\n [cdkConnectedOverlayPositions]=\"posiciones()\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n [cdkConnectedOverlayBackdropClass]=\"'td-menu__backdrop'\"\n [cdkConnectedOverlayPanelClass]=\"'td-menu__overlay'\"\n (backdropClick)=\"cerrar()\"\n (detach)=\"cerrar()\"\n>\n <div\n class=\"td-menu\"\n [class.td-menu--oscuro]=\"oscuro\"\n [style.width]=\"ancho\"\n role=\"menu\"\n >\n @for (item of itemsVisibles; track item.id) {\n @if (item.separadorAntes) {\n <span class=\"td-menu__separador\" aria-hidden=\"true\"></span>\n }\n <button\n type=\"button\"\n role=\"menuitem\"\n [class]=\"'td-menu__item td-menu__item--' + (item.tono || 'neutro')\"\n [disabled]=\"item.deshabilitado\"\n (click)=\"seleccionar(item)\"\n >\n @if (item.icono) {\n <span class=\"td-menu__icono\">\n <td-icon [nombre]=\"item.icono\" />\n </span>\n }\n <span class=\"td-menu__texto\">\n <strong>{{ item.etiqueta }}</strong>\n @if (item.descripcion) {\n <small>{{ item.descripcion }}</small>\n }\n </span>\n </button>\n } @empty {\n <div class=\"td-menu__vacio\">\n <td-icon nombre=\"inbox\" />\n <span>Sin opciones disponibles</span>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:inline-block;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-menu__trigger{display:inline-flex;min-height:2.35rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-md, .85rem);padding:0 .8rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-xs, 0 6px 16px rgba(31, 42, 68, .06));font:inherit;font-size:.78rem;font-weight:800;cursor:pointer;transition:border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .14s ease}.td-menu__trigger:hover:not(:disabled),.td-menu__trigger[aria-expanded=true]{border-color:var(--td-color-primary, #5746d8);color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .14))}.td-menu__trigger:disabled{opacity:.55;cursor:not-allowed}.td-menu__trigger--icon-only{width:2.35rem;padding:0}.td-menu{overflow:hidden;border:1px solid var(--td-color-border, #d9e1ee);border-radius:var(--td-radius-lg, 1rem);padding:.35rem;color:var(--td-color-text, #202b3d);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-lg, 0 22px 52px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}.td-menu--oscuro{border-color:var(--td-color-border, #2d3342);color:var(--td-color-text, #f8fafc);background:var(--td-color-surface, #111827)}.td-menu__item{display:grid;width:100%;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.65rem;border:0;border-radius:var(--td-radius-md, .75rem);padding:.62rem .7rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-menu__item:hover:not(:disabled),.td-menu__item:focus-visible{outline:none;background:var(--td-color-primary-soft, #eef2ff)}.td-menu__item:disabled{opacity:.45;cursor:not-allowed}.td-menu__item--primario{color:var(--td-color-primary, #5746d8)}.td-menu__item--exito{color:var(--td-color-success, #07845c)}.td-menu__item--advertencia{color:var(--td-color-warning, #b7791f)}.td-menu__item--peligro{color:var(--td-color-danger, #dc2626)}.td-menu__icono{display:grid;width:2rem;height:2rem;place-items:center;border-radius:var(--td-radius-sm, .6rem);background:color-mix(in srgb,currentColor 10%,transparent)}.td-menu__texto{display:grid;min-width:0;gap:.12rem}.td-menu__texto strong,.td-menu__texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-menu__texto strong{font-size:.78rem}.td-menu__texto small{color:var(--td-color-text-muted, #64748b);font-size:.68rem;font-weight:650}.td-menu__separador{display:block;height:1px;margin:.35rem .45rem;background:var(--td-color-border, #d9e1ee)}.td-menu__vacio{display:grid;min-height:5.5rem;place-items:center;align-content:center;gap:.35rem;color:var(--td-color-text-muted, #64748b);font-size:.75rem;font-weight:750}\n"] }]
|
|
3948
|
+
}], propDecorators: { items: [{
|
|
3949
|
+
type: Input
|
|
3950
|
+
}], etiqueta: [{
|
|
3951
|
+
type: Input
|
|
3952
|
+
}], icono: [{
|
|
3953
|
+
type: Input
|
|
3954
|
+
}], posicion: [{
|
|
3955
|
+
type: Input
|
|
3956
|
+
}], ancho: [{
|
|
3957
|
+
type: Input
|
|
3958
|
+
}], disabled: [{
|
|
3959
|
+
type: Input
|
|
3960
|
+
}], oscuro: [{
|
|
3961
|
+
type: Input
|
|
3962
|
+
}], ariaLabel: [{
|
|
3963
|
+
type: Input
|
|
3964
|
+
}], seleccion: [{
|
|
3965
|
+
type: Output
|
|
3966
|
+
}], abiertoChange: [{
|
|
3967
|
+
type: Output
|
|
3968
|
+
}] } });
|
|
3969
|
+
|
|
3365
3970
|
let autocompleteSequence = 0;
|
|
3366
3971
|
class TdAutocompleteSelect {
|
|
3367
3972
|
cdr = inject(ChangeDetectorRef);
|
|
@@ -3377,20 +3982,34 @@ class TdAutocompleteSelect {
|
|
|
3377
3982
|
placeholder = 'Escribe para buscar...';
|
|
3378
3983
|
options = [];
|
|
3379
3984
|
hint = '';
|
|
3380
|
-
|
|
3381
|
-
|
|
3382
|
-
|
|
3383
|
-
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
|
-
|
|
3390
|
-
|
|
3985
|
+
hideLabel = false;
|
|
3986
|
+
name = input('', /* @ts-ignore */
|
|
3987
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
3988
|
+
disabled = input(false, /* @ts-ignore */
|
|
3989
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
3990
|
+
disabledReasons = input([], /* @ts-ignore */
|
|
3991
|
+
...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
3992
|
+
readonly = input(false, /* @ts-ignore */
|
|
3993
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
3994
|
+
hidden = input(false, /* @ts-ignore */
|
|
3995
|
+
...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
3996
|
+
invalid = input(false, /* @ts-ignore */
|
|
3997
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
3998
|
+
pending = input(false, /* @ts-ignore */
|
|
3999
|
+
...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
4000
|
+
dirty = input(false, /* @ts-ignore */
|
|
4001
|
+
...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
4002
|
+
required = input(false, /* @ts-ignore */
|
|
4003
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
4004
|
+
errors = input([], /* @ts-ignore */
|
|
4005
|
+
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
4006
|
+
touched = model(false, /* @ts-ignore */
|
|
4007
|
+
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
3391
4008
|
touch = output();
|
|
3392
|
-
error = input('',
|
|
3393
|
-
|
|
4009
|
+
error = input('', /* @ts-ignore */
|
|
4010
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
4011
|
+
errorDisplay = input('auto', /* @ts-ignore */
|
|
4012
|
+
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
3394
4013
|
emptyText = 'No se encontraron resultados';
|
|
3395
4014
|
clearable = true;
|
|
3396
4015
|
dark = false;
|
|
@@ -3402,16 +4021,23 @@ class TdAutocompleteSelect {
|
|
|
3402
4021
|
compareWith = (first, second) => Object.is(first, second);
|
|
3403
4022
|
selectionChange = new EventEmitter();
|
|
3404
4023
|
searchChange = new EventEmitter();
|
|
3405
|
-
value = model(null,
|
|
3406
|
-
|
|
3407
|
-
|
|
3408
|
-
|
|
3409
|
-
|
|
3410
|
-
|
|
4024
|
+
value = model(null, /* @ts-ignore */
|
|
4025
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
4026
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
4027
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
4028
|
+
fieldError = computed(() => this.errors()[0]?.message || '', /* @ts-ignore */
|
|
4029
|
+
...(ngDevMode ? [{ debugName: "fieldError" }] : /* istanbul ignore next */ []));
|
|
4030
|
+
shouldDisplayFieldError = computed(() => this.formBridge.shouldDisplayError(this.errorDisplay(), this.invalid(), !!this.fieldError(), this.touched(), this.dirty()), /* @ts-ignore */
|
|
4031
|
+
...(ngDevMode ? [{ debugName: "shouldDisplayFieldError" }] : /* istanbul ignore next */ []));
|
|
4032
|
+
displayError = computed(() => this.error() || (this.shouldDisplayFieldError() ? this.fieldError() : ''), /* @ts-ignore */
|
|
4033
|
+
...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
4034
|
+
hasError = computed(() => !!this.error() || this.shouldDisplayFieldError(), /* @ts-ignore */
|
|
4035
|
+
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
3411
4036
|
search = '';
|
|
3412
4037
|
open = false;
|
|
3413
4038
|
activeIndex = -1;
|
|
3414
|
-
focused = signal(false,
|
|
4039
|
+
focused = signal(false, /* @ts-ignore */
|
|
4040
|
+
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
3415
4041
|
scrollStrategy = this.scrollStrategies.reposition();
|
|
3416
4042
|
overlayPositions = [
|
|
3417
4043
|
{
|
|
@@ -3435,6 +4061,12 @@ class TdAutocompleteSelect {
|
|
|
3435
4061
|
get listId() {
|
|
3436
4062
|
return `${this.generatedId}-list`;
|
|
3437
4063
|
}
|
|
4064
|
+
get hasVisibleLabel() {
|
|
4065
|
+
return !this.hideLabel && !!this.label.trim();
|
|
4066
|
+
}
|
|
4067
|
+
get accessibleLabel() {
|
|
4068
|
+
return this.label.trim() || this.placeholder;
|
|
4069
|
+
}
|
|
3438
4070
|
get filteredOptions() {
|
|
3439
4071
|
const normalized = this.search.trim().toLocaleLowerCase();
|
|
3440
4072
|
if (normalized.length < this.minimumCharacters)
|
|
@@ -3442,7 +4074,8 @@ class TdAutocompleteSelect {
|
|
|
3442
4074
|
return this.options.filter((option) => this.filterWith(option, normalized));
|
|
3443
4075
|
}
|
|
3444
4076
|
get labelFloating() {
|
|
3445
|
-
return
|
|
4077
|
+
return (this.hasVisibleLabel &&
|
|
4078
|
+
(this.focused() || this.open || !!this.search.trim() || this.value() !== null));
|
|
3446
4079
|
}
|
|
3447
4080
|
changed = () => undefined;
|
|
3448
4081
|
constructor() {
|
|
@@ -3657,8 +4290,8 @@ class TdAutocompleteSelect {
|
|
|
3657
4290
|
}
|
|
3658
4291
|
});
|
|
3659
4292
|
}
|
|
3660
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
3661
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4293
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4294
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, minimumCharacters: { classPropertyName: "minimumCharacters", publicName: "minimumCharacters", isSignal: false, isRequired: false, transformFunction: null }, filterWith: { classPropertyName: "filterWith", publicName: "filterWith", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", searchChange: "searchChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
3662
4295
|
{
|
|
3663
4296
|
provide: NG_VALUE_ACCESSOR,
|
|
3664
4297
|
useExisting: forwardRef(() => TdAutocompleteSelect),
|
|
@@ -3676,8 +4309,11 @@ class TdAutocompleteSelect {
|
|
|
3676
4309
|
[class.td-select--floating]="labelFloating"
|
|
3677
4310
|
[class.td-select--filled]="appearance === 'filled'"
|
|
3678
4311
|
[class.td-select--standard]="appearance === 'standard'"
|
|
4312
|
+
[class.td-select--no-label]="!hasVisibleLabel"
|
|
3679
4313
|
>
|
|
3680
|
-
|
|
4314
|
+
@if (hasVisibleLabel) {
|
|
4315
|
+
<label [for]="inputId">{{ label }}</label>
|
|
4316
|
+
}
|
|
3681
4317
|
<div class="td-select__trigger">
|
|
3682
4318
|
<td-icon class="td-select__leading" nombre="search" />
|
|
3683
4319
|
<input
|
|
@@ -3687,11 +4323,12 @@ class TdAutocompleteSelect {
|
|
|
3687
4323
|
autocomplete="off"
|
|
3688
4324
|
role="combobox"
|
|
3689
4325
|
[value]="search"
|
|
3690
|
-
[placeholder]="labelFloating ? placeholder : ''"
|
|
4326
|
+
[placeholder]="labelFloating || !hasVisibleLabel ? placeholder : ''"
|
|
3691
4327
|
[disabled]="isDisabled()"
|
|
3692
4328
|
[readonly]="readonly()"
|
|
3693
4329
|
[required]="required()"
|
|
3694
4330
|
[attr.aria-invalid]="hasError()"
|
|
4331
|
+
[attr.aria-label]="hasVisibleLabel ? null : accessibleLabel"
|
|
3695
4332
|
[attr.aria-expanded]="open"
|
|
3696
4333
|
[attr.aria-controls]="listId"
|
|
3697
4334
|
(focus)="handleFocus()"
|
|
@@ -3773,7 +4410,7 @@ class TdAutocompleteSelect {
|
|
|
3773
4410
|
</ng-template>
|
|
3774
4411
|
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3775
4412
|
}
|
|
3776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4413
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdAutocompleteSelect, decorators: [{
|
|
3777
4414
|
type: Component,
|
|
3778
4415
|
args: [{ selector: 'td-autocomplete-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], template: `
|
|
3779
4416
|
<div
|
|
@@ -3787,8 +4424,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3787
4424
|
[class.td-select--floating]="labelFloating"
|
|
3788
4425
|
[class.td-select--filled]="appearance === 'filled'"
|
|
3789
4426
|
[class.td-select--standard]="appearance === 'standard'"
|
|
4427
|
+
[class.td-select--no-label]="!hasVisibleLabel"
|
|
3790
4428
|
>
|
|
3791
|
-
|
|
4429
|
+
@if (hasVisibleLabel) {
|
|
4430
|
+
<label [for]="inputId">{{ label }}</label>
|
|
4431
|
+
}
|
|
3792
4432
|
<div class="td-select__trigger">
|
|
3793
4433
|
<td-icon class="td-select__leading" nombre="search" />
|
|
3794
4434
|
<input
|
|
@@ -3798,11 +4438,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3798
4438
|
autocomplete="off"
|
|
3799
4439
|
role="combobox"
|
|
3800
4440
|
[value]="search"
|
|
3801
|
-
[placeholder]="labelFloating ? placeholder : ''"
|
|
4441
|
+
[placeholder]="labelFloating || !hasVisibleLabel ? placeholder : ''"
|
|
3802
4442
|
[disabled]="isDisabled()"
|
|
3803
4443
|
[readonly]="readonly()"
|
|
3804
4444
|
[required]="required()"
|
|
3805
4445
|
[attr.aria-invalid]="hasError()"
|
|
4446
|
+
[attr.aria-label]="hasVisibleLabel ? null : accessibleLabel"
|
|
3806
4447
|
[attr.aria-expanded]="open"
|
|
3807
4448
|
[attr.aria-controls]="listId"
|
|
3808
4449
|
(focus)="handleFocus()"
|
|
@@ -3909,6 +4550,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
3909
4550
|
type: Input
|
|
3910
4551
|
}], hint: [{
|
|
3911
4552
|
type: Input
|
|
4553
|
+
}], hideLabel: [{
|
|
4554
|
+
type: Input
|
|
3912
4555
|
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], emptyText: [{
|
|
3913
4556
|
type: Input
|
|
3914
4557
|
}], clearable: [{
|
|
@@ -3948,20 +4591,34 @@ class TdSelect {
|
|
|
3948
4591
|
placeholder = 'Selecciona una opción';
|
|
3949
4592
|
options = [];
|
|
3950
4593
|
hint = '';
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
|
|
3956
|
-
|
|
3957
|
-
|
|
3958
|
-
|
|
3959
|
-
|
|
3960
|
-
|
|
3961
|
-
|
|
4594
|
+
hideLabel = false;
|
|
4595
|
+
name = input('', /* @ts-ignore */
|
|
4596
|
+
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
4597
|
+
disabled = input(false, /* @ts-ignore */
|
|
4598
|
+
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
4599
|
+
disabledReasons = input([], /* @ts-ignore */
|
|
4600
|
+
...(ngDevMode ? [{ debugName: "disabledReasons" }] : /* istanbul ignore next */ []));
|
|
4601
|
+
readonly = input(false, /* @ts-ignore */
|
|
4602
|
+
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
4603
|
+
hidden = input(false, /* @ts-ignore */
|
|
4604
|
+
...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
|
|
4605
|
+
invalid = input(false, /* @ts-ignore */
|
|
4606
|
+
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
4607
|
+
pending = input(false, /* @ts-ignore */
|
|
4608
|
+
...(ngDevMode ? [{ debugName: "pending" }] : /* istanbul ignore next */ []));
|
|
4609
|
+
dirty = input(false, /* @ts-ignore */
|
|
4610
|
+
...(ngDevMode ? [{ debugName: "dirty" }] : /* istanbul ignore next */ []));
|
|
4611
|
+
required = input(false, /* @ts-ignore */
|
|
4612
|
+
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
4613
|
+
errors = input([], /* @ts-ignore */
|
|
4614
|
+
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
4615
|
+
touched = model(false, /* @ts-ignore */
|
|
4616
|
+
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
3962
4617
|
touch = output();
|
|
3963
|
-
error = input('',
|
|
3964
|
-
|
|
4618
|
+
error = input('', /* @ts-ignore */
|
|
4619
|
+
...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
|
|
4620
|
+
errorDisplay = input('auto', /* @ts-ignore */
|
|
4621
|
+
...(ngDevMode ? [{ debugName: "errorDisplay" }] : /* istanbul ignore next */ []));
|
|
3965
4622
|
emptyText = 'No hay opciones disponibles';
|
|
3966
4623
|
clearable = false;
|
|
3967
4624
|
dark = false;
|
|
@@ -3970,12 +4627,18 @@ class TdSelect {
|
|
|
3970
4627
|
appearance = 'outline';
|
|
3971
4628
|
compareWith = (first, second) => Object.is(first, second);
|
|
3972
4629
|
selectionChange = new EventEmitter();
|
|
3973
|
-
value = model(null,
|
|
3974
|
-
|
|
3975
|
-
|
|
3976
|
-
|
|
3977
|
-
|
|
3978
|
-
|
|
4630
|
+
value = model(null, /* @ts-ignore */
|
|
4631
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
4632
|
+
isDisabled = computed(() => this.formBridge.isDisabled(this.disabled()), /* @ts-ignore */
|
|
4633
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
4634
|
+
fieldError = computed(() => this.errors()[0]?.message || '', /* @ts-ignore */
|
|
4635
|
+
...(ngDevMode ? [{ debugName: "fieldError" }] : /* istanbul ignore next */ []));
|
|
4636
|
+
shouldDisplayFieldError = computed(() => this.formBridge.shouldDisplayError(this.errorDisplay(), this.invalid(), !!this.fieldError(), this.touched(), this.dirty()), /* @ts-ignore */
|
|
4637
|
+
...(ngDevMode ? [{ debugName: "shouldDisplayFieldError" }] : /* istanbul ignore next */ []));
|
|
4638
|
+
displayError = computed(() => this.error() || (this.shouldDisplayFieldError() ? this.fieldError() : ''), /* @ts-ignore */
|
|
4639
|
+
...(ngDevMode ? [{ debugName: "displayError" }] : /* istanbul ignore next */ []));
|
|
4640
|
+
hasError = computed(() => !!this.error() || this.shouldDisplayFieldError(), /* @ts-ignore */
|
|
4641
|
+
...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
|
|
3979
4642
|
open = false;
|
|
3980
4643
|
activeIndex = -1;
|
|
3981
4644
|
scrollStrategy = this.scrollStrategies.reposition();
|
|
@@ -3998,6 +4661,12 @@ class TdSelect {
|
|
|
3998
4661
|
get labelId() {
|
|
3999
4662
|
return `${this.generatedId}-label`;
|
|
4000
4663
|
}
|
|
4664
|
+
get hasVisibleLabel() {
|
|
4665
|
+
return !this.hideLabel && !!this.label.trim();
|
|
4666
|
+
}
|
|
4667
|
+
get accessibleLabel() {
|
|
4668
|
+
return this.label.trim() || this.placeholder;
|
|
4669
|
+
}
|
|
4001
4670
|
get listId() {
|
|
4002
4671
|
return `${this.generatedId}-list`;
|
|
4003
4672
|
}
|
|
@@ -4196,8 +4865,8 @@ class TdSelect {
|
|
|
4196
4865
|
}
|
|
4197
4866
|
});
|
|
4198
4867
|
}
|
|
4199
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4200
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
4868
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4869
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: false, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: false, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: false, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledReasons: { classPropertyName: "disabledReasons", publicName: "disabledReasons", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, pending: { classPropertyName: "pending", publicName: "pending", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, errorDisplay: { classPropertyName: "errorDisplay", publicName: "errorDisplay", isSignal: true, isRequired: false, transformFunction: null }, emptyText: { classPropertyName: "emptyText", publicName: "emptyText", isSignal: false, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: false, isRequired: false, transformFunction: null }, dark: { classPropertyName: "dark", publicName: "dark", isSignal: false, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: false, isRequired: false, transformFunction: null }, overflowText: { classPropertyName: "overflowText", publicName: "overflowText", isSignal: false, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: false, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", touch: "touch", selectionChange: "selectionChange", value: "valueChange" }, host: { properties: { "hidden": "hidden()", "attr.aria-busy": "pending() ? \"true\" : null" } }, providers: [
|
|
4201
4870
|
{
|
|
4202
4871
|
provide: NG_VALUE_ACCESSOR,
|
|
4203
4872
|
useExisting: forwardRef(() => TdSelect),
|
|
@@ -4214,8 +4883,11 @@ class TdSelect {
|
|
|
4214
4883
|
[class.td-select--dark]="dark"
|
|
4215
4884
|
[class.td-select--filled]="appearance === 'filled'"
|
|
4216
4885
|
[class.td-select--standard]="appearance === 'standard'"
|
|
4886
|
+
[class.td-select--no-label]="!hasVisibleLabel"
|
|
4217
4887
|
>
|
|
4218
|
-
|
|
4888
|
+
@if (hasVisibleLabel) {
|
|
4889
|
+
<label [id]="labelId">{{ label }}</label>
|
|
4890
|
+
}
|
|
4219
4891
|
<div
|
|
4220
4892
|
#trigger
|
|
4221
4893
|
class="td-select__trigger"
|
|
@@ -4225,7 +4897,8 @@ class TdSelect {
|
|
|
4225
4897
|
[attr.aria-readonly]="readonly()"
|
|
4226
4898
|
[attr.aria-required]="required()"
|
|
4227
4899
|
[attr.aria-invalid]="hasError()"
|
|
4228
|
-
[attr.aria-labelledby]="labelId"
|
|
4900
|
+
[attr.aria-labelledby]="hasVisibleLabel ? labelId : null"
|
|
4901
|
+
[attr.aria-label]="hasVisibleLabel ? null : accessibleLabel"
|
|
4229
4902
|
[attr.aria-expanded]="open"
|
|
4230
4903
|
[attr.aria-controls]="listId"
|
|
4231
4904
|
(click)="toggle()"
|
|
@@ -4316,7 +4989,7 @@ class TdSelect {
|
|
|
4316
4989
|
</ng-template>
|
|
4317
4990
|
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif)}*{box-sizing:border-box}.td-select{--td-select-bg: var(--td-color-surface, #fff);--td-select-border: var(--td-color-border, #dfe3eb);--td-select-text: var(--td-color-text, #263147);--td-select-muted: var(--td-color-text-muted, #748096);position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:var(--td-radius-md, .78rem);background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: var(--td-color-surface, #19191f);--td-select-border: var(--td-color-border, #34343e);--td-select-text: var(--td-color-text, #ededf0);--td-select-muted: var(--td-color-text-muted, #a1a1aa);color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,var(--td-select-border))}.td-select--open{border-color:var(--td-color-primary, #5746d8);box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(87, 70, 216, .13))}.td-select--error{border-color:var(--td-color-danger, #d33f3f);box-shadow:var(--td-danger-ring, 0 0 0 3px color-mix(in srgb, var(--td-color-danger, #d33f3f) 16%, transparent))}.td-select--disabled{opacity:.58;background:var(--td-color-surface-soft, #f5f6f8)}.td-select--filled{border-color:transparent;background:var(--td-color-surface-soft, #f6f8fb)}.td-select--filled:hover:not(.td-select--disabled){border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 24%,transparent);background:color-mix(in srgb,var(--td-color-primary-soft, #f2f0ff) 36%,var(--td-color-surface-soft, #f6f8fb))}.td-select--filled.td-select--open{border-color:color-mix(in srgb,var(--td-color-primary, #5746d8) 42%,transparent)}.td-select--standard{border-width:0 0 1px;border-radius:0;background:transparent}.td-select--standard:hover:not(.td-select--disabled){border-color:var(--td-color-primary-hover, #254680)}.td-select--standard.td-select--open{box-shadow:0 2px color-mix(in srgb,var(--td-color-primary, #5746d8) 72%,transparent)}.td-select--standard.td-select--error{box-shadow:0 2px color-mix(in srgb,var(--td-color-danger, #d33f3f) 72%,transparent)}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:var(--td-color-primary, #5746d8)}.td-select--error>label{color:var(--td-color-danger, #d33f3f)}.td-select--filled>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--standard>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select--autocomplete>label{top:50%;left:2.55rem;padding:0 .25rem;background:transparent;font-size:.78rem;transform:translateY(-50%);transform-origin:left center;transition:top .14s ease,left .14s ease,transform .14s ease,color .14s ease,background .14s ease,font-size .14s ease;pointer-events:none}.td-select--autocomplete.td-select--floating>label{top:-.48rem;left:.72rem;padding:0 .35rem;background:var(--td-select-bg);font-size:.65rem;transform:translateY(0)}.td-select--autocomplete.td-select--filled.td-select--floating>label{background:linear-gradient(to bottom,var(--td-color-surface, #fff) 0 45%,var(--td-color-surface-soft, #f6f8fb) 45% 100%)}.td-select--autocomplete.td-select--standard>label{left:2.05rem}.td-select--autocomplete.td-select--standard.td-select--floating>label{top:-.7rem;left:0;padding-inline:0;background:transparent}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:var(--td-radius-sm, .45rem);color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:var(--td-color-primary, #5746d8);background:var(--td-color-primary-soft, #f2f0ff)}.td-select__message{margin:.38rem .75rem 0;color:var(--td-color-text-muted, #748096);font-size:.66rem;line-height:1.4}.td-select__message--error{color:var(--td-color-danger, #c43636)}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid var(--td-color-border, #e1e5ee);border-radius:var(--td-radius-md, .78rem);padding:.35rem;color:var(--td-color-text, #263147);background:var(--td-color-surface, #fff);box-shadow:var(--td-shadow-md, 0 18px 46px rgba(15, 23, 42, .18));font-family:var(--td-font-family, Inter, ui-sans-serif, system-ui, sans-serif);animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:var(--td-color-border, #34343e);color:var(--td-color-text, #ededf0);background:var(--td-color-surface-soft, #202028)}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:var(--td-color-primary-soft, #f4f2ff)!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:var(--td-color-primary-soft, #2a2934)!important}.td-select-panel__option--selected{color:var(--td-color-primary, #5746d8)!important;background:var(--td-color-primary-soft, #eeecff)!important}.td-select-panel--dark .td-select-panel__option--selected{color:var(--td-color-primary, #b9b0fa)!important;background:var(--td-color-primary-soft, #292540)!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:var(--td-color-text-muted, #748096);font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:var(--td-color-text-muted, #748096);font-size:.72rem;text-align:center}.td-select-panel--wrap strong,.td-select-panel--wrap small{overflow:visible;text-overflow:clip;white-space:normal}.td-select-panel--marquee button>span{position:relative}.td-select-panel--marquee strong,.td-select-panel--marquee small{width:max-content;max-width:100%;will-change:transform}.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{max-width:none;animation:td-select-marquee var(--td-select-marquee-duration, 6s) ease-in-out .35s infinite alternate}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}@keyframes td-select-marquee{0%{transform:translate(0)}to{transform:translate(min(0px,-100% + var(--td-select-marquee-window, 16rem)))}}@media(prefers-reduced-motion:reduce){.td-select-panel--marquee button:hover .td-select-panel__text--overflow,.td-select-panel--marquee button:focus-visible .td-select-panel__text--overflow,.td-select-panel--marquee .td-select-panel__option--active .td-select-panel__text--overflow{animation:none}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4318
4991
|
}
|
|
4319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
4992
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSelect, decorators: [{
|
|
4320
4993
|
type: Component,
|
|
4321
4994
|
args: [{ selector: 'td-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], template: `
|
|
4322
4995
|
<div
|
|
@@ -4329,8 +5002,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4329
5002
|
[class.td-select--dark]="dark"
|
|
4330
5003
|
[class.td-select--filled]="appearance === 'filled'"
|
|
4331
5004
|
[class.td-select--standard]="appearance === 'standard'"
|
|
5005
|
+
[class.td-select--no-label]="!hasVisibleLabel"
|
|
4332
5006
|
>
|
|
4333
|
-
|
|
5007
|
+
@if (hasVisibleLabel) {
|
|
5008
|
+
<label [id]="labelId">{{ label }}</label>
|
|
5009
|
+
}
|
|
4334
5010
|
<div
|
|
4335
5011
|
#trigger
|
|
4336
5012
|
class="td-select__trigger"
|
|
@@ -4340,7 +5016,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4340
5016
|
[attr.aria-readonly]="readonly()"
|
|
4341
5017
|
[attr.aria-required]="required()"
|
|
4342
5018
|
[attr.aria-invalid]="hasError()"
|
|
4343
|
-
[attr.aria-labelledby]="labelId"
|
|
5019
|
+
[attr.aria-labelledby]="hasVisibleLabel ? labelId : null"
|
|
5020
|
+
[attr.aria-label]="hasVisibleLabel ? null : accessibleLabel"
|
|
4344
5021
|
[attr.aria-expanded]="open"
|
|
4345
5022
|
[attr.aria-controls]="listId"
|
|
4346
5023
|
(click)="toggle()"
|
|
@@ -4456,6 +5133,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4456
5133
|
type: Input
|
|
4457
5134
|
}], hint: [{
|
|
4458
5135
|
type: Input
|
|
5136
|
+
}], hideLabel: [{
|
|
5137
|
+
type: Input
|
|
4459
5138
|
}], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledReasons: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledReasons", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], pending: [{ type: i0.Input, args: [{ isSignal: true, alias: "pending", required: false }] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], touch: [{ type: i0.Output, args: ["touch"] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], errorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplay", required: false }] }], emptyText: [{
|
|
4460
5139
|
type: Input
|
|
4461
5140
|
}], clearable: [{
|
|
@@ -4500,9 +5179,12 @@ class TdSidebar {
|
|
|
4500
5179
|
}
|
|
4501
5180
|
abiertoChange = new EventEmitter();
|
|
4502
5181
|
seleccionar = new EventEmitter();
|
|
4503
|
-
abiertoInterno = signal(true,
|
|
4504
|
-
|
|
4505
|
-
|
|
5182
|
+
abiertoInterno = signal(true, /* @ts-ignore */
|
|
5183
|
+
...(ngDevMode ? [{ debugName: "abiertoInterno" }] : /* istanbul ignore next */ []));
|
|
5184
|
+
menuNormalizado = signal([], /* @ts-ignore */
|
|
5185
|
+
...(ngDevMode ? [{ debugName: "menuNormalizado" }] : /* istanbul ignore next */ []));
|
|
5186
|
+
expandidos = signal(new Set(), /* @ts-ignore */
|
|
5187
|
+
...(ngDevMode ? [{ debugName: "expandidos" }] : /* istanbul ignore next */ []));
|
|
4506
5188
|
alternarGrupo(clave) {
|
|
4507
5189
|
if (!this.abiertoInterno()) {
|
|
4508
5190
|
this.abiertoInterno.set(true);
|
|
@@ -4535,10 +5217,10 @@ class TdSidebar {
|
|
|
4535
5217
|
subMenus: this.normalizarMenu(item.subMenus ?? []),
|
|
4536
5218
|
}));
|
|
4537
5219
|
}
|
|
4538
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4539
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5220
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5221
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdSidebar, isStandalone: true, selector: "td-sidebar", inputs: { titulo: "titulo", subtitulo: "subtitulo", etiquetaNavegacion: "etiquetaNavegacion", logoUrl: "logoUrl", logoAlt: "logoAlt", textoCarga: "textoCarga", mensajeVacio: "mensajeVacio", error: "error", cargando: "cargando", oscuro: "oscuro", modoCerrado: "modoCerrado", abierto: "abierto", menu: "menu" }, outputs: { abiertoChange: "abiertoChange", seleccionar: "seleccionar" }, ngImport: i0, template: "<aside\n class=\"td-sidebar\"\n [class.td-sidebar--compacto]=\"!abiertoInterno() && modoCerrado === 'compacto'\"\n [class.td-sidebar--oculto]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n [class.td-sidebar--oscuro]=\"oscuro\"\n [attr.aria-hidden]=\"!abiertoInterno() && modoCerrado === 'oculto'\"\n>\n <header class=\"td-sidebar__marca\">\n <div class=\"td-sidebar__logo\">\n @if (logoUrl) {\n <img [src]=\"logoUrl\" [alt]=\"logoAlt\" />\n } @else {\n <span>{{ inicialMarca() }}</span>\n }\n </div>\n\n @if (abiertoInterno()) {\n <div class=\"td-sidebar__marca-texto\">\n <small>{{ subtitulo }}</small>\n <strong>{{ titulo }}</strong>\n </div>\n }\n\n </header>\n\n <div class=\"td-sidebar__encabezado\">\n @if (abiertoInterno()) {\n <span>{{ etiquetaNavegacion }}</span>\n } @else {\n <span aria-hidden=\"true\">\u2022\u2022\u2022</span>\n }\n </div>\n\n <nav class=\"td-sidebar__nav\" aria-label=\"Men\u00FA principal\">\n @if (cargando) {\n <p class=\"td-sidebar__estado\">{{ textoCarga }}</p>\n } @else if (error) {\n <p class=\"td-sidebar__estado td-sidebar__estado--error\">{{ error }}</p>\n } @else if (!menuNormalizado().length) {\n <p class=\"td-sidebar__estado\">{{ mensajeVacio }}</p>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"listaMenu\"\n [ngTemplateOutletContext]=\"{ items: menuNormalizado(), nivel: 0, padre: 'raiz' }\"\n />\n }\n </nav>\n</aside>\n\n<ng-template #listaMenu let-items=\"items\" let-nivel=\"nivel\" let-padre=\"padre\">\n <ul class=\"td-sidebar__lista\" [class.td-sidebar__lista--anidada]=\"nivel > 0\">\n @for (item of items; track item) {\n @let clave = claveItem(item, padre, $index);\n @let tieneHijos = item.subMenus.length > 0;\n\n <li class=\"td-sidebar__item\">\n @if (tieneHijos) {\n <button\n class=\"td-sidebar__enlace\"\n type=\"button\"\n [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", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4540
5222
|
}
|
|
4541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5223
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdSidebar, decorators: [{
|
|
4542
5224
|
type: Component,
|
|
4543
5225
|
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"] }]
|
|
4544
5226
|
}], propDecorators: { titulo: [{
|
|
@@ -4585,14 +5267,14 @@ class TdTab {
|
|
|
4585
5267
|
get resolvedId() {
|
|
4586
5268
|
return this.id || this.generatedId;
|
|
4587
5269
|
}
|
|
4588
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
5270
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5271
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.4", type: TdTab, isStandalone: true, selector: "td-tab", inputs: { id: "id", label: "label", icon: "icon", disabled: "disabled", badge: "badge" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
|
|
4590
5272
|
<ng-template>
|
|
4591
5273
|
<ng-content />
|
|
4592
5274
|
</ng-template>
|
|
4593
5275
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4594
5276
|
}
|
|
4595
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5277
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTab, decorators: [{
|
|
4596
5278
|
type: Component,
|
|
4597
5279
|
args: [{
|
|
4598
5280
|
selector: 'td-tab',
|
|
@@ -4755,8 +5437,8 @@ class TdTabs {
|
|
|
4755
5437
|
});
|
|
4756
5438
|
}
|
|
4757
5439
|
}
|
|
4758
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4759
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
5440
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5441
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdTabs, isStandalone: true, selector: "td-tabs", inputs: { selectedIndex: "selectedIndex", variant: "variant", alignment: "alignment", stretch: "stretch", dark: "dark", ariaLabel: "ariaLabel", panelFocusable: "panelFocusable" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, queries: [{ propertyName: "tabQuery", predicate: TdTab }], viewQueries: [{ propertyName: "tabList", first: true, predicate: ["tabList"], descendants: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: `
|
|
4760
5442
|
<section
|
|
4761
5443
|
class="td-tabs"
|
|
4762
5444
|
[class.td-tabs--dark]="dark"
|
|
@@ -4810,7 +5492,7 @@ class TdTabs {
|
|
|
4810
5492
|
</section>
|
|
4811
5493
|
`, 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 });
|
|
4812
5494
|
}
|
|
4813
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdTabs, decorators: [{
|
|
4814
5496
|
type: Component,
|
|
4815
5497
|
args: [{ selector: 'td-tabs', imports: [NgTemplateOutlet, TdIcon], template: `
|
|
4816
5498
|
<section
|
|
@@ -4941,9 +5623,12 @@ const THEME_CLASS_LIGHT = 'td-theme-light';
|
|
|
4941
5623
|
const THEME_CLASS_DARK = 'td-theme-dark';
|
|
4942
5624
|
class TdThemeService {
|
|
4943
5625
|
document = inject(DOCUMENT);
|
|
4944
|
-
systemDark = signal(this.readSystemPreference(),
|
|
4945
|
-
|
|
4946
|
-
|
|
5626
|
+
systemDark = signal(this.readSystemPreference(), /* @ts-ignore */
|
|
5627
|
+
...(ngDevMode ? [{ debugName: "systemDark" }] : /* istanbul ignore next */ []));
|
|
5628
|
+
mode = signal('light', /* @ts-ignore */
|
|
5629
|
+
...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
5630
|
+
isDark = computed(() => this.mode() === 'dark' || (this.mode() === 'system' && this.systemDark()), /* @ts-ignore */
|
|
5631
|
+
...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
|
|
4947
5632
|
constructor() {
|
|
4948
5633
|
this.listenSystemPreference();
|
|
4949
5634
|
effect(() => this.applyThemeClass(this.isDark(), this.mode()));
|
|
@@ -4972,10 +5657,10 @@ class TdThemeService {
|
|
|
4972
5657
|
const listener = (event) => this.systemDark.set(event.matches);
|
|
4973
5658
|
query.addEventListener?.('change', listener);
|
|
4974
5659
|
}
|
|
4975
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
4976
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
5660
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
5661
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdThemeService, providedIn: 'root' });
|
|
4977
5662
|
}
|
|
4978
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
5663
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdThemeService, decorators: [{
|
|
4979
5664
|
type: Injectable,
|
|
4980
5665
|
args: [{ providedIn: 'root' }]
|
|
4981
5666
|
}], ctorParameters: () => [] });
|
|
@@ -4988,5 +5673,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
4988
5673
|
* Generated bundle index. Do not edit.
|
|
4989
5674
|
*/
|
|
4990
5675
|
|
|
4991
|
-
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 };
|
|
5676
|
+
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, TdFileViewer, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdMenu, TdSelect, TdSidebar, TdTab, TdTabs, TdTextarea, TdThemeService, TelcomdevUi, createTdFormControlBridge };
|
|
4992
5677
|
//# sourceMappingURL=telcomdev-ui.mjs.map
|