@telcomdev/ui 0.1.3 → 0.1.4
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, Injector, ChangeDetectorRef, signal, input, model, output, computed, forwardRef,
|
|
2
|
+
import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, 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';
|
|
@@ -701,6 +701,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
701
701
|
}] } });
|
|
702
702
|
|
|
703
703
|
class TdButton {
|
|
704
|
+
contentRef;
|
|
704
705
|
variant = 'solid';
|
|
705
706
|
tone = 'primary';
|
|
706
707
|
size = 'md';
|
|
@@ -710,20 +711,32 @@ class TdButton {
|
|
|
710
711
|
disabled = false;
|
|
711
712
|
loading = false;
|
|
712
713
|
block = false;
|
|
714
|
+
iconOnly = false;
|
|
713
715
|
ariaLabel = '';
|
|
714
716
|
pressed = new EventEmitter();
|
|
717
|
+
hasProjectedContent = false;
|
|
718
|
+
get isIconOnly() {
|
|
719
|
+
return !!this.icon && (this.iconOnly || !this.hasProjectedContent);
|
|
720
|
+
}
|
|
721
|
+
ngAfterContentChecked() {
|
|
722
|
+
const element = this.contentRef?.nativeElement;
|
|
723
|
+
if (!element)
|
|
724
|
+
return;
|
|
725
|
+
this.hasProjectedContent = !!element.textContent?.trim() || element.childElementCount > 0;
|
|
726
|
+
}
|
|
715
727
|
handleClick(event) {
|
|
716
728
|
if (this.disabled || this.loading)
|
|
717
729
|
return;
|
|
718
730
|
this.pressed.emit(event);
|
|
719
731
|
}
|
|
720
732
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
721
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdButton, isStandalone: true, selector: "td-button", inputs: { variant: "variant", tone: "tone", size: "size", type: "type", icon: "icon", iconPosition: "iconPosition", disabled: "disabled", loading: "loading", block: "block", ariaLabel: ["aria-label", "ariaLabel"] }, outputs: { pressed: "pressed" }, ngImport: i0, template: `
|
|
733
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdButton, isStandalone: true, selector: "td-button", inputs: { variant: "variant", tone: "tone", size: "size", type: "type", icon: "icon", iconPosition: "iconPosition", disabled: "disabled", loading: "loading", block: "block", 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: `
|
|
722
734
|
<button
|
|
723
735
|
class="td-button"
|
|
724
736
|
[class]="'td-button td-button--' + variant + ' td-button--' + tone + ' td-button--' + size"
|
|
725
737
|
[class.td-button--block]="block"
|
|
726
738
|
[class.td-button--loading]="loading"
|
|
739
|
+
[class.td-button--icon-only]="isIconOnly"
|
|
727
740
|
[type]="type"
|
|
728
741
|
[disabled]="disabled || loading"
|
|
729
742
|
[attr.aria-label]="ariaLabel || null"
|
|
@@ -736,13 +749,19 @@ class TdButton {
|
|
|
736
749
|
<td-icon [nombre]="icon" />
|
|
737
750
|
}
|
|
738
751
|
|
|
739
|
-
<span
|
|
752
|
+
<span
|
|
753
|
+
#content
|
|
754
|
+
class="td-button__content"
|
|
755
|
+
[class.td-button__content--hidden]="isIconOnly"
|
|
756
|
+
>
|
|
757
|
+
<ng-content />
|
|
758
|
+
</span>
|
|
740
759
|
|
|
741
760
|
@if (!loading && icon && iconPosition === 'end') {
|
|
742
761
|
<td-icon [nombre]="icon" />
|
|
743
762
|
}
|
|
744
763
|
</button>
|
|
745
|
-
`, isInline: true, styles: [":host{display:inline-block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
764
|
+
`, isInline: true, styles: [":host{display:inline-block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
746
765
|
}
|
|
747
766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdButton, decorators: [{
|
|
748
767
|
type: Component,
|
|
@@ -752,6 +771,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
752
771
|
[class]="'td-button td-button--' + variant + ' td-button--' + tone + ' td-button--' + size"
|
|
753
772
|
[class.td-button--block]="block"
|
|
754
773
|
[class.td-button--loading]="loading"
|
|
774
|
+
[class.td-button--icon-only]="isIconOnly"
|
|
755
775
|
[type]="type"
|
|
756
776
|
[disabled]="disabled || loading"
|
|
757
777
|
[attr.aria-label]="ariaLabel || null"
|
|
@@ -764,14 +784,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
764
784
|
<td-icon [nombre]="icon" />
|
|
765
785
|
}
|
|
766
786
|
|
|
767
|
-
<span
|
|
787
|
+
<span
|
|
788
|
+
#content
|
|
789
|
+
class="td-button__content"
|
|
790
|
+
[class.td-button__content--hidden]="isIconOnly"
|
|
791
|
+
>
|
|
792
|
+
<ng-content />
|
|
793
|
+
</span>
|
|
768
794
|
|
|
769
795
|
@if (!loading && icon && iconPosition === 'end') {
|
|
770
796
|
<td-icon [nombre]="icon" />
|
|
771
797
|
}
|
|
772
798
|
</button>
|
|
773
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
774
|
-
}], propDecorators: {
|
|
799
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-button{--td-button-main: var(--td-color-primary, #3157a4);--td-button-hover: var(--td-color-primary-hover, #254680);--td-button-soft: var(--td-color-primary-soft, #eaf0fb);--td-button-text: #fff;display:inline-flex;width:auto;min-width:0;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--td-radius-md, .75rem);color:var(--td-button-text);background:var(--td-button-main);box-shadow:var(--td-shadow-sm, 0 8px 22px rgba(32, 43, 61, .08));font-weight:760;line-height:1;white-space:nowrap;cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .12s ease}.td-button:hover:not(:disabled){background:var(--td-button-hover);transform:translateY(-1px)}.td-button:focus-visible{outline:0;box-shadow:var(--td-focus-ring, 0 0 0 3px rgba(49, 87, 164, .18))}.td-button:disabled{opacity:.54;cursor:not-allowed;transform:none}.td-button--block{width:100%}.td-button--sm{min-height:2.1rem;padding:0 .75rem;font-size:.7rem}.td-button--md{min-height:2.55rem;padding:0 .95rem;font-size:.76rem}.td-button--lg{min-height:3rem;padding:0 1.15rem;font-size:.82rem}.td-button--icon-only{aspect-ratio:1;gap:0;padding:0}.td-button--icon-only.td-button--sm{width:2.1rem}.td-button--icon-only.td-button--md{width:2.55rem}.td-button--icon-only.td-button--lg{width:3rem}.td-button--neutral{--td-button-main: var(--td-color-surface-muted, #edf1f6);--td-button-hover: var(--td-color-border, #dde3ee);--td-button-soft: var(--td-color-surface-soft, #f6f8fb);--td-button-text: var(--td-color-text, #202b3d)}.td-button--success{--td-button-main: var(--td-color-success, #16784a);--td-button-hover: color-mix(in srgb, var(--td-color-success, #16784a) 84%, #000);--td-button-soft: var(--td-color-success-soft, #e2f5eb)}.td-button--warning{--td-button-main: var(--td-color-warning, #a8660b);--td-button-hover: color-mix(in srgb, var(--td-color-warning, #a8660b) 84%, #000);--td-button-soft: var(--td-color-warning-soft, #fff2d8)}.td-button--danger{--td-button-main: var(--td-color-danger, #b93a3a);--td-button-hover: color-mix(in srgb, var(--td-color-danger, #b93a3a) 84%, #000);--td-button-soft: var(--td-color-danger-soft, #fde7e7)}.td-button--info{--td-button-main: var(--td-color-info, #2563a8);--td-button-hover: color-mix(in srgb, var(--td-color-info, #2563a8) 84%, #000);--td-button-soft: var(--td-color-info-soft, #e4effb)}.td-button--soft{border-color:transparent;color:var(--td-button-main);background:var(--td-button-soft);box-shadow:none}.td-button--soft:hover:not(:disabled){color:var(--td-button-hover);background:color-mix(in srgb,var(--td-button-soft) 82%,var(--td-button-main))}.td-button--outline{border-color:color-mix(in srgb,var(--td-button-main) 42%,var(--td-color-border, #dde3ee));color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--outline:hover:not(:disabled){border-color:var(--td-button-main);color:var(--td-button-hover);background:var(--td-button-soft)}.td-button--ghost{border-color:transparent;color:var(--td-button-main);background:transparent;box-shadow:none}.td-button--ghost:hover:not(:disabled){color:var(--td-button-hover);background:var(--td-button-soft)}.td-button__content{min-width:0;overflow:hidden;text-overflow:ellipsis}.td-button__content--hidden{display:none}.td-button__spinner{width:.9rem;height:.9rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:td-button-spin .72s linear infinite}@keyframes td-button-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
800
|
+
}], propDecorators: { contentRef: [{
|
|
801
|
+
type: ViewChild,
|
|
802
|
+
args: ['content', { static: true }]
|
|
803
|
+
}], variant: [{
|
|
775
804
|
type: Input
|
|
776
805
|
}], tone: [{
|
|
777
806
|
type: Input
|
|
@@ -789,6 +818,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
789
818
|
type: Input
|
|
790
819
|
}], block: [{
|
|
791
820
|
type: Input
|
|
821
|
+
}], iconOnly: [{
|
|
822
|
+
type: Input,
|
|
823
|
+
args: [{ transform: booleanAttribute }]
|
|
792
824
|
}], ariaLabel: [{
|
|
793
825
|
type: Input,
|
|
794
826
|
args: [{ alias: 'aria-label' }]
|