@heroelc/fsociety 0.0.5 → 0.0.6
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 { Injectable, Component, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewChild } from '@angular/core';
|
|
2
|
+
import { Injectable, Component, EventEmitter, HostBinding, Output, Input, ChangeDetectionStrategy, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
|
|
@@ -32,6 +32,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
32
32
|
` }]
|
|
33
33
|
}] });
|
|
34
34
|
|
|
35
|
+
class FsButtonComponent {
|
|
36
|
+
/** Variante visual del botón */
|
|
37
|
+
variant = 'primary';
|
|
38
|
+
/** Tamaño del botón */
|
|
39
|
+
size = 'md';
|
|
40
|
+
/** Tipo HTML nativo */
|
|
41
|
+
type = 'button';
|
|
42
|
+
/** Deshabilita el botón */
|
|
43
|
+
disabled = false;
|
|
44
|
+
/** Muestra spinner y deshabilita el botón */
|
|
45
|
+
loading = false;
|
|
46
|
+
/** Texto del botón (alternativa al content projection) */
|
|
47
|
+
label;
|
|
48
|
+
/** Ícono izquierdo — string SVG path o nombre de ícono */
|
|
49
|
+
iconLeft;
|
|
50
|
+
/** Ícono derecho */
|
|
51
|
+
iconRight;
|
|
52
|
+
/** Ancho completo del contenedor */
|
|
53
|
+
fullWidth = false;
|
|
54
|
+
/** Emite el click — no dispara si disabled o loading */
|
|
55
|
+
fsClick = new EventEmitter();
|
|
56
|
+
get hostWidth() {
|
|
57
|
+
return this.fullWidth ? '100%' : 'auto';
|
|
58
|
+
}
|
|
59
|
+
get isDisabled() {
|
|
60
|
+
return this.disabled || this.loading;
|
|
61
|
+
}
|
|
62
|
+
get classes() {
|
|
63
|
+
return {
|
|
64
|
+
[`fs-btn--${this.variant}`]: true,
|
|
65
|
+
[`fs-btn--${this.size}`]: true,
|
|
66
|
+
'fs-btn--loading': this.loading,
|
|
67
|
+
'fs-btn--disabled': this.isDisabled,
|
|
68
|
+
'fs-btn--full-width': this.fullWidth,
|
|
69
|
+
};
|
|
70
|
+
}
|
|
71
|
+
onClick(event) {
|
|
72
|
+
if (this.isDisabled) {
|
|
73
|
+
event.preventDefault();
|
|
74
|
+
event.stopPropagation();
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
this.fsClick.emit(event);
|
|
78
|
+
}
|
|
79
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
80
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsButtonComponent, isStandalone: true, selector: "fs-button", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", loading: "loading", label: "label", iconLeft: "iconLeft", iconRight: "iconRight", fullWidth: "fullWidth" }, outputs: { fsClick: "fsClick" }, host: { properties: { "style.width": "this.hostWidth" } }, ngImport: i0, template: "<button\n class=\"fs-btn\"\n [ngClass]=\"classes\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-disabled]=\"isDisabled\"\n [attr.aria-busy]=\"loading\"\n (click)=\"onClick($event)\"\n>\n <!-- spinner (solo cuando loading) -->\n <span *ngIf=\"loading\" class=\"fs-btn__spinner\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-dasharray=\"28\" stroke-dashoffset=\"10\" />\n </svg>\n </span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft && !loading\" class=\"fs-btn__icon fs-btn__icon--left\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label v\u00EDa input o content projection -->\n <span class=\"fs-btn__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight && !loading\" class=\"fs-btn__icon fs-btn__icon--right\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</button>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;border-radius:6px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;outline:none;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);position:relative;-webkit-user-select:none;user-select:none}.fs-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}.fs-btn--sm{font-size:.75rem;padding:.25rem .75rem;min-height:28px}.fs-btn--md{font-size:.875rem;padding:.5rem 1rem;min-height:36px}.fs-btn--lg{font-size:1rem;padding:.75rem 1.5rem;min-height:44px}.fs-btn--primary{background:var(--fs-primary-base);color:#fff;border-color:var(--fs-primary-base)}.fs-btn--primary:hover:not(:disabled){background:var(--fs-primary-hover);border-color:var(--fs-primary-hover)}.fs-btn--primary:active:not(:disabled){background:var(--fs-primary-active);border-color:var(--fs-primary-active)}.fs-btn--secondary{background:var(--fs-secondary-base);color:#fff;border-color:var(--fs-secondary-base)}.fs-btn--secondary:hover:not(:disabled){background:var(--fs-secondary-hover);border-color:var(--fs-secondary-hover)}.fs-btn--secondary:active:not(:disabled){background:var(--fs-secondary-active);border-color:var(--fs-secondary-active)}.fs-btn--outline{background:transparent;color:var(--fs-primary-base);border-color:var(--fs-primary-base)}.fs-btn--outline:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--outline:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--ghost{background:transparent;color:var(--fs-primary-base);border-color:transparent}.fs-btn--ghost:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--ghost:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--danger{background:var(--fs-danger-base);color:#fff;border-color:var(--fs-danger-base)}.fs-btn--danger:hover:not(:disabled){background:var(--fs-danger-hover);border-color:var(--fs-danger-hover)}.fs-btn--danger:active:not(:disabled){background:var(--fs-danger-active);border-color:var(--fs-danger-active)}.fs-btn--disabled,.fs-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fs-btn--loading{cursor:wait}.fs-btn--loading .fs-btn__label{opacity:.7}.fs-btn--full-width{width:100%}.fs-btn__spinner{display:flex;align-items:center;flex-shrink:0}.fs-btn__spinner svg{animation:fs-spin .35s linear infinite}.fs-btn__icon{display:flex;align-items:center;flex-shrink:0}.fs-btn__icon--left{margin-right:-.25rem}.fs-btn__icon--right{margin-left:-.25rem}.fs-btn__label{display:inline-flex;align-items:center;gap:.25rem;transition:opacity .1s cubic-bezier(.4,0,.2,1)}@keyframes fs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
81
|
+
}
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsButtonComponent, decorators: [{
|
|
83
|
+
type: Component,
|
|
84
|
+
args: [{ selector: 'fs-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"fs-btn\"\n [ngClass]=\"classes\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-disabled]=\"isDisabled\"\n [attr.aria-busy]=\"loading\"\n (click)=\"onClick($event)\"\n>\n <!-- spinner (solo cuando loading) -->\n <span *ngIf=\"loading\" class=\"fs-btn__spinner\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-dasharray=\"28\" stroke-dashoffset=\"10\" />\n </svg>\n </span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft && !loading\" class=\"fs-btn__icon fs-btn__icon--left\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label v\u00EDa input o content projection -->\n <span class=\"fs-btn__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight && !loading\" class=\"fs-btn__icon fs-btn__icon--right\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</button>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;border-radius:6px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;outline:none;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);position:relative;-webkit-user-select:none;user-select:none}.fs-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}.fs-btn--sm{font-size:.75rem;padding:.25rem .75rem;min-height:28px}.fs-btn--md{font-size:.875rem;padding:.5rem 1rem;min-height:36px}.fs-btn--lg{font-size:1rem;padding:.75rem 1.5rem;min-height:44px}.fs-btn--primary{background:var(--fs-primary-base);color:#fff;border-color:var(--fs-primary-base)}.fs-btn--primary:hover:not(:disabled){background:var(--fs-primary-hover);border-color:var(--fs-primary-hover)}.fs-btn--primary:active:not(:disabled){background:var(--fs-primary-active);border-color:var(--fs-primary-active)}.fs-btn--secondary{background:var(--fs-secondary-base);color:#fff;border-color:var(--fs-secondary-base)}.fs-btn--secondary:hover:not(:disabled){background:var(--fs-secondary-hover);border-color:var(--fs-secondary-hover)}.fs-btn--secondary:active:not(:disabled){background:var(--fs-secondary-active);border-color:var(--fs-secondary-active)}.fs-btn--outline{background:transparent;color:var(--fs-primary-base);border-color:var(--fs-primary-base)}.fs-btn--outline:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--outline:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--ghost{background:transparent;color:var(--fs-primary-base);border-color:transparent}.fs-btn--ghost:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--ghost:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--danger{background:var(--fs-danger-base);color:#fff;border-color:var(--fs-danger-base)}.fs-btn--danger:hover:not(:disabled){background:var(--fs-danger-hover);border-color:var(--fs-danger-hover)}.fs-btn--danger:active:not(:disabled){background:var(--fs-danger-active);border-color:var(--fs-danger-active)}.fs-btn--disabled,.fs-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fs-btn--loading{cursor:wait}.fs-btn--loading .fs-btn__label{opacity:.7}.fs-btn--full-width{width:100%}.fs-btn__spinner{display:flex;align-items:center;flex-shrink:0}.fs-btn__spinner svg{animation:fs-spin .35s linear infinite}.fs-btn__icon{display:flex;align-items:center;flex-shrink:0}.fs-btn__icon--left{margin-right:-.25rem}.fs-btn__icon--right{margin-left:-.25rem}.fs-btn__label{display:inline-flex;align-items:center;gap:.25rem;transition:opacity .1s cubic-bezier(.4,0,.2,1)}@keyframes fs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
85
|
+
}], propDecorators: { variant: [{
|
|
86
|
+
type: Input
|
|
87
|
+
}], size: [{
|
|
88
|
+
type: Input
|
|
89
|
+
}], type: [{
|
|
90
|
+
type: Input
|
|
91
|
+
}], disabled: [{
|
|
92
|
+
type: Input
|
|
93
|
+
}], loading: [{
|
|
94
|
+
type: Input
|
|
95
|
+
}], label: [{
|
|
96
|
+
type: Input
|
|
97
|
+
}], iconLeft: [{
|
|
98
|
+
type: Input
|
|
99
|
+
}], iconRight: [{
|
|
100
|
+
type: Input
|
|
101
|
+
}], fullWidth: [{
|
|
102
|
+
type: Input
|
|
103
|
+
}], fsClick: [{
|
|
104
|
+
type: Output
|
|
105
|
+
}], hostWidth: [{
|
|
106
|
+
type: HostBinding,
|
|
107
|
+
args: ['style.width']
|
|
108
|
+
}] } });
|
|
109
|
+
|
|
35
110
|
class FsBadgeComponent {
|
|
36
111
|
/** Color semántico del badge */
|
|
37
112
|
color = 'neutral';
|
|
@@ -76,11 +151,11 @@ class FsBadgeComponent {
|
|
|
76
151
|
this.removed.emit();
|
|
77
152
|
}
|
|
78
153
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
79
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsBadgeComponent, isStandalone: true, selector: "fs-badge", inputs: { color: "color", variant: "variant", size: "size", label: "label", dot: "dot", iconLeft: "iconLeft", iconRight: "iconRight", iconOnly: "iconOnly", removable: "removable" }, outputs: { removed: "removed" }, ngImport: i0, template: "<span class=\"fs-badge\" [ngClass]=\"classes\">\n\n <!-- dot de estado -->\n <span *ngIf=\"dot\" class=\"fs-badge__dot\" aria-hidden=\"true\"></span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label \u2014 oculto en iconOnly -->\n <span *ngIf=\"!iconOnly\" class=\"fs-badge__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- bot\u00F3n remove -->\n <button\n *ngIf=\"removable\"\n class=\"fs-badge__remove\"\n type=\"button\"\n aria-label=\"Remover\"\n (click)=\"onRemove($event)\"\n >\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 2l6 6M8 2L2 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n</span>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;white-space:nowrap;border:1px solid transparent;line-height:1}.fs-badge--sm{font-size:10px;padding:2px .5rem}.fs-badge--sm .fs-badge__icon svg{width:10px;height:10px}.fs-badge--md{font-size:.75rem;padding:3px .75rem}.fs-badge--md .fs-badge__icon svg{width:12px;height:12px}.fs-badge--icon-only{padding:.25rem!important;justify-content:center}.fs-badge--icon-only.fs-badge--sm{width:20px;height:20px}.fs-badge--icon-only.fs-badge--md{width:24px;height:24px}.fs-badge--primary.fs-badge--filled{background:var(--fs-primary-50);color:var(--fs-primary-800);border-color:var(--fs-primary-200)}.fs-badge--primary.fs-badge--outline{background:transparent;color:var(--fs-primary-500);border-color:var(--fs-primary-500)}.fs-badge--primary .fs-badge__dot{background:var(--fs-primary-500)}.fs-badge--secondary.fs-badge--filled{background:var(--fs-secondary-50);color:var(--fs-secondary-800);border-color:var(--fs-secondary-200)}.fs-badge--secondary.fs-badge--outline{background:transparent;color:var(--fs-secondary-500);border-color:var(--fs-secondary-500)}.fs-badge--secondary .fs-badge__dot{background:var(--fs-secondary-500)}.fs-badge--tertiary.fs-badge--filled{background:var(--fs-tertiary-50);color:var(--fs-tertiary-800);border-color:var(--fs-tertiary-200)}.fs-badge--tertiary.fs-badge--outline{background:transparent;color:var(--fs-tertiary-500);border-color:var(--fs-tertiary-500)}.fs-badge--tertiary .fs-badge__dot{background:var(--fs-tertiary-500)}.fs-badge--success.fs-badge--filled{background:var(--fs-success-50);color:var(--fs-success-800);border-color:var(--fs-success-200)}.fs-badge--success.fs-badge--outline{background:transparent;color:var(--fs-success-500);border-color:var(--fs-success-500)}.fs-badge--success .fs-badge__dot{background:var(--fs-success-500)}.fs-badge--warning.fs-badge--filled{background:var(--fs-warning-50);color:var(--fs-warning-800);border-color:var(--fs-warning-200)}.fs-badge--warning.fs-badge--outline{background:transparent;color:var(--fs-warning-500);border-color:var(--fs-warning-500)}.fs-badge--warning .fs-badge__dot{background:var(--fs-warning-500)}.fs-badge--danger.fs-badge--filled{background:var(--fs-danger-50);color:var(--fs-danger-800);border-color:var(--fs-danger-200)}.fs-badge--danger.fs-badge--outline{background:transparent;color:var(--fs-danger-500);border-color:var(--fs-danger-500)}.fs-badge--danger .fs-badge__dot{background:var(--fs-danger-500)}.fs-badge--neutral.fs-badge--filled{background:var(--fs-neutral-50);color:var(--fs-neutral-800);border-color:var(--fs-neutral-200)}.fs-badge--neutral.fs-badge--outline{background:transparent;color:var(--fs-neutral-500);border-color:var(--fs-neutral-500)}.fs-badge--neutral .fs-badge__dot{background:var(--fs-neutral-500)}.fs-badge__dot{width:6px;height:6px;border-radius:9999px;flex-shrink:0}.fs-badge__icon{display:inline-flex;align-items:center;flex-shrink:0}.fs-badge__label{display:inline-flex;align-items:center}.fs-badge__remove{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;color:inherit;opacity:.55;border-radius:9999px;transition:opacity .1s cubic-bezier(.4,0,.2,1);margin-left:2px}.fs-badge__remove:hover{opacity:1}.fs-badge__remove:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
154
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsBadgeComponent, isStandalone: true, selector: "fs-badge", inputs: { color: "color", variant: "variant", size: "size", label: "label", dot: "dot", iconLeft: "iconLeft", iconRight: "iconRight", iconOnly: "iconOnly", removable: "removable" }, outputs: { removed: "removed" }, ngImport: i0, template: "<span class=\"fs-badge\" [ngClass]=\"classes\">\n\n <!-- dot de estado -->\n <span *ngIf=\"dot\" class=\"fs-badge__dot\" aria-hidden=\"true\"></span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label \u2014 oculto en iconOnly -->\n <span *ngIf=\"!iconOnly\" class=\"fs-badge__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- bot\u00F3n remove -->\n <button\n *ngIf=\"removable\"\n class=\"fs-badge__remove\"\n type=\"button\"\n aria-label=\"Remover\"\n (click)=\"onRemove($event)\"\n >\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 2l6 6M8 2L2 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n</span>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;white-space:nowrap;border:1px solid transparent;line-height:1}.fs-badge--sm{font-size:.75rem;padding:.25rem .75rem}.fs-badge--sm .fs-badge__icon svg{width:11px;height:11px}.fs-badge--md{font-size:.875rem;padding:.25rem .75rem}.fs-badge--md .fs-badge__icon svg{width:13px;height:13px}.fs-badge--icon-only{padding:.25rem!important;justify-content:center}.fs-badge--icon-only.fs-badge--sm{width:24px;height:24px}.fs-badge--icon-only.fs-badge--md{width:28px;height:28px}.fs-badge--primary.fs-badge--filled{background:var(--fs-primary-50);color:var(--fs-primary-800);border-color:var(--fs-primary-200)}.fs-badge--primary.fs-badge--outline{background:transparent;color:var(--fs-primary-500);border-color:var(--fs-primary-500)}.fs-badge--primary .fs-badge__dot{background:var(--fs-primary-500)}.fs-badge--secondary.fs-badge--filled{background:var(--fs-secondary-50);color:var(--fs-secondary-800);border-color:var(--fs-secondary-200)}.fs-badge--secondary.fs-badge--outline{background:transparent;color:var(--fs-secondary-500);border-color:var(--fs-secondary-500)}.fs-badge--secondary .fs-badge__dot{background:var(--fs-secondary-500)}.fs-badge--tertiary.fs-badge--filled{background:var(--fs-tertiary-50);color:var(--fs-tertiary-800);border-color:var(--fs-tertiary-200)}.fs-badge--tertiary.fs-badge--outline{background:transparent;color:var(--fs-tertiary-500);border-color:var(--fs-tertiary-500)}.fs-badge--tertiary .fs-badge__dot{background:var(--fs-tertiary-500)}.fs-badge--success.fs-badge--filled{background:var(--fs-success-50);color:var(--fs-success-800);border-color:var(--fs-success-200)}.fs-badge--success.fs-badge--outline{background:transparent;color:var(--fs-success-500);border-color:var(--fs-success-500)}.fs-badge--success .fs-badge__dot{background:var(--fs-success-500)}.fs-badge--warning.fs-badge--filled{background:var(--fs-warning-50);color:var(--fs-warning-800);border-color:var(--fs-warning-200)}.fs-badge--warning.fs-badge--outline{background:transparent;color:var(--fs-warning-500);border-color:var(--fs-warning-500)}.fs-badge--warning .fs-badge__dot{background:var(--fs-warning-500)}.fs-badge--danger.fs-badge--filled{background:var(--fs-danger-50);color:var(--fs-danger-800);border-color:var(--fs-danger-200)}.fs-badge--danger.fs-badge--outline{background:transparent;color:var(--fs-danger-500);border-color:var(--fs-danger-500)}.fs-badge--danger .fs-badge__dot{background:var(--fs-danger-500)}.fs-badge--neutral.fs-badge--filled{background:var(--fs-neutral-50);color:var(--fs-neutral-800);border-color:var(--fs-neutral-200)}.fs-badge--neutral.fs-badge--outline{background:transparent;color:var(--fs-neutral-500);border-color:var(--fs-neutral-500)}.fs-badge--neutral .fs-badge__dot{background:var(--fs-neutral-500)}.fs-badge__dot{width:7px;height:7px;border-radius:9999px;flex-shrink:0}.fs-badge__icon{display:inline-flex;align-items:center;flex-shrink:0}.fs-badge__label{display:inline-flex;align-items:center}.fs-badge__remove{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;color:inherit;opacity:.55;border-radius:9999px;transition:opacity .1s cubic-bezier(.4,0,.2,1);margin-left:2px}.fs-badge__remove:hover{opacity:1}.fs-badge__remove:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
80
155
|
}
|
|
81
156
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsBadgeComponent, decorators: [{
|
|
82
157
|
type: Component,
|
|
83
|
-
args: [{ selector: 'fs-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fs-badge\" [ngClass]=\"classes\">\n\n <!-- dot de estado -->\n <span *ngIf=\"dot\" class=\"fs-badge__dot\" aria-hidden=\"true\"></span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label \u2014 oculto en iconOnly -->\n <span *ngIf=\"!iconOnly\" class=\"fs-badge__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- bot\u00F3n remove -->\n <button\n *ngIf=\"removable\"\n class=\"fs-badge__remove\"\n type=\"button\"\n aria-label=\"Remover\"\n (click)=\"onRemove($event)\"\n >\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 2l6 6M8 2L2 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n</span>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;white-space:nowrap;border:1px solid transparent;line-height:1}.fs-badge--sm{font-size:10px;padding:2px .5rem}.fs-badge--sm .fs-badge__icon svg{width:10px;height:10px}.fs-badge--md{font-size:.75rem;padding:3px .75rem}.fs-badge--md .fs-badge__icon svg{width:12px;height:12px}.fs-badge--icon-only{padding:.25rem!important;justify-content:center}.fs-badge--icon-only.fs-badge--sm{width:20px;height:20px}.fs-badge--icon-only.fs-badge--md{width:24px;height:24px}.fs-badge--primary.fs-badge--filled{background:var(--fs-primary-50);color:var(--fs-primary-800);border-color:var(--fs-primary-200)}.fs-badge--primary.fs-badge--outline{background:transparent;color:var(--fs-primary-500);border-color:var(--fs-primary-500)}.fs-badge--primary .fs-badge__dot{background:var(--fs-primary-500)}.fs-badge--secondary.fs-badge--filled{background:var(--fs-secondary-50);color:var(--fs-secondary-800);border-color:var(--fs-secondary-200)}.fs-badge--secondary.fs-badge--outline{background:transparent;color:var(--fs-secondary-500);border-color:var(--fs-secondary-500)}.fs-badge--secondary .fs-badge__dot{background:var(--fs-secondary-500)}.fs-badge--tertiary.fs-badge--filled{background:var(--fs-tertiary-50);color:var(--fs-tertiary-800);border-color:var(--fs-tertiary-200)}.fs-badge--tertiary.fs-badge--outline{background:transparent;color:var(--fs-tertiary-500);border-color:var(--fs-tertiary-500)}.fs-badge--tertiary .fs-badge__dot{background:var(--fs-tertiary-500)}.fs-badge--success.fs-badge--filled{background:var(--fs-success-50);color:var(--fs-success-800);border-color:var(--fs-success-200)}.fs-badge--success.fs-badge--outline{background:transparent;color:var(--fs-success-500);border-color:var(--fs-success-500)}.fs-badge--success .fs-badge__dot{background:var(--fs-success-500)}.fs-badge--warning.fs-badge--filled{background:var(--fs-warning-50);color:var(--fs-warning-800);border-color:var(--fs-warning-200)}.fs-badge--warning.fs-badge--outline{background:transparent;color:var(--fs-warning-500);border-color:var(--fs-warning-500)}.fs-badge--warning .fs-badge__dot{background:var(--fs-warning-500)}.fs-badge--danger.fs-badge--filled{background:var(--fs-danger-50);color:var(--fs-danger-800);border-color:var(--fs-danger-200)}.fs-badge--danger.fs-badge--outline{background:transparent;color:var(--fs-danger-500);border-color:var(--fs-danger-500)}.fs-badge--danger .fs-badge__dot{background:var(--fs-danger-500)}.fs-badge--neutral.fs-badge--filled{background:var(--fs-neutral-50);color:var(--fs-neutral-800);border-color:var(--fs-neutral-200)}.fs-badge--neutral.fs-badge--outline{background:transparent;color:var(--fs-neutral-500);border-color:var(--fs-neutral-500)}.fs-badge--neutral .fs-badge__dot{background:var(--fs-neutral-500)}.fs-badge__dot{width:6px;height:6px;border-radius:9999px;flex-shrink:0}.fs-badge__icon{display:inline-flex;align-items:center;flex-shrink:0}.fs-badge__label{display:inline-flex;align-items:center}.fs-badge__remove{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;color:inherit;opacity:.55;border-radius:9999px;transition:opacity .1s cubic-bezier(.4,0,.2,1);margin-left:2px}.fs-badge__remove:hover{opacity:1}.fs-badge__remove:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}\n"] }]
|
|
158
|
+
args: [{ selector: 'fs-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fs-badge\" [ngClass]=\"classes\">\n\n <!-- dot de estado -->\n <span *ngIf=\"dot\" class=\"fs-badge__dot\" aria-hidden=\"true\"></span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label \u2014 oculto en iconOnly -->\n <span *ngIf=\"!iconOnly\" class=\"fs-badge__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- bot\u00F3n remove -->\n <button\n *ngIf=\"removable\"\n class=\"fs-badge__remove\"\n type=\"button\"\n aria-label=\"Remover\"\n (click)=\"onRemove($event)\"\n >\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 2l6 6M8 2L2 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n</span>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;white-space:nowrap;border:1px solid transparent;line-height:1}.fs-badge--sm{font-size:.75rem;padding:.25rem .75rem}.fs-badge--sm .fs-badge__icon svg{width:11px;height:11px}.fs-badge--md{font-size:.875rem;padding:.25rem .75rem}.fs-badge--md .fs-badge__icon svg{width:13px;height:13px}.fs-badge--icon-only{padding:.25rem!important;justify-content:center}.fs-badge--icon-only.fs-badge--sm{width:24px;height:24px}.fs-badge--icon-only.fs-badge--md{width:28px;height:28px}.fs-badge--primary.fs-badge--filled{background:var(--fs-primary-50);color:var(--fs-primary-800);border-color:var(--fs-primary-200)}.fs-badge--primary.fs-badge--outline{background:transparent;color:var(--fs-primary-500);border-color:var(--fs-primary-500)}.fs-badge--primary .fs-badge__dot{background:var(--fs-primary-500)}.fs-badge--secondary.fs-badge--filled{background:var(--fs-secondary-50);color:var(--fs-secondary-800);border-color:var(--fs-secondary-200)}.fs-badge--secondary.fs-badge--outline{background:transparent;color:var(--fs-secondary-500);border-color:var(--fs-secondary-500)}.fs-badge--secondary .fs-badge__dot{background:var(--fs-secondary-500)}.fs-badge--tertiary.fs-badge--filled{background:var(--fs-tertiary-50);color:var(--fs-tertiary-800);border-color:var(--fs-tertiary-200)}.fs-badge--tertiary.fs-badge--outline{background:transparent;color:var(--fs-tertiary-500);border-color:var(--fs-tertiary-500)}.fs-badge--tertiary .fs-badge__dot{background:var(--fs-tertiary-500)}.fs-badge--success.fs-badge--filled{background:var(--fs-success-50);color:var(--fs-success-800);border-color:var(--fs-success-200)}.fs-badge--success.fs-badge--outline{background:transparent;color:var(--fs-success-500);border-color:var(--fs-success-500)}.fs-badge--success .fs-badge__dot{background:var(--fs-success-500)}.fs-badge--warning.fs-badge--filled{background:var(--fs-warning-50);color:var(--fs-warning-800);border-color:var(--fs-warning-200)}.fs-badge--warning.fs-badge--outline{background:transparent;color:var(--fs-warning-500);border-color:var(--fs-warning-500)}.fs-badge--warning .fs-badge__dot{background:var(--fs-warning-500)}.fs-badge--danger.fs-badge--filled{background:var(--fs-danger-50);color:var(--fs-danger-800);border-color:var(--fs-danger-200)}.fs-badge--danger.fs-badge--outline{background:transparent;color:var(--fs-danger-500);border-color:var(--fs-danger-500)}.fs-badge--danger .fs-badge__dot{background:var(--fs-danger-500)}.fs-badge--neutral.fs-badge--filled{background:var(--fs-neutral-50);color:var(--fs-neutral-800);border-color:var(--fs-neutral-200)}.fs-badge--neutral.fs-badge--outline{background:transparent;color:var(--fs-neutral-500);border-color:var(--fs-neutral-500)}.fs-badge--neutral .fs-badge__dot{background:var(--fs-neutral-500)}.fs-badge__dot{width:7px;height:7px;border-radius:9999px;flex-shrink:0}.fs-badge__icon{display:inline-flex;align-items:center;flex-shrink:0}.fs-badge__label{display:inline-flex;align-items:center}.fs-badge__remove{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;color:inherit;opacity:.55;border-radius:9999px;transition:opacity .1s cubic-bezier(.4,0,.2,1);margin-left:2px}.fs-badge__remove:hover{opacity:1}.fs-badge__remove:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}\n"] }]
|
|
84
159
|
}], propDecorators: { color: [{
|
|
85
160
|
type: Input
|
|
86
161
|
}], variant: [{
|
|
@@ -103,6 +178,167 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
103
178
|
type: Output
|
|
104
179
|
}] } });
|
|
105
180
|
|
|
181
|
+
class FsTabsComponent {
|
|
182
|
+
cdr;
|
|
183
|
+
zone;
|
|
184
|
+
/** Lista de tabs a renderizar */
|
|
185
|
+
tabs = [];
|
|
186
|
+
/** Id de la tab activa */
|
|
187
|
+
activeTab = '';
|
|
188
|
+
/** Two-way binding: [(activeTab)] */
|
|
189
|
+
activeTabChange = new EventEmitter();
|
|
190
|
+
/** Emite la tab completa al cambiar */
|
|
191
|
+
tabChange = new EventEmitter();
|
|
192
|
+
tabsRow;
|
|
193
|
+
indicatorLeft = 0;
|
|
194
|
+
indicatorWidth = 0;
|
|
195
|
+
constructor(cdr, zone) {
|
|
196
|
+
this.cdr = cdr;
|
|
197
|
+
this.zone = zone;
|
|
198
|
+
}
|
|
199
|
+
ngAfterViewInit() {
|
|
200
|
+
this.updateIndicator();
|
|
201
|
+
// Recalcular al cambiar el tamaño del contenedor
|
|
202
|
+
this.zone.runOutsideAngular(() => {
|
|
203
|
+
const ro = new ResizeObserver(() => {
|
|
204
|
+
this.zone.run(() => {
|
|
205
|
+
this.updateIndicator();
|
|
206
|
+
this.cdr.markForCheck();
|
|
207
|
+
});
|
|
208
|
+
});
|
|
209
|
+
ro.observe(this.tabsRow.nativeElement);
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
ngOnChanges(changes) {
|
|
213
|
+
if (changes['activeTab'] || changes['tabs']) {
|
|
214
|
+
// Defer para que el DOM se actualice primero
|
|
215
|
+
setTimeout(() => this.updateIndicator());
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
selectTab(tab) {
|
|
219
|
+
if (tab.disabled)
|
|
220
|
+
return;
|
|
221
|
+
this.activeTab = tab.id;
|
|
222
|
+
this.activeTabChange.emit(tab.id);
|
|
223
|
+
this.tabChange.emit(tab);
|
|
224
|
+
this.updateIndicator();
|
|
225
|
+
}
|
|
226
|
+
isActive(tab) {
|
|
227
|
+
return this.activeTab === tab.id;
|
|
228
|
+
}
|
|
229
|
+
updateIndicator() {
|
|
230
|
+
if (!this.tabsRow)
|
|
231
|
+
return;
|
|
232
|
+
const row = this.tabsRow.nativeElement;
|
|
233
|
+
const items = row.querySelectorAll('.fs-tabs__item');
|
|
234
|
+
const idx = this.tabs.findIndex(t => t.id === this.activeTab);
|
|
235
|
+
if (idx === -1 || !items[idx])
|
|
236
|
+
return;
|
|
237
|
+
const item = items[idx];
|
|
238
|
+
this.indicatorLeft = item.offsetLeft;
|
|
239
|
+
this.indicatorWidth = item.offsetWidth;
|
|
240
|
+
this.cdr.markForCheck();
|
|
241
|
+
}
|
|
242
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsTabsComponent, isStandalone: true, selector: "fs-tabs", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabsRow", first: true, predicate: ["tabsRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fs-tabs\">\n\n <!-- encabezado -->\n <div class=\"fs-tabs__header\" #tabsRow role=\"tablist\">\n\n <button\n *ngFor=\"let tab of tabs\"\n class=\"fs-tabs__item\"\n [class.fs-tabs__item--active]=\"isActive(tab)\"\n [class.fs-tabs__item--disabled]=\"tab.disabled\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n {{ tab.label }}\n </button>\n\n <!-- indicator deslizante -->\n <span\n class=\"fs-tabs__indicator\"\n [style.left.px]=\"indicatorLeft\"\n [style.width.px]=\"indicatorWidth\"\n aria-hidden=\"true\"\n ></span>\n\n </div>\n\n <!-- contenido v\u00EDa content projection -->\n <div class=\"fs-tabs__content\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-tabs{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45);--fs-tab-radius: 8px;display:flex;flex-direction:column;width:100%}.fs-tabs__header{display:flex;position:relative;width:100%;background:var(--fs-tab-bg);border-radius:var(--fs-tab-radius) var(--fs-tab-radius) 0 0;border-bottom:1px solid var(--fs-tab-border);overflow:hidden}.fs-tabs__item{flex:1;padding:14px 8px;font-size:.875rem;font-weight:500;color:var(--fs-tab-color);background:transparent;border:none;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;line-height:1}.fs-tabs__item:hover:not(.fs-tabs__item--disabled):not(.fs-tabs__item--active){color:var(--fs-tab-color-hover);background:var(--fs-tab-hover-bg)}.fs-tabs__item--active{color:var(--fs-tab-color-active);font-weight:600}.fs-tabs__item--disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.fs-tabs__item:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-tabs__indicator{position:absolute;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--fs-tab-indicator-from) 0%,var(--fs-tab-indicator-to) 100%);box-shadow:0 0 10px var(--fs-tab-indicator-glow);transition:left .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1)}.fs-tabs__content{flex:1;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
244
|
+
}
|
|
245
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsTabsComponent, decorators: [{
|
|
246
|
+
type: Component,
|
|
247
|
+
args: [{ selector: 'fs-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fs-tabs\">\n\n <!-- encabezado -->\n <div class=\"fs-tabs__header\" #tabsRow role=\"tablist\">\n\n <button\n *ngFor=\"let tab of tabs\"\n class=\"fs-tabs__item\"\n [class.fs-tabs__item--active]=\"isActive(tab)\"\n [class.fs-tabs__item--disabled]=\"tab.disabled\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n {{ tab.label }}\n </button>\n\n <!-- indicator deslizante -->\n <span\n class=\"fs-tabs__indicator\"\n [style.left.px]=\"indicatorLeft\"\n [style.width.px]=\"indicatorWidth\"\n aria-hidden=\"true\"\n ></span>\n\n </div>\n\n <!-- contenido v\u00EDa content projection -->\n <div class=\"fs-tabs__content\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-tabs{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45);--fs-tab-radius: 8px;display:flex;flex-direction:column;width:100%}.fs-tabs__header{display:flex;position:relative;width:100%;background:var(--fs-tab-bg);border-radius:var(--fs-tab-radius) var(--fs-tab-radius) 0 0;border-bottom:1px solid var(--fs-tab-border);overflow:hidden}.fs-tabs__item{flex:1;padding:14px 8px;font-size:.875rem;font-weight:500;color:var(--fs-tab-color);background:transparent;border:none;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;line-height:1}.fs-tabs__item:hover:not(.fs-tabs__item--disabled):not(.fs-tabs__item--active){color:var(--fs-tab-color-hover);background:var(--fs-tab-hover-bg)}.fs-tabs__item--active{color:var(--fs-tab-color-active);font-weight:600}.fs-tabs__item--disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.fs-tabs__item:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-tabs__indicator{position:absolute;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--fs-tab-indicator-from) 0%,var(--fs-tab-indicator-to) 100%);box-shadow:0 0 10px var(--fs-tab-indicator-glow);transition:left .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1)}.fs-tabs__content{flex:1;width:100%}\n"] }]
|
|
248
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { tabs: [{
|
|
249
|
+
type: Input
|
|
250
|
+
}], activeTab: [{
|
|
251
|
+
type: Input
|
|
252
|
+
}], activeTabChange: [{
|
|
253
|
+
type: Output
|
|
254
|
+
}], tabChange: [{
|
|
255
|
+
type: Output
|
|
256
|
+
}], tabsRow: [{
|
|
257
|
+
type: ViewChild,
|
|
258
|
+
args: ['tabsRow']
|
|
259
|
+
}] } });
|
|
260
|
+
|
|
261
|
+
class FsAlertComponent {
|
|
262
|
+
cdr;
|
|
263
|
+
/** Tipo semántico del alert */
|
|
264
|
+
type = 'info';
|
|
265
|
+
/** filled = fondo sutil · accent = borde izquierdo */
|
|
266
|
+
variant = 'filled';
|
|
267
|
+
/** Título opcional en negrita */
|
|
268
|
+
title;
|
|
269
|
+
/** Muestra botón X para cerrar */
|
|
270
|
+
dismissible = false;
|
|
271
|
+
/**
|
|
272
|
+
* Auto-cierre en milisegundos.
|
|
273
|
+
* 0 = deshabilitado.
|
|
274
|
+
* Muestra progress bar cuando está activo.
|
|
275
|
+
*/
|
|
276
|
+
autoDismiss = 0;
|
|
277
|
+
/** Emite cuando el alert se cierra (botón X o auto-dismiss) */
|
|
278
|
+
dismissed = new EventEmitter();
|
|
279
|
+
// Estado interno de animación
|
|
280
|
+
animState = 'entering';
|
|
281
|
+
autoTimer;
|
|
282
|
+
constructor(cdr) {
|
|
283
|
+
this.cdr = cdr;
|
|
284
|
+
}
|
|
285
|
+
ngOnInit() {
|
|
286
|
+
// tras la animación de entrada → visible
|
|
287
|
+
setTimeout(() => {
|
|
288
|
+
this.animState = 'visible';
|
|
289
|
+
this.cdr.markForCheck();
|
|
290
|
+
}, 300);
|
|
291
|
+
if (this.autoDismiss > 0) {
|
|
292
|
+
this.autoTimer = setTimeout(() => this.dismiss(), this.autoDismiss);
|
|
293
|
+
}
|
|
294
|
+
}
|
|
295
|
+
ngOnDestroy() {
|
|
296
|
+
if (this.autoTimer)
|
|
297
|
+
clearTimeout(this.autoTimer);
|
|
298
|
+
}
|
|
299
|
+
dismiss() {
|
|
300
|
+
if (this.animState === 'exiting')
|
|
301
|
+
return;
|
|
302
|
+
this.animState = 'exiting';
|
|
303
|
+
this.cdr.markForCheck();
|
|
304
|
+
// esperar la animación de salida antes de emitir
|
|
305
|
+
setTimeout(() => {
|
|
306
|
+
this.dismissed.emit();
|
|
307
|
+
}, 240);
|
|
308
|
+
}
|
|
309
|
+
get progressDuration() {
|
|
310
|
+
return `${this.autoDismiss}ms`;
|
|
311
|
+
}
|
|
312
|
+
get iconPath() {
|
|
313
|
+
const icons = {
|
|
314
|
+
info: 'M8 7v4M8 5.5v.01M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8z',
|
|
315
|
+
success: 'M5 8l2 2 4-4M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8z',
|
|
316
|
+
warning: 'M8 2L2 13h12L8 2zM8 7v3M8 11.5v.01',
|
|
317
|
+
danger: 'M8 5v4M8 10.5v.01M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8z',
|
|
318
|
+
neutral: 'M8 7v4M8 5.5v.01M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8z',
|
|
319
|
+
};
|
|
320
|
+
return icons[this.type];
|
|
321
|
+
}
|
|
322
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsAlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
323
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsAlertComponent, isStandalone: true, selector: "fs-alert", inputs: { type: "type", variant: "variant", title: "title", dismissible: "dismissible", autoDismiss: "autoDismiss" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"animState !== 'exiting' || true\"\n class=\"fs-alert\"\n [class.fs-alert--entering]=\"animState === 'entering'\"\n [class.fs-alert--visible]=\"animState === 'visible'\"\n [class.fs-alert--exiting]=\"animState === 'exiting'\"\n [class]=\"'fs-alert fs-alert--' + type + ' fs-alert--' + variant\"\n [attr.role]=\"type === 'danger' ? 'alert' : 'status'\"\n [attr.aria-live]=\"type === 'danger' ? 'assertive' : 'polite'\"\n>\n\n <!-- \u00EDcono sem\u00E1ntico -->\n <svg\n class=\"fs-alert__icon\"\n width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n [attr.d]=\"iconPath\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- cuerpo -->\n <div class=\"fs-alert__body\">\n <div *ngIf=\"title\" class=\"fs-alert__title\">{{ title }}</div>\n <div class=\"fs-alert__desc\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- bot\u00F3n cerrar -->\n <button\n *ngIf=\"dismissible\"\n class=\"fs-alert__close\"\n type=\"button\"\n aria-label=\"Cerrar\"\n (click)=\"dismiss()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M3 3l8 8M11 3L3 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n\n <!-- progress bar de auto-dismiss -->\n <div\n *ngIf=\"autoDismiss > 0\"\n class=\"fs-alert__progress\"\n [style.animation-duration]=\"progressDuration\"\n ></div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}@keyframes fs-alert-in{0%{opacity:0;transform:translateY(-10px);max-height:0;padding:0 1rem}to{opacity:1;transform:translateY(0);max-height:300px}}@keyframes fs-alert-out{0%{opacity:1;transform:translateY(0);max-height:300px;margin-bottom:0}to{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}}@keyframes fs-alert-progress{0%{width:100%}to{width:0%}}.fs-alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:8px;padding:.75rem 1rem;border:.5px solid transparent;position:relative;overflow:hidden;width:100%}.fs-alert--entering{animation:fs-alert-in .28s cubic-bezier(.4,0,.2,1) forwards}.fs-alert--visible{opacity:1;transform:translateY(0)}.fs-alert--exiting{animation:fs-alert-out .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.fs-alert--info.fs-alert--filled{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd}.fs-alert--info.fs-alert--filled .fs-alert__progress{background:#2563eb}.fs-alert--info.fs-alert--accent{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd;border-left:3px solid #2563eb;border-radius:0 8px 8px 0}.fs-alert--info.fs-alert--accent .fs-alert__progress{background:#2563eb}.fs-alert--success.fs-alert--filled{background:#22c55e1a;border-color:#22c55e4d;color:#86efac}.fs-alert--success.fs-alert--filled .fs-alert__progress{background:#22c55e}.fs-alert--success.fs-alert--accent{background:#22c55e1a;border-color:#22c55e4d;color:#86efac;border-left:3px solid #22c55e;border-radius:0 8px 8px 0}.fs-alert--success.fs-alert--accent .fs-alert__progress{background:#22c55e}.fs-alert--warning.fs-alert--filled{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d}.fs-alert--warning.fs-alert--filled .fs-alert__progress{background:#f59e0b}.fs-alert--warning.fs-alert--accent{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d;border-left:3px solid #f59e0b;border-radius:0 8px 8px 0}.fs-alert--warning.fs-alert--accent .fs-alert__progress{background:#f59e0b}.fs-alert--danger.fs-alert--filled{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185}.fs-alert--danger.fs-alert--filled .fs-alert__progress{background:#f43f5e}.fs-alert--danger.fs-alert--accent{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185;border-left:3px solid #f43f5e;border-radius:0 8px 8px 0}.fs-alert--danger.fs-alert--accent .fs-alert__progress{background:#f43f5e}.fs-alert--neutral.fs-alert--filled{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3}.fs-alert--neutral.fs-alert--filled .fs-alert__progress{background:#ffffff4d}.fs-alert--neutral.fs-alert--accent{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3;border-left:3px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0}.fs-alert--neutral.fs-alert--accent .fs-alert__progress{background:#ffffff4d}.fs-alert__icon{flex-shrink:0;margin-top:1px;stroke:currentColor}.fs-alert__body{flex:1;min-width:0}.fs-alert__title{font-size:.875rem;font-weight:600;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px;line-height:1.4}.fs-alert__desc{font-size:.75rem;font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1.6;opacity:.85}.fs-alert__desc code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:11px;background:#ffffff14;padding:1px 5px;border-radius:4px}.fs-alert__close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0;flex-shrink:0;border-radius:4px;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-alert__close:hover{opacity:1}.fs-alert__close:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}.fs-alert__progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 8px;animation:fs-alert-progress linear forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
324
|
+
}
|
|
325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsAlertComponent, decorators: [{
|
|
326
|
+
type: Component,
|
|
327
|
+
args: [{ selector: 'fs-alert', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"animState !== 'exiting' || true\"\n class=\"fs-alert\"\n [class.fs-alert--entering]=\"animState === 'entering'\"\n [class.fs-alert--visible]=\"animState === 'visible'\"\n [class.fs-alert--exiting]=\"animState === 'exiting'\"\n [class]=\"'fs-alert fs-alert--' + type + ' fs-alert--' + variant\"\n [attr.role]=\"type === 'danger' ? 'alert' : 'status'\"\n [attr.aria-live]=\"type === 'danger' ? 'assertive' : 'polite'\"\n>\n\n <!-- \u00EDcono sem\u00E1ntico -->\n <svg\n class=\"fs-alert__icon\"\n width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n [attr.d]=\"iconPath\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- cuerpo -->\n <div class=\"fs-alert__body\">\n <div *ngIf=\"title\" class=\"fs-alert__title\">{{ title }}</div>\n <div class=\"fs-alert__desc\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- bot\u00F3n cerrar -->\n <button\n *ngIf=\"dismissible\"\n class=\"fs-alert__close\"\n type=\"button\"\n aria-label=\"Cerrar\"\n (click)=\"dismiss()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M3 3l8 8M11 3L3 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n\n <!-- progress bar de auto-dismiss -->\n <div\n *ngIf=\"autoDismiss > 0\"\n class=\"fs-alert__progress\"\n [style.animation-duration]=\"progressDuration\"\n ></div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}@keyframes fs-alert-in{0%{opacity:0;transform:translateY(-10px);max-height:0;padding:0 1rem}to{opacity:1;transform:translateY(0);max-height:300px}}@keyframes fs-alert-out{0%{opacity:1;transform:translateY(0);max-height:300px;margin-bottom:0}to{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}}@keyframes fs-alert-progress{0%{width:100%}to{width:0%}}.fs-alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:8px;padding:.75rem 1rem;border:.5px solid transparent;position:relative;overflow:hidden;width:100%}.fs-alert--entering{animation:fs-alert-in .28s cubic-bezier(.4,0,.2,1) forwards}.fs-alert--visible{opacity:1;transform:translateY(0)}.fs-alert--exiting{animation:fs-alert-out .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.fs-alert--info.fs-alert--filled{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd}.fs-alert--info.fs-alert--filled .fs-alert__progress{background:#2563eb}.fs-alert--info.fs-alert--accent{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd;border-left:3px solid #2563eb;border-radius:0 8px 8px 0}.fs-alert--info.fs-alert--accent .fs-alert__progress{background:#2563eb}.fs-alert--success.fs-alert--filled{background:#22c55e1a;border-color:#22c55e4d;color:#86efac}.fs-alert--success.fs-alert--filled .fs-alert__progress{background:#22c55e}.fs-alert--success.fs-alert--accent{background:#22c55e1a;border-color:#22c55e4d;color:#86efac;border-left:3px solid #22c55e;border-radius:0 8px 8px 0}.fs-alert--success.fs-alert--accent .fs-alert__progress{background:#22c55e}.fs-alert--warning.fs-alert--filled{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d}.fs-alert--warning.fs-alert--filled .fs-alert__progress{background:#f59e0b}.fs-alert--warning.fs-alert--accent{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d;border-left:3px solid #f59e0b;border-radius:0 8px 8px 0}.fs-alert--warning.fs-alert--accent .fs-alert__progress{background:#f59e0b}.fs-alert--danger.fs-alert--filled{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185}.fs-alert--danger.fs-alert--filled .fs-alert__progress{background:#f43f5e}.fs-alert--danger.fs-alert--accent{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185;border-left:3px solid #f43f5e;border-radius:0 8px 8px 0}.fs-alert--danger.fs-alert--accent .fs-alert__progress{background:#f43f5e}.fs-alert--neutral.fs-alert--filled{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3}.fs-alert--neutral.fs-alert--filled .fs-alert__progress{background:#ffffff4d}.fs-alert--neutral.fs-alert--accent{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3;border-left:3px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0}.fs-alert--neutral.fs-alert--accent .fs-alert__progress{background:#ffffff4d}.fs-alert__icon{flex-shrink:0;margin-top:1px;stroke:currentColor}.fs-alert__body{flex:1;min-width:0}.fs-alert__title{font-size:.875rem;font-weight:600;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px;line-height:1.4}.fs-alert__desc{font-size:.75rem;font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1.6;opacity:.85}.fs-alert__desc code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:11px;background:#ffffff14;padding:1px 5px;border-radius:4px}.fs-alert__close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0;flex-shrink:0;border-radius:4px;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-alert__close:hover{opacity:1}.fs-alert__close:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}.fs-alert__progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 8px;animation:fs-alert-progress linear forwards}\n"] }]
|
|
328
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
|
|
329
|
+
type: Input
|
|
330
|
+
}], variant: [{
|
|
331
|
+
type: Input
|
|
332
|
+
}], title: [{
|
|
333
|
+
type: Input
|
|
334
|
+
}], dismissible: [{
|
|
335
|
+
type: Input
|
|
336
|
+
}], autoDismiss: [{
|
|
337
|
+
type: Input
|
|
338
|
+
}], dismissed: [{
|
|
339
|
+
type: Output
|
|
340
|
+
}] } });
|
|
341
|
+
|
|
106
342
|
class FsExperienceCardComponent {
|
|
107
343
|
/** Datos de la experiencia */
|
|
108
344
|
experience;
|
|
@@ -180,11 +416,11 @@ class FsExperienceCardComponent {
|
|
|
180
416
|
return isNaN(d.getTime()) ? null : d;
|
|
181
417
|
}
|
|
182
418
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsExperienceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
183
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsExperienceCardComponent, isStandalone: true, selector: "fs-experience-card", inputs: { experience: "experience", variant: "variant", timeline: "timeline", timelineLast: "timelineLast" }, ngImport: i0, template: "<div\n class=\"fs-exp\"\n [class.fs-exp--compact]=\"variant === 'compact'\"\n [class.fs-exp--timeline]=\"timeline\"\n [class.fs-exp--timeline-last]=\"timeline && timelineLast\"\n>\n\n <!-- l\u00EDnea vertical de timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-line\"></div>\n\n <!-- dot del timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-dot\"\n [class.fs-exp__timeline-dot--current]=\"isCurrent\">\n </div>\n\n <!-- card -->\n <div class=\"fs-exp__card\">\n\n <!-- header -->\n <div class=\"fs-exp__header\">\n\n <!-- logo -->\n <div class=\"fs-exp__logo\">\n <img\n *ngIf=\"experience.logoUrl\"\n [src]=\"experience.logoUrl\"\n [alt]=\"experience.company\"\n class=\"fs-exp__logo-img\"\n />\n <span *ngIf=\"!experience.logoUrl\" class=\"fs-exp__logo-text\">\n {{ experience.logoText || experience.company.slice(0, 4).toUpperCase() }}\n </span>\n </div>\n\n <!-- info -->\n <div class=\"fs-exp__info\">\n <div class=\"fs-exp__company\">{{ experience.company }}</div>\n <div class=\"fs-exp__role\">{{ experience.role }}</div>\n <div class=\"fs-exp__date\">\n <span\n class=\"fs-exp__dot\"\n [class.fs-exp__dot--current]=\"isCurrent\"\n ></span>\n <span>\n {{ experience.startDate }} \u2013\n {{ experience.current ? 'actualidad' : experience.endDate }}\n </span>\n <span *ngIf=\"duration\" class=\"fs-exp__duration\">\n \u00B7 {{ duration }}\n </span>\n </div>\n </div>\n\n </div>\n\n <!-- cuerpo \u2014 solo en variante full -->\n <ng-container *ngIf=\"variant === 'full'\">\n\n <div *ngIf=\"hasBullets || experience.badges?.length\" class=\"fs-exp__divider\"></div>\n\n <!-- bullets -->\n <ul *ngIf=\"hasBullets\" class=\"fs-exp__bullets\">\n <li *ngFor=\"let bullet of visibleBullets\" class=\"fs-exp__bullet\">\n <span class=\"fs-exp__bullet-arrow\" aria-hidden=\"true\">\u25B8</span>\n <span>{{ bullet }}</span>\n </li>\n </ul>\n\n <!-- toggle ver m\u00E1s / menos -->\n <button\n *ngIf=\"hasMoreBullets\"\n class=\"fs-exp__toggle\"\n type=\"button\"\n (click)=\"toggleExpand()\"\n >\n <svg\n class=\"fs-exp__toggle-icon\"\n [class.fs-exp__toggle-icon--open]=\"expanded\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n >\n <path d=\"M3 4.5l3 3 3-3\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n {{ expanded ? 'ver menos' : 'ver m\u00E1s' }}\n </button>\n\n <!-- badges -->\n <div *ngIf=\"experience.badges?.length\" class=\"fs-exp__badges\">\n <fs-badge\n *ngFor=\"let badge of experience.badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </ng-container>\n\n </div>\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-exp{--fs-exp-bg: #0d1117;--fs-exp-border: rgba(255, 255, 255, .08);--fs-exp-company: rgba(255, 255, 255, .45);--fs-exp-role: #ffffff;--fs-exp-date: rgba(255, 255, 255, .35);--fs-exp-duration: rgba(255, 255, 255, .2);--fs-exp-bullet: rgba(255, 255, 255, .5);--fs-exp-bullet-arrow: var(--fs-primary-base);--fs-exp-divider: rgba(255, 255, 255, .06);--fs-exp-logo-bg: #161b22;--fs-exp-logo-border: rgba(255, 255, 255, .1);--fs-exp-logo-text: rgba(255, 255, 255, .45);--fs-exp-toggle: var(--fs-primary-base);--fs-exp-dot-current: var(--fs-success-base);--fs-exp-dot-past: rgba(255, 255, 255, .2);position:relative;width:100%;display:flex;gap:16px}.fs-exp--timeline{padding-left:28px}.fs-exp__timeline-line{position:absolute;left:8px;top:20px;bottom:-16px;width:1px;background:var(--fs-exp-border)}.fs-exp--timeline-last .fs-exp__timeline-line{display:none}.fs-exp__timeline-dot{position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:9999px;background:var(--fs-exp-dot-past);border:2px solid var(--fs-exp-bg);flex-shrink:0}.fs-exp__timeline-dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 6px #22c55e80}.fs-exp__card{flex:1;background:var(--fs-exp-bg);border:.5px solid var(--fs-exp-border);border-radius:12px;padding:1.25rem;transition:border-color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__card:hover{border-color:#ffffff24}.fs-exp__header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem}.fs-exp--compact .fs-exp__header{margin-bottom:0}.fs-exp__logo{width:44px;height:44px;border-radius:8px;background:var(--fs-exp-logo-bg);border:.5px solid var(--fs-exp-logo-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.fs-exp__logo-img{width:100%;height:100%;object-fit:contain;padding:4px}.fs-exp__logo-text{font-size:9px;font-weight:700;color:var(--fs-exp-logo-text);letter-spacing:-.5px;text-align:center;line-height:1.2;padding:4px;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__info{flex:1;min-width:0}.fs-exp__company{font-size:.75rem;color:var(--fs-exp-company);margin-bottom:2px;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__role{font-size:1rem;font-weight:600;color:var(--fs-exp-role);margin-bottom:.25rem;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-exp__date{font-size:.75rem;color:var(--fs-exp-date);display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__dot{width:6px;height:6px;border-radius:9999px;background:var(--fs-exp-dot-past);flex-shrink:0}.fs-exp__dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 4px #22c55e99}.fs-exp__duration{color:var(--fs-exp-duration)}.fs-exp__divider{height:.5px;background:var(--fs-exp-divider);margin-bottom:1rem}.fs-exp__bullets{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem;padding:0}.fs-exp__bullet{font-size:.75rem;color:var(--fs-exp-bullet);display:flex;gap:.5rem;line-height:1.6;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__bullet-arrow{color:var(--fs-exp-bullet-arrow);flex-shrink:0;margin-top:1px;font-size:10px}.fs-exp__toggle{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;color:var(--fs-exp-toggle);background:transparent;border:none;cursor:pointer;padding:0;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.75rem;transition:color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__toggle:hover{color:var(--fs-primary-hover)}.fs-exp__toggle:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-exp__toggle-icon{transition:transform .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.fs-exp__toggle-icon--open{transform:rotate(180deg)}.fs-exp__badges{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsBadgeComponent, selector: "fs-badge", inputs: ["color", "variant", "size", "label", "dot", "iconLeft", "iconRight", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsExperienceCardComponent, isStandalone: true, selector: "fs-experience-card", inputs: { experience: "experience", variant: "variant", timeline: "timeline", timelineLast: "timelineLast" }, ngImport: i0, template: "<div\n class=\"fs-exp\"\n [class.fs-exp--compact]=\"variant === 'compact'\"\n [class.fs-exp--timeline]=\"timeline\"\n [class.fs-exp--timeline-last]=\"timeline && timelineLast\"\n>\n\n <!-- l\u00EDnea vertical de timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-line\"></div>\n\n <!-- dot del timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-dot\"\n [class.fs-exp__timeline-dot--current]=\"isCurrent\">\n </div>\n\n <!-- card -->\n <div class=\"fs-exp__card\">\n\n <!-- header -->\n <div class=\"fs-exp__header\">\n\n <!-- logo -->\n <div class=\"fs-exp__logo\">\n <img\n *ngIf=\"experience.logoUrl\"\n [src]=\"experience.logoUrl\"\n [alt]=\"experience.company\"\n class=\"fs-exp__logo-img\"\n />\n <span *ngIf=\"!experience.logoUrl\" class=\"fs-exp__logo-text\">\n {{ experience.logoText || experience.company.slice(0, 4).toUpperCase() }}\n </span>\n </div>\n\n <!-- info -->\n <div class=\"fs-exp__info\">\n <div class=\"fs-exp__company\">{{ experience.company }}</div>\n <div class=\"fs-exp__role\">{{ experience.role }}</div>\n <div class=\"fs-exp__date\">\n <span\n class=\"fs-exp__dot\"\n [class.fs-exp__dot--current]=\"isCurrent\"\n ></span>\n <span>\n {{ experience.startDate }} \u2013\n {{ experience.current ? 'actualidad' : experience.endDate }}\n </span>\n <span *ngIf=\"duration\" class=\"fs-exp__duration\">\n \u00B7 {{ duration }}\n </span>\n </div>\n </div>\n\n </div>\n\n <!-- cuerpo \u2014 solo en variante full -->\n <ng-container *ngIf=\"variant === 'full'\">\n\n <div *ngIf=\"hasBullets || experience.badges?.length\" class=\"fs-exp__divider\"></div>\n\n <!-- bullets -->\n <ul *ngIf=\"hasBullets\" class=\"fs-exp__bullets\">\n <li *ngFor=\"let bullet of visibleBullets\" class=\"fs-exp__bullet\">\n <span class=\"fs-exp__bullet-arrow\" aria-hidden=\"true\">\u25B8</span>\n <span>{{ bullet }}</span>\n </li>\n </ul>\n\n <!-- toggle ver m\u00E1s / menos -->\n <button\n *ngIf=\"hasMoreBullets\"\n class=\"fs-exp__toggle\"\n type=\"button\"\n (click)=\"toggleExpand()\"\n >\n <svg\n class=\"fs-exp__toggle-icon\"\n [class.fs-exp__toggle-icon--open]=\"expanded\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n >\n <path d=\"M3 4.5l3 3 3-3\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n {{ expanded ? 'ver menos' : 'ver m\u00E1s' }}\n </button>\n\n <!-- badges -->\n <div *ngIf=\"experience.badges?.length\" class=\"fs-exp__badges\">\n <fs-badge\n *ngFor=\"let badge of experience.badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </ng-container>\n\n </div>\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-exp{--fs-exp-bg: #0d1117;--fs-exp-border: rgba(255, 255, 255, .08);--fs-exp-company: rgba(255, 255, 255, .45);--fs-exp-role: #ffffff;--fs-exp-date: rgba(255, 255, 255, .35);--fs-exp-duration: rgba(255, 255, 255, .2);--fs-exp-bullet: rgba(255, 255, 255, .6);--fs-exp-bullet-arrow: var(--fs-primary-base);--fs-exp-divider: rgba(255, 255, 255, .06);--fs-exp-logo-bg: #161b22;--fs-exp-logo-border: rgba(255, 255, 255, .1);--fs-exp-logo-text: rgba(255, 255, 255, .45);--fs-exp-toggle: var(--fs-primary-base);--fs-exp-dot-current: var(--fs-success-base);--fs-exp-dot-past: rgba(255, 255, 255, .2);--fs-exp-radius: 12px;position:relative;width:100%;display:flex;gap:16px}.fs-exp--timeline{padding-left:28px}.fs-exp__timeline-line{position:absolute;left:8px;top:20px;bottom:-16px;width:1px;background:var(--fs-exp-border)}.fs-exp--timeline-last .fs-exp__timeline-line{display:none}.fs-exp__timeline-dot{position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:9999px;background:var(--fs-exp-dot-past);border:2px solid var(--fs-exp-bg);flex-shrink:0}.fs-exp__timeline-dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 6px #22c55e80}.fs-exp__card{flex:1;background:var(--fs-exp-bg);border:.5px solid var(--fs-exp-border);border-radius:var(--fs-exp-radius);padding:1.5rem;transition:border-color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__card:hover{border-color:#ffffff24}.fs-exp__header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}.fs-exp--compact .fs-exp__header{margin-bottom:0}.fs-exp__logo{width:52px;height:52px;border-radius:8px;background:var(--fs-exp-logo-bg);border:.5px solid var(--fs-exp-logo-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.fs-exp__logo-img{width:100%;height:100%;object-fit:contain;padding:4px}.fs-exp__logo-text{font-size:10px;font-weight:700;color:var(--fs-exp-logo-text);letter-spacing:-.5px;text-align:center;line-height:1.2;padding:4px;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__info{flex:1;min-width:0}.fs-exp__company{font-size:.875rem;color:var(--fs-exp-company);margin-bottom:.25rem;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__role{font-size:1.125rem;font-weight:600;color:var(--fs-exp-role);margin-bottom:.5rem;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-exp__date{font-size:.875rem;color:var(--fs-exp-date);display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__dot{width:7px;height:7px;border-radius:9999px;background:var(--fs-exp-dot-past);flex-shrink:0}.fs-exp__dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 4px #22c55e99}.fs-exp__duration{color:var(--fs-exp-duration)}.fs-exp__divider{height:.5px;background:var(--fs-exp-divider);margin-bottom:1rem}.fs-exp__bullets{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;padding:0}.fs-exp__bullet{font-size:.875rem;color:var(--fs-exp-bullet);display:flex;gap:.5rem;line-height:1.6;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__bullet-arrow{color:var(--fs-exp-bullet-arrow);flex-shrink:0;margin-top:2px;font-size:11px}.fs-exp__toggle{display:inline-flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:500;color:var(--fs-exp-toggle);background:transparent;border:none;cursor:pointer;padding:0;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:1rem;transition:color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__toggle:hover{color:var(--fs-primary-hover)}.fs-exp__toggle:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-exp__toggle-icon{transition:transform .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.fs-exp__toggle-icon--open{transform:rotate(180deg)}.fs-exp__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsBadgeComponent, selector: "fs-badge", inputs: ["color", "variant", "size", "label", "dot", "iconLeft", "iconRight", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
184
420
|
}
|
|
185
421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsExperienceCardComponent, decorators: [{
|
|
186
422
|
type: Component,
|
|
187
|
-
args: [{ selector: 'fs-experience-card', standalone: true, imports: [CommonModule, FsBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fs-exp\"\n [class.fs-exp--compact]=\"variant === 'compact'\"\n [class.fs-exp--timeline]=\"timeline\"\n [class.fs-exp--timeline-last]=\"timeline && timelineLast\"\n>\n\n <!-- l\u00EDnea vertical de timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-line\"></div>\n\n <!-- dot del timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-dot\"\n [class.fs-exp__timeline-dot--current]=\"isCurrent\">\n </div>\n\n <!-- card -->\n <div class=\"fs-exp__card\">\n\n <!-- header -->\n <div class=\"fs-exp__header\">\n\n <!-- logo -->\n <div class=\"fs-exp__logo\">\n <img\n *ngIf=\"experience.logoUrl\"\n [src]=\"experience.logoUrl\"\n [alt]=\"experience.company\"\n class=\"fs-exp__logo-img\"\n />\n <span *ngIf=\"!experience.logoUrl\" class=\"fs-exp__logo-text\">\n {{ experience.logoText || experience.company.slice(0, 4).toUpperCase() }}\n </span>\n </div>\n\n <!-- info -->\n <div class=\"fs-exp__info\">\n <div class=\"fs-exp__company\">{{ experience.company }}</div>\n <div class=\"fs-exp__role\">{{ experience.role }}</div>\n <div class=\"fs-exp__date\">\n <span\n class=\"fs-exp__dot\"\n [class.fs-exp__dot--current]=\"isCurrent\"\n ></span>\n <span>\n {{ experience.startDate }} \u2013\n {{ experience.current ? 'actualidad' : experience.endDate }}\n </span>\n <span *ngIf=\"duration\" class=\"fs-exp__duration\">\n \u00B7 {{ duration }}\n </span>\n </div>\n </div>\n\n </div>\n\n <!-- cuerpo \u2014 solo en variante full -->\n <ng-container *ngIf=\"variant === 'full'\">\n\n <div *ngIf=\"hasBullets || experience.badges?.length\" class=\"fs-exp__divider\"></div>\n\n <!-- bullets -->\n <ul *ngIf=\"hasBullets\" class=\"fs-exp__bullets\">\n <li *ngFor=\"let bullet of visibleBullets\" class=\"fs-exp__bullet\">\n <span class=\"fs-exp__bullet-arrow\" aria-hidden=\"true\">\u25B8</span>\n <span>{{ bullet }}</span>\n </li>\n </ul>\n\n <!-- toggle ver m\u00E1s / menos -->\n <button\n *ngIf=\"hasMoreBullets\"\n class=\"fs-exp__toggle\"\n type=\"button\"\n (click)=\"toggleExpand()\"\n >\n <svg\n class=\"fs-exp__toggle-icon\"\n [class.fs-exp__toggle-icon--open]=\"expanded\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n >\n <path d=\"M3 4.5l3 3 3-3\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n {{ expanded ? 'ver menos' : 'ver m\u00E1s' }}\n </button>\n\n <!-- badges -->\n <div *ngIf=\"experience.badges?.length\" class=\"fs-exp__badges\">\n <fs-badge\n *ngFor=\"let badge of experience.badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </ng-container>\n\n </div>\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-exp{--fs-exp-bg: #0d1117;--fs-exp-border: rgba(255, 255, 255, .08);--fs-exp-company: rgba(255, 255, 255, .45);--fs-exp-role: #ffffff;--fs-exp-date: rgba(255, 255, 255, .35);--fs-exp-duration: rgba(255, 255, 255, .2);--fs-exp-bullet: rgba(255, 255, 255, .5);--fs-exp-bullet-arrow: var(--fs-primary-base);--fs-exp-divider: rgba(255, 255, 255, .06);--fs-exp-logo-bg: #161b22;--fs-exp-logo-border: rgba(255, 255, 255, .1);--fs-exp-logo-text: rgba(255, 255, 255, .45);--fs-exp-toggle: var(--fs-primary-base);--fs-exp-dot-current: var(--fs-success-base);--fs-exp-dot-past: rgba(255, 255, 255, .2);position:relative;width:100%;display:flex;gap:16px}.fs-exp--timeline{padding-left:28px}.fs-exp__timeline-line{position:absolute;left:8px;top:20px;bottom:-16px;width:1px;background:var(--fs-exp-border)}.fs-exp--timeline-last .fs-exp__timeline-line{display:none}.fs-exp__timeline-dot{position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:9999px;background:var(--fs-exp-dot-past);border:2px solid var(--fs-exp-bg);flex-shrink:0}.fs-exp__timeline-dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 6px #22c55e80}.fs-exp__card{flex:1;background:var(--fs-exp-bg);border:.5px solid var(--fs-exp-border);border-radius:12px;padding:1.25rem;transition:border-color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__card:hover{border-color:#ffffff24}.fs-exp__header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem}.fs-exp--compact .fs-exp__header{margin-bottom:0}.fs-exp__logo{width:44px;height:44px;border-radius:8px;background:var(--fs-exp-logo-bg);border:.5px solid var(--fs-exp-logo-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.fs-exp__logo-img{width:100%;height:100%;object-fit:contain;padding:4px}.fs-exp__logo-text{font-size:9px;font-weight:700;color:var(--fs-exp-logo-text);letter-spacing:-.5px;text-align:center;line-height:1.2;padding:4px;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__info{flex:1;min-width:0}.fs-exp__company{font-size:.75rem;color:var(--fs-exp-company);margin-bottom:2px;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__role{font-size:1rem;font-weight:600;color:var(--fs-exp-role);margin-bottom:.25rem;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-exp__date{font-size:.75rem;color:var(--fs-exp-date);display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__dot{width:6px;height:6px;border-radius:9999px;background:var(--fs-exp-dot-past);flex-shrink:0}.fs-exp__dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 4px #22c55e99}.fs-exp__duration{color:var(--fs-exp-duration)}.fs-exp__divider{height:.5px;background:var(--fs-exp-divider);margin-bottom:1rem}.fs-exp__bullets{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem;padding:0}.fs-exp__bullet{font-size:.75rem;color:var(--fs-exp-bullet);display:flex;gap:.5rem;line-height:1.6;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__bullet-arrow{color:var(--fs-exp-bullet-arrow);flex-shrink:0;margin-top:1px;font-size:10px}.fs-exp__toggle{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;color:var(--fs-exp-toggle);background:transparent;border:none;cursor:pointer;padding:0;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.75rem;transition:color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__toggle:hover{color:var(--fs-primary-hover)}.fs-exp__toggle:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-exp__toggle-icon{transition:transform .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.fs-exp__toggle-icon--open{transform:rotate(180deg)}.fs-exp__badges{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}\n"] }]
|
|
423
|
+
args: [{ selector: 'fs-experience-card', standalone: true, imports: [CommonModule, FsBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fs-exp\"\n [class.fs-exp--compact]=\"variant === 'compact'\"\n [class.fs-exp--timeline]=\"timeline\"\n [class.fs-exp--timeline-last]=\"timeline && timelineLast\"\n>\n\n <!-- l\u00EDnea vertical de timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-line\"></div>\n\n <!-- dot del timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-dot\"\n [class.fs-exp__timeline-dot--current]=\"isCurrent\">\n </div>\n\n <!-- card -->\n <div class=\"fs-exp__card\">\n\n <!-- header -->\n <div class=\"fs-exp__header\">\n\n <!-- logo -->\n <div class=\"fs-exp__logo\">\n <img\n *ngIf=\"experience.logoUrl\"\n [src]=\"experience.logoUrl\"\n [alt]=\"experience.company\"\n class=\"fs-exp__logo-img\"\n />\n <span *ngIf=\"!experience.logoUrl\" class=\"fs-exp__logo-text\">\n {{ experience.logoText || experience.company.slice(0, 4).toUpperCase() }}\n </span>\n </div>\n\n <!-- info -->\n <div class=\"fs-exp__info\">\n <div class=\"fs-exp__company\">{{ experience.company }}</div>\n <div class=\"fs-exp__role\">{{ experience.role }}</div>\n <div class=\"fs-exp__date\">\n <span\n class=\"fs-exp__dot\"\n [class.fs-exp__dot--current]=\"isCurrent\"\n ></span>\n <span>\n {{ experience.startDate }} \u2013\n {{ experience.current ? 'actualidad' : experience.endDate }}\n </span>\n <span *ngIf=\"duration\" class=\"fs-exp__duration\">\n \u00B7 {{ duration }}\n </span>\n </div>\n </div>\n\n </div>\n\n <!-- cuerpo \u2014 solo en variante full -->\n <ng-container *ngIf=\"variant === 'full'\">\n\n <div *ngIf=\"hasBullets || experience.badges?.length\" class=\"fs-exp__divider\"></div>\n\n <!-- bullets -->\n <ul *ngIf=\"hasBullets\" class=\"fs-exp__bullets\">\n <li *ngFor=\"let bullet of visibleBullets\" class=\"fs-exp__bullet\">\n <span class=\"fs-exp__bullet-arrow\" aria-hidden=\"true\">\u25B8</span>\n <span>{{ bullet }}</span>\n </li>\n </ul>\n\n <!-- toggle ver m\u00E1s / menos -->\n <button\n *ngIf=\"hasMoreBullets\"\n class=\"fs-exp__toggle\"\n type=\"button\"\n (click)=\"toggleExpand()\"\n >\n <svg\n class=\"fs-exp__toggle-icon\"\n [class.fs-exp__toggle-icon--open]=\"expanded\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n >\n <path d=\"M3 4.5l3 3 3-3\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n {{ expanded ? 'ver menos' : 'ver m\u00E1s' }}\n </button>\n\n <!-- badges -->\n <div *ngIf=\"experience.badges?.length\" class=\"fs-exp__badges\">\n <fs-badge\n *ngFor=\"let badge of experience.badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </ng-container>\n\n </div>\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-exp{--fs-exp-bg: #0d1117;--fs-exp-border: rgba(255, 255, 255, .08);--fs-exp-company: rgba(255, 255, 255, .45);--fs-exp-role: #ffffff;--fs-exp-date: rgba(255, 255, 255, .35);--fs-exp-duration: rgba(255, 255, 255, .2);--fs-exp-bullet: rgba(255, 255, 255, .6);--fs-exp-bullet-arrow: var(--fs-primary-base);--fs-exp-divider: rgba(255, 255, 255, .06);--fs-exp-logo-bg: #161b22;--fs-exp-logo-border: rgba(255, 255, 255, .1);--fs-exp-logo-text: rgba(255, 255, 255, .45);--fs-exp-toggle: var(--fs-primary-base);--fs-exp-dot-current: var(--fs-success-base);--fs-exp-dot-past: rgba(255, 255, 255, .2);--fs-exp-radius: 12px;position:relative;width:100%;display:flex;gap:16px}.fs-exp--timeline{padding-left:28px}.fs-exp__timeline-line{position:absolute;left:8px;top:20px;bottom:-16px;width:1px;background:var(--fs-exp-border)}.fs-exp--timeline-last .fs-exp__timeline-line{display:none}.fs-exp__timeline-dot{position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:9999px;background:var(--fs-exp-dot-past);border:2px solid var(--fs-exp-bg);flex-shrink:0}.fs-exp__timeline-dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 6px #22c55e80}.fs-exp__card{flex:1;background:var(--fs-exp-bg);border:.5px solid var(--fs-exp-border);border-radius:var(--fs-exp-radius);padding:1.5rem;transition:border-color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__card:hover{border-color:#ffffff24}.fs-exp__header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}.fs-exp--compact .fs-exp__header{margin-bottom:0}.fs-exp__logo{width:52px;height:52px;border-radius:8px;background:var(--fs-exp-logo-bg);border:.5px solid var(--fs-exp-logo-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.fs-exp__logo-img{width:100%;height:100%;object-fit:contain;padding:4px}.fs-exp__logo-text{font-size:10px;font-weight:700;color:var(--fs-exp-logo-text);letter-spacing:-.5px;text-align:center;line-height:1.2;padding:4px;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__info{flex:1;min-width:0}.fs-exp__company{font-size:.875rem;color:var(--fs-exp-company);margin-bottom:.25rem;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__role{font-size:1.125rem;font-weight:600;color:var(--fs-exp-role);margin-bottom:.5rem;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-exp__date{font-size:.875rem;color:var(--fs-exp-date);display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__dot{width:7px;height:7px;border-radius:9999px;background:var(--fs-exp-dot-past);flex-shrink:0}.fs-exp__dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 4px #22c55e99}.fs-exp__duration{color:var(--fs-exp-duration)}.fs-exp__divider{height:.5px;background:var(--fs-exp-divider);margin-bottom:1rem}.fs-exp__bullets{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;padding:0}.fs-exp__bullet{font-size:.875rem;color:var(--fs-exp-bullet);display:flex;gap:.5rem;line-height:1.6;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__bullet-arrow{color:var(--fs-exp-bullet-arrow);flex-shrink:0;margin-top:2px;font-size:11px}.fs-exp__toggle{display:inline-flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:500;color:var(--fs-exp-toggle);background:transparent;border:none;cursor:pointer;padding:0;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:1rem;transition:color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__toggle:hover{color:var(--fs-primary-hover)}.fs-exp__toggle:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-exp__toggle-icon{transition:transform .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.fs-exp__toggle-icon--open{transform:rotate(180deg)}.fs-exp__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}\n"] }]
|
|
188
424
|
}], propDecorators: { experience: [{
|
|
189
425
|
type: Input
|
|
190
426
|
}], variant: [{
|
|
@@ -261,11 +497,11 @@ class FsProfileCardComponent {
|
|
|
261
497
|
.toUpperCase();
|
|
262
498
|
}
|
|
263
499
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsProfileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
264
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsProfileCardComponent, isStandalone: true, selector: "fs-profile-card", inputs: { name: "name", handle: "handle", role: "role", verified: "verified", avatarUrl: "avatarUrl", bannerUrl: "bannerUrl", links: "links", badges: "badges", stats: "stats", showActions: "showActions", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div class=\"fs-profile\">\n\n <!-- banner -->\n <div class=\"fs-profile__banner\">\n <img\n *ngIf=\"bannerUrl\"\n [src]=\"bannerUrl\"\n [alt]=\"name + ' banner'\"\n class=\"fs-profile__banner-img\"\n />\n <div *ngIf=\"!bannerUrl\" class=\"fs-profile__banner-gradient\"></div>\n <div class=\"fs-profile__banner-line\"></div>\n </div>\n\n <!-- body -->\n <div class=\"fs-profile__body\">\n\n <!-- avatar -->\n <div class=\"fs-profile__avatar-wrap\">\n <div class=\"fs-profile__avatar\">\n <img\n *ngIf=\"avatarUrl\"\n [src]=\"avatarUrl\"\n [alt]=\"name\"\n class=\"fs-profile__avatar-img\"\n />\n <span *ngIf=\"!avatarUrl\" class=\"fs-profile__avatar-initials\">\n {{ initials }}\n </span>\n </div>\n <div *ngIf=\"verified\" class=\"fs-profile__verified\" aria-label=\"Verificado\">\n <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 5l2 2 4-4\"\n stroke=\"white\" stroke-width=\"1.6\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <!-- identidad -->\n <div class=\"fs-profile__name\">{{ name }}</div>\n <div *ngIf=\"handle\" class=\"fs-profile__handle\">@{{ handle }}</div>\n <div *ngIf=\"role\" class=\"fs-profile__role\">{{ role }}</div>\n\n <!-- acciones -->\n <div *ngIf=\"showActions\" class=\"fs-profile__actions\">\n <button\n class=\"fs-profile__btn fs-profile__btn--primary\"\n type=\"button\"\n (click)=\"primaryAction.emit()\"\n >\n {{ primaryActionLabel }}\n </button>\n <button\n class=\"fs-profile__btn fs-profile__btn--outline\"\n type=\"button\"\n (click)=\"secondaryAction.emit()\"\n >\n {{ secondaryActionLabel }}\n </button>\n </div>\n\n <!-- links -->\n <div *ngIf=\"links.length\" class=\"fs-profile__links\">\n <a\n *ngFor=\"let link of links\"\n class=\"fs-profile__link\"\n [href]=\"link.url || '#'\"\n [attr.target]=\"link.url ? '_blank' : null\"\n [attr.rel]=\"link.url ? 'noopener noreferrer' : null\"\n >\n <svg *ngIf=\"link.icon\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"link.icon\" stroke=\"currentColor\" stroke-width=\"1.3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ link.label }}</span>\n </a>\n </div>\n\n <!-- badges -->\n <div *ngIf=\"badges.length\" class=\"fs-profile__badges\">\n <fs-badge\n *ngFor=\"let badge of badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </div>\n\n <!-- stats footer -->\n <div *ngIf=\"stats.length\" class=\"fs-profile__stats\">\n <div *ngFor=\"let stat of stats\" class=\"fs-profile__stat\">\n <span class=\"fs-profile__stat-value\">{{ stat.value }}</span>\n <span class=\"fs-profile__stat-label\">{{ stat.label }}</span>\n </div>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-profile{--fs-profile-bg: #0d1117;--fs-profile-border: rgba(255, 255, 255, .08);--fs-profile-banner-from: #1e3a5f;--fs-profile-banner-to: #0f2035;--fs-profile-avatar-bg: #1d3557;--fs-profile-avatar-color: #60a5fa;--fs-profile-avatar-border: #0d1117;--fs-profile-name: #ffffff;--fs-profile-handle: rgba(255, 255, 255, .35);--fs-profile-role: rgba(255, 255, 255, .5);--fs-profile-link: #60a5fa;--fs-profile-link-icon: rgba(255, 255, 255, .3);--fs-profile-stat-value: #ffffff;--fs-profile-stat-label: rgba(255, 255, 255, .3);--fs-profile-stats-border: rgba(255, 255, 255, .06);--fs-profile-divider: rgba(255, 255, 255, .06);background:var(--fs-profile-bg);border:.5px solid var(--fs-profile-border);border-radius:12px;overflow:hidden;width:100%}.fs-profile__banner{height:84px;position:relative;overflow:hidden}.fs-profile__banner-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.fs-profile__banner-gradient{width:100%;height:100%;background:linear-gradient(135deg,var(--fs-profile-banner-from) 0%,var(--fs-profile-banner-to) 100%)}.fs-profile__banner-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--fs-primary-base) 0%,var(--fs-tertiary-base) 100%)}.fs-profile__body{padding:.75rem 1rem 1rem}.fs-profile__avatar-wrap{position:relative;width:fit-content;margin-top:-28px;margin-bottom:.75rem}.fs-profile__avatar{width:56px;height:56px;border-radius:9999px;background:var(--fs-profile-avatar-bg);border:3px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center;overflow:hidden}.fs-profile__avatar-img{width:100%;height:100%;object-fit:cover;display:block}.fs-profile__avatar-initials{font-size:18px;font-weight:700;color:var(--fs-profile-avatar-color);font-family:Inter,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.fs-profile__verified{position:absolute;bottom:0;right:-2px;width:20px;height:20px;border-radius:9999px;background:var(--fs-primary-base);border:2px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center}.fs-profile__name{font-size:1rem;font-weight:600;color:var(--fs-profile-name);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px}.fs-profile__handle{font-size:.75rem;color:var(--fs-profile-handle);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.25rem}.fs-profile__role{font-size:.75rem;font-weight:500;color:var(--fs-profile-role);text-transform:uppercase;letter-spacing:.08em;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.75rem}.fs-profile__actions{display:flex;gap:.5rem;margin-bottom:.75rem}.fs-profile__btn{flex:1;padding:7px 0;border-radius:6px;font-size:.75rem;font-weight:500;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);border:none}.fs-profile__btn--primary{background:var(--fs-primary-base);color:#fff}.fs-profile__btn--primary:hover{background:var(--fs-primary-hover)}.fs-profile__btn--primary:active{background:var(--fs-primary-active)}.fs-profile__btn--outline{background:transparent;color:#ffffffb3;border:.5px solid rgba(255,255,255,.15)}.fs-profile__btn--outline:hover{border-color:#ffffff4d}.fs-profile__btn--outline:active{background:#ffffff0d}.fs-profile__btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-profile__links{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}.fs-profile__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--fs-profile-link);text-decoration:none;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-profile__link svg{opacity:.5;flex-shrink:0;stroke:currentColor}.fs-profile__link:hover{opacity:.75}.fs-profile__badges{display:flex;flex-wrap:wrap;gap:.25rem}.fs-profile__stats{border-top:.5px solid var(--fs-profile-stats-border);display:flex}.fs-profile__stat{flex:1;padding:.75rem 0;text-align:center;border-right:.5px solid var(--fs-profile-divider);display:flex;flex-direction:column;gap:2px}.fs-profile__stat:last-child{border-right:none}.fs-profile__stat-value{font-size:1rem;font-weight:600;color:var(--fs-profile-stat-value);font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1}.fs-profile__stat-label{font-size:10px;color:var(--fs-profile-stat-label);font-family:Inter,Segoe UI,system-ui,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsBadgeComponent, selector: "fs-badge", inputs: ["color", "variant", "size", "label", "dot", "iconLeft", "iconRight", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
500
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsProfileCardComponent, isStandalone: true, selector: "fs-profile-card", inputs: { name: "name", handle: "handle", role: "role", verified: "verified", avatarUrl: "avatarUrl", bannerUrl: "bannerUrl", links: "links", badges: "badges", stats: "stats", showActions: "showActions", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div class=\"fs-profile\">\n\n <!-- banner -->\n <div class=\"fs-profile__banner\">\n <img\n *ngIf=\"bannerUrl\"\n [src]=\"bannerUrl\"\n [alt]=\"name + ' banner'\"\n class=\"fs-profile__banner-img\"\n />\n <div *ngIf=\"!bannerUrl\" class=\"fs-profile__banner-gradient\"></div>\n <div class=\"fs-profile__banner-line\"></div>\n </div>\n\n <!-- body -->\n <div class=\"fs-profile__body\">\n\n <!-- avatar -->\n <div class=\"fs-profile__avatar-wrap\">\n <div class=\"fs-profile__avatar\">\n <img\n *ngIf=\"avatarUrl\"\n [src]=\"avatarUrl\"\n [alt]=\"name\"\n class=\"fs-profile__avatar-img\"\n />\n <span *ngIf=\"!avatarUrl\" class=\"fs-profile__avatar-initials\">\n {{ initials }}\n </span>\n </div>\n <div *ngIf=\"verified\" class=\"fs-profile__verified\" aria-label=\"Verificado\">\n <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 5l2 2 4-4\"\n stroke=\"white\" stroke-width=\"1.6\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <!-- identidad -->\n <div class=\"fs-profile__name\">{{ name }}</div>\n <div *ngIf=\"handle\" class=\"fs-profile__handle\">@{{ handle }}</div>\n <div *ngIf=\"role\" class=\"fs-profile__role\">{{ role }}</div>\n\n <!-- acciones -->\n <div *ngIf=\"showActions\" class=\"fs-profile__actions\">\n <button\n class=\"fs-profile__btn fs-profile__btn--primary\"\n type=\"button\"\n (click)=\"primaryAction.emit()\"\n >\n {{ primaryActionLabel }}\n </button>\n <button\n class=\"fs-profile__btn fs-profile__btn--outline\"\n type=\"button\"\n (click)=\"secondaryAction.emit()\"\n >\n {{ secondaryActionLabel }}\n </button>\n </div>\n\n <!-- links -->\n <div *ngIf=\"links.length\" class=\"fs-profile__links\">\n <a\n *ngFor=\"let link of links\"\n class=\"fs-profile__link\"\n [href]=\"link.url || '#'\"\n [attr.target]=\"link.url ? '_blank' : null\"\n [attr.rel]=\"link.url ? 'noopener noreferrer' : null\"\n >\n <svg *ngIf=\"link.icon\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"link.icon\" stroke=\"currentColor\" stroke-width=\"1.3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ link.label }}</span>\n </a>\n </div>\n\n <!-- badges -->\n <div *ngIf=\"badges.length\" class=\"fs-profile__badges\">\n <fs-badge\n *ngFor=\"let badge of badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </div>\n\n <!-- stats footer -->\n <div *ngIf=\"stats.length\" class=\"fs-profile__stats\">\n <div *ngFor=\"let stat of stats\" class=\"fs-profile__stat\">\n <span class=\"fs-profile__stat-value\">{{ stat.value }}</span>\n <span class=\"fs-profile__stat-label\">{{ stat.label }}</span>\n </div>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-profile{--fs-profile-bg: #0d1117;--fs-profile-border: rgba(255, 255, 255, .08);--fs-profile-banner-from: #1e3a5f;--fs-profile-banner-to: #0f2035;--fs-profile-avatar-bg: #1d3557;--fs-profile-avatar-color: #60a5fa;--fs-profile-avatar-border: #0d1117;--fs-profile-name: #ffffff;--fs-profile-handle: rgba(255, 255, 255, .35);--fs-profile-role: rgba(255, 255, 255, .5);--fs-profile-link: #60a5fa;--fs-profile-stat-value: #ffffff;--fs-profile-stat-label: rgba(255, 255, 255, .3);--fs-profile-stats-border: rgba(255, 255, 255, .06);--fs-profile-divider: rgba(255, 255, 255, .06);--fs-profile-radius: 12px;background:var(--fs-profile-bg);border:.5px solid var(--fs-profile-border);border-radius:var(--fs-profile-radius);overflow:hidden;width:100%}.fs-profile__banner{height:180px;position:relative;overflow:hidden}.fs-profile__banner-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.fs-profile__banner-gradient{width:100%;height:100%;background:linear-gradient(135deg,var(--fs-profile-banner-from) 0%,var(--fs-profile-banner-to) 100%)}.fs-profile__banner-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--fs-primary-base) 0%,var(--fs-tertiary-base) 100%)}.fs-profile__body{padding:.75rem 1.5rem 1.5rem}.fs-profile__avatar-wrap{position:relative;width:fit-content;margin-top:-60px;margin-bottom:1rem}.fs-profile__avatar{width:120px;height:120px;border-radius:9999px;background:var(--fs-profile-avatar-bg);border:3px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center;overflow:hidden}.fs-profile__avatar-img{width:100%;height:100%;object-fit:cover;display:block}.fs-profile__avatar-initials{font-size:34px;font-weight:700;color:var(--fs-profile-avatar-color);font-family:Inter,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.fs-profile__verified{position:absolute;bottom:2px;right:0;width:30px;height:30px;border-radius:9999px;background:var(--fs-primary-base);border:2px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center}.fs-profile__name{font-size:1.25rem;font-weight:600;color:var(--fs-profile-name);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.25rem;line-height:1.2}.fs-profile__handle{font-size:.875rem;color:var(--fs-profile-handle);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.5rem}.fs-profile__role{font-size:.875rem;font-weight:500;color:var(--fs-profile-role);text-transform:uppercase;letter-spacing:.08em;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:1rem}.fs-profile__actions{display:flex;gap:.5rem;margin-bottom:1rem}.fs-profile__btn{flex:1;padding:.5rem 0;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);border:none}.fs-profile__btn--primary{background:var(--fs-primary-base);color:#fff}.fs-profile__btn--primary:hover{background:var(--fs-primary-hover)}.fs-profile__btn--primary:active{background:var(--fs-primary-active)}.fs-profile__btn--outline{background:transparent;color:#ffffffb3;border:.5px solid rgba(255,255,255,.15)}.fs-profile__btn--outline:hover{border-color:#ffffff4d}.fs-profile__btn--outline:active{background:#ffffff0d}.fs-profile__btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-profile__links{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.fs-profile__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--fs-profile-link);text-decoration:none;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-profile__link svg{opacity:.5;flex-shrink:0;stroke:currentColor}.fs-profile__link:hover{opacity:.75}.fs-profile__badges{display:flex;flex-wrap:wrap;gap:.5rem}.fs-profile__stats{border-top:.5px solid var(--fs-profile-stats-border);display:flex}.fs-profile__stat{flex:1;padding:1rem 0;text-align:center;border-right:.5px solid var(--fs-profile-divider);display:flex;flex-direction:column;gap:.25rem}.fs-profile__stat:last-child{border-right:none}.fs-profile__stat-value{font-size:1.25rem;font-weight:600;color:var(--fs-profile-stat-value);font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1}.fs-profile__stat-label{font-size:.75rem;color:var(--fs-profile-stat-label);font-family:Inter,Segoe UI,system-ui,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsBadgeComponent, selector: "fs-badge", inputs: ["color", "variant", "size", "label", "dot", "iconLeft", "iconRight", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
265
501
|
}
|
|
266
502
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsProfileCardComponent, decorators: [{
|
|
267
503
|
type: Component,
|
|
268
|
-
args: [{ selector: 'fs-profile-card', standalone: true, imports: [CommonModule, FsBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fs-profile\">\n\n <!-- banner -->\n <div class=\"fs-profile__banner\">\n <img\n *ngIf=\"bannerUrl\"\n [src]=\"bannerUrl\"\n [alt]=\"name + ' banner'\"\n class=\"fs-profile__banner-img\"\n />\n <div *ngIf=\"!bannerUrl\" class=\"fs-profile__banner-gradient\"></div>\n <div class=\"fs-profile__banner-line\"></div>\n </div>\n\n <!-- body -->\n <div class=\"fs-profile__body\">\n\n <!-- avatar -->\n <div class=\"fs-profile__avatar-wrap\">\n <div class=\"fs-profile__avatar\">\n <img\n *ngIf=\"avatarUrl\"\n [src]=\"avatarUrl\"\n [alt]=\"name\"\n class=\"fs-profile__avatar-img\"\n />\n <span *ngIf=\"!avatarUrl\" class=\"fs-profile__avatar-initials\">\n {{ initials }}\n </span>\n </div>\n <div *ngIf=\"verified\" class=\"fs-profile__verified\" aria-label=\"Verificado\">\n <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 5l2 2 4-4\"\n stroke=\"white\" stroke-width=\"1.6\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <!-- identidad -->\n <div class=\"fs-profile__name\">{{ name }}</div>\n <div *ngIf=\"handle\" class=\"fs-profile__handle\">@{{ handle }}</div>\n <div *ngIf=\"role\" class=\"fs-profile__role\">{{ role }}</div>\n\n <!-- acciones -->\n <div *ngIf=\"showActions\" class=\"fs-profile__actions\">\n <button\n class=\"fs-profile__btn fs-profile__btn--primary\"\n type=\"button\"\n (click)=\"primaryAction.emit()\"\n >\n {{ primaryActionLabel }}\n </button>\n <button\n class=\"fs-profile__btn fs-profile__btn--outline\"\n type=\"button\"\n (click)=\"secondaryAction.emit()\"\n >\n {{ secondaryActionLabel }}\n </button>\n </div>\n\n <!-- links -->\n <div *ngIf=\"links.length\" class=\"fs-profile__links\">\n <a\n *ngFor=\"let link of links\"\n class=\"fs-profile__link\"\n [href]=\"link.url || '#'\"\n [attr.target]=\"link.url ? '_blank' : null\"\n [attr.rel]=\"link.url ? 'noopener noreferrer' : null\"\n >\n <svg *ngIf=\"link.icon\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"link.icon\" stroke=\"currentColor\" stroke-width=\"1.3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ link.label }}</span>\n </a>\n </div>\n\n <!-- badges -->\n <div *ngIf=\"badges.length\" class=\"fs-profile__badges\">\n <fs-badge\n *ngFor=\"let badge of badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </div>\n\n <!-- stats footer -->\n <div *ngIf=\"stats.length\" class=\"fs-profile__stats\">\n <div *ngFor=\"let stat of stats\" class=\"fs-profile__stat\">\n <span class=\"fs-profile__stat-value\">{{ stat.value }}</span>\n <span class=\"fs-profile__stat-label\">{{ stat.label }}</span>\n </div>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-profile{--fs-profile-bg: #0d1117;--fs-profile-border: rgba(255, 255, 255, .08);--fs-profile-banner-from: #1e3a5f;--fs-profile-banner-to: #0f2035;--fs-profile-avatar-bg: #1d3557;--fs-profile-avatar-color: #60a5fa;--fs-profile-avatar-border: #0d1117;--fs-profile-name: #ffffff;--fs-profile-handle: rgba(255, 255, 255, .35);--fs-profile-role: rgba(255, 255, 255, .5);--fs-profile-link: #60a5fa;--fs-profile-link-icon: rgba(255, 255, 255, .3);--fs-profile-stat-value: #ffffff;--fs-profile-stat-label: rgba(255, 255, 255, .3);--fs-profile-stats-border: rgba(255, 255, 255, .06);--fs-profile-divider: rgba(255, 255, 255, .06);background:var(--fs-profile-bg);border:.5px solid var(--fs-profile-border);border-radius:12px;overflow:hidden;width:100%}.fs-profile__banner{height:84px;position:relative;overflow:hidden}.fs-profile__banner-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.fs-profile__banner-gradient{width:100%;height:100%;background:linear-gradient(135deg,var(--fs-profile-banner-from) 0%,var(--fs-profile-banner-to) 100%)}.fs-profile__banner-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--fs-primary-base) 0%,var(--fs-tertiary-base) 100%)}.fs-profile__body{padding:.75rem 1rem 1rem}.fs-profile__avatar-wrap{position:relative;width:fit-content;margin-top:-28px;margin-bottom:.75rem}.fs-profile__avatar{width:56px;height:56px;border-radius:9999px;background:var(--fs-profile-avatar-bg);border:3px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center;overflow:hidden}.fs-profile__avatar-img{width:100%;height:100%;object-fit:cover;display:block}.fs-profile__avatar-initials{font-size:18px;font-weight:700;color:var(--fs-profile-avatar-color);font-family:Inter,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.fs-profile__verified{position:absolute;bottom:0;right:-2px;width:20px;height:20px;border-radius:9999px;background:var(--fs-primary-base);border:2px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center}.fs-profile__name{font-size:1rem;font-weight:600;color:var(--fs-profile-name);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px}.fs-profile__handle{font-size:.75rem;color:var(--fs-profile-handle);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.25rem}.fs-profile__role{font-size:.75rem;font-weight:500;color:var(--fs-profile-role);text-transform:uppercase;letter-spacing:.08em;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.75rem}.fs-profile__actions{display:flex;gap:.5rem;margin-bottom:.75rem}.fs-profile__btn{flex:1;padding:7px 0;border-radius:6px;font-size:.75rem;font-weight:500;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);border:none}.fs-profile__btn--primary{background:var(--fs-primary-base);color:#fff}.fs-profile__btn--primary:hover{background:var(--fs-primary-hover)}.fs-profile__btn--primary:active{background:var(--fs-primary-active)}.fs-profile__btn--outline{background:transparent;color:#ffffffb3;border:.5px solid rgba(255,255,255,.15)}.fs-profile__btn--outline:hover{border-color:#ffffff4d}.fs-profile__btn--outline:active{background:#ffffff0d}.fs-profile__btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-profile__links{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}.fs-profile__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--fs-profile-link);text-decoration:none;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-profile__link svg{opacity:.5;flex-shrink:0;stroke:currentColor}.fs-profile__link:hover{opacity:.75}.fs-profile__badges{display:flex;flex-wrap:wrap;gap:.25rem}.fs-profile__stats{border-top:.5px solid var(--fs-profile-stats-border);display:flex}.fs-profile__stat{flex:1;padding:.75rem 0;text-align:center;border-right:.5px solid var(--fs-profile-divider);display:flex;flex-direction:column;gap:2px}.fs-profile__stat:last-child{border-right:none}.fs-profile__stat-value{font-size:1rem;font-weight:600;color:var(--fs-profile-stat-value);font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1}.fs-profile__stat-label{font-size:10px;color:var(--fs-profile-stat-label);font-family:Inter,Segoe UI,system-ui,sans-serif}\n"] }]
|
|
504
|
+
args: [{ selector: 'fs-profile-card', standalone: true, imports: [CommonModule, FsBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fs-profile\">\n\n <!-- banner -->\n <div class=\"fs-profile__banner\">\n <img\n *ngIf=\"bannerUrl\"\n [src]=\"bannerUrl\"\n [alt]=\"name + ' banner'\"\n class=\"fs-profile__banner-img\"\n />\n <div *ngIf=\"!bannerUrl\" class=\"fs-profile__banner-gradient\"></div>\n <div class=\"fs-profile__banner-line\"></div>\n </div>\n\n <!-- body -->\n <div class=\"fs-profile__body\">\n\n <!-- avatar -->\n <div class=\"fs-profile__avatar-wrap\">\n <div class=\"fs-profile__avatar\">\n <img\n *ngIf=\"avatarUrl\"\n [src]=\"avatarUrl\"\n [alt]=\"name\"\n class=\"fs-profile__avatar-img\"\n />\n <span *ngIf=\"!avatarUrl\" class=\"fs-profile__avatar-initials\">\n {{ initials }}\n </span>\n </div>\n <div *ngIf=\"verified\" class=\"fs-profile__verified\" aria-label=\"Verificado\">\n <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 5l2 2 4-4\"\n stroke=\"white\" stroke-width=\"1.6\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <!-- identidad -->\n <div class=\"fs-profile__name\">{{ name }}</div>\n <div *ngIf=\"handle\" class=\"fs-profile__handle\">@{{ handle }}</div>\n <div *ngIf=\"role\" class=\"fs-profile__role\">{{ role }}</div>\n\n <!-- acciones -->\n <div *ngIf=\"showActions\" class=\"fs-profile__actions\">\n <button\n class=\"fs-profile__btn fs-profile__btn--primary\"\n type=\"button\"\n (click)=\"primaryAction.emit()\"\n >\n {{ primaryActionLabel }}\n </button>\n <button\n class=\"fs-profile__btn fs-profile__btn--outline\"\n type=\"button\"\n (click)=\"secondaryAction.emit()\"\n >\n {{ secondaryActionLabel }}\n </button>\n </div>\n\n <!-- links -->\n <div *ngIf=\"links.length\" class=\"fs-profile__links\">\n <a\n *ngFor=\"let link of links\"\n class=\"fs-profile__link\"\n [href]=\"link.url || '#'\"\n [attr.target]=\"link.url ? '_blank' : null\"\n [attr.rel]=\"link.url ? 'noopener noreferrer' : null\"\n >\n <svg *ngIf=\"link.icon\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"link.icon\" stroke=\"currentColor\" stroke-width=\"1.3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ link.label }}</span>\n </a>\n </div>\n\n <!-- badges -->\n <div *ngIf=\"badges.length\" class=\"fs-profile__badges\">\n <fs-badge\n *ngFor=\"let badge of badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </div>\n\n <!-- stats footer -->\n <div *ngIf=\"stats.length\" class=\"fs-profile__stats\">\n <div *ngFor=\"let stat of stats\" class=\"fs-profile__stat\">\n <span class=\"fs-profile__stat-value\">{{ stat.value }}</span>\n <span class=\"fs-profile__stat-label\">{{ stat.label }}</span>\n </div>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-profile{--fs-profile-bg: #0d1117;--fs-profile-border: rgba(255, 255, 255, .08);--fs-profile-banner-from: #1e3a5f;--fs-profile-banner-to: #0f2035;--fs-profile-avatar-bg: #1d3557;--fs-profile-avatar-color: #60a5fa;--fs-profile-avatar-border: #0d1117;--fs-profile-name: #ffffff;--fs-profile-handle: rgba(255, 255, 255, .35);--fs-profile-role: rgba(255, 255, 255, .5);--fs-profile-link: #60a5fa;--fs-profile-stat-value: #ffffff;--fs-profile-stat-label: rgba(255, 255, 255, .3);--fs-profile-stats-border: rgba(255, 255, 255, .06);--fs-profile-divider: rgba(255, 255, 255, .06);--fs-profile-radius: 12px;background:var(--fs-profile-bg);border:.5px solid var(--fs-profile-border);border-radius:var(--fs-profile-radius);overflow:hidden;width:100%}.fs-profile__banner{height:180px;position:relative;overflow:hidden}.fs-profile__banner-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.fs-profile__banner-gradient{width:100%;height:100%;background:linear-gradient(135deg,var(--fs-profile-banner-from) 0%,var(--fs-profile-banner-to) 100%)}.fs-profile__banner-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--fs-primary-base) 0%,var(--fs-tertiary-base) 100%)}.fs-profile__body{padding:.75rem 1.5rem 1.5rem}.fs-profile__avatar-wrap{position:relative;width:fit-content;margin-top:-60px;margin-bottom:1rem}.fs-profile__avatar{width:120px;height:120px;border-radius:9999px;background:var(--fs-profile-avatar-bg);border:3px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center;overflow:hidden}.fs-profile__avatar-img{width:100%;height:100%;object-fit:cover;display:block}.fs-profile__avatar-initials{font-size:34px;font-weight:700;color:var(--fs-profile-avatar-color);font-family:Inter,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.fs-profile__verified{position:absolute;bottom:2px;right:0;width:30px;height:30px;border-radius:9999px;background:var(--fs-primary-base);border:2px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center}.fs-profile__name{font-size:1.25rem;font-weight:600;color:var(--fs-profile-name);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.25rem;line-height:1.2}.fs-profile__handle{font-size:.875rem;color:var(--fs-profile-handle);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.5rem}.fs-profile__role{font-size:.875rem;font-weight:500;color:var(--fs-profile-role);text-transform:uppercase;letter-spacing:.08em;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:1rem}.fs-profile__actions{display:flex;gap:.5rem;margin-bottom:1rem}.fs-profile__btn{flex:1;padding:.5rem 0;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);border:none}.fs-profile__btn--primary{background:var(--fs-primary-base);color:#fff}.fs-profile__btn--primary:hover{background:var(--fs-primary-hover)}.fs-profile__btn--primary:active{background:var(--fs-primary-active)}.fs-profile__btn--outline{background:transparent;color:#ffffffb3;border:.5px solid rgba(255,255,255,.15)}.fs-profile__btn--outline:hover{border-color:#ffffff4d}.fs-profile__btn--outline:active{background:#ffffff0d}.fs-profile__btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-profile__links{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.fs-profile__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--fs-profile-link);text-decoration:none;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-profile__link svg{opacity:.5;flex-shrink:0;stroke:currentColor}.fs-profile__link:hover{opacity:.75}.fs-profile__badges{display:flex;flex-wrap:wrap;gap:.5rem}.fs-profile__stats{border-top:.5px solid var(--fs-profile-stats-border);display:flex}.fs-profile__stat{flex:1;padding:1rem 0;text-align:center;border-right:.5px solid var(--fs-profile-divider);display:flex;flex-direction:column;gap:.25rem}.fs-profile__stat:last-child{border-right:none}.fs-profile__stat-value{font-size:1.25rem;font-weight:600;color:var(--fs-profile-stat-value);font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1}.fs-profile__stat-label{font-size:.75rem;color:var(--fs-profile-stat-label);font-family:Inter,Segoe UI,system-ui,sans-serif}\n"] }]
|
|
269
505
|
}], propDecorators: { name: [{
|
|
270
506
|
type: Input
|
|
271
507
|
}], handle: [{
|
|
@@ -296,167 +532,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
296
532
|
type: Output
|
|
297
533
|
}] } });
|
|
298
534
|
|
|
299
|
-
class FsAlertComponent {
|
|
300
|
-
cdr;
|
|
301
|
-
/** Tipo semántico del alert */
|
|
302
|
-
type = 'info';
|
|
303
|
-
/** filled = fondo sutil · accent = borde izquierdo */
|
|
304
|
-
variant = 'filled';
|
|
305
|
-
/** Título opcional en negrita */
|
|
306
|
-
title;
|
|
307
|
-
/** Muestra botón X para cerrar */
|
|
308
|
-
dismissible = false;
|
|
309
|
-
/**
|
|
310
|
-
* Auto-cierre en milisegundos.
|
|
311
|
-
* 0 = deshabilitado.
|
|
312
|
-
* Muestra progress bar cuando está activo.
|
|
313
|
-
*/
|
|
314
|
-
autoDismiss = 0;
|
|
315
|
-
/** Emite cuando el alert se cierra (botón X o auto-dismiss) */
|
|
316
|
-
dismissed = new EventEmitter();
|
|
317
|
-
// Estado interno de animación
|
|
318
|
-
animState = 'entering';
|
|
319
|
-
autoTimer;
|
|
320
|
-
constructor(cdr) {
|
|
321
|
-
this.cdr = cdr;
|
|
322
|
-
}
|
|
323
|
-
ngOnInit() {
|
|
324
|
-
// tras la animación de entrada → visible
|
|
325
|
-
setTimeout(() => {
|
|
326
|
-
this.animState = 'visible';
|
|
327
|
-
this.cdr.markForCheck();
|
|
328
|
-
}, 300);
|
|
329
|
-
if (this.autoDismiss > 0) {
|
|
330
|
-
this.autoTimer = setTimeout(() => this.dismiss(), this.autoDismiss);
|
|
331
|
-
}
|
|
332
|
-
}
|
|
333
|
-
ngOnDestroy() {
|
|
334
|
-
if (this.autoTimer)
|
|
335
|
-
clearTimeout(this.autoTimer);
|
|
336
|
-
}
|
|
337
|
-
dismiss() {
|
|
338
|
-
if (this.animState === 'exiting')
|
|
339
|
-
return;
|
|
340
|
-
this.animState = 'exiting';
|
|
341
|
-
this.cdr.markForCheck();
|
|
342
|
-
// esperar la animación de salida antes de emitir
|
|
343
|
-
setTimeout(() => {
|
|
344
|
-
this.dismissed.emit();
|
|
345
|
-
}, 240);
|
|
346
|
-
}
|
|
347
|
-
get progressDuration() {
|
|
348
|
-
return `${this.autoDismiss}ms`;
|
|
349
|
-
}
|
|
350
|
-
get iconPath() {
|
|
351
|
-
const icons = {
|
|
352
|
-
info: 'M8 7v4M8 5.5v.01M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8z',
|
|
353
|
-
success: 'M5 8l2 2 4-4M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8z',
|
|
354
|
-
warning: 'M8 2L2 13h12L8 2zM8 7v3M8 11.5v.01',
|
|
355
|
-
danger: 'M8 5v4M8 10.5v.01M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8z',
|
|
356
|
-
neutral: 'M8 7v4M8 5.5v.01M2 8a6 6 0 1 0 12 0A6 6 0 0 0 2 8z',
|
|
357
|
-
};
|
|
358
|
-
return icons[this.type];
|
|
359
|
-
}
|
|
360
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsAlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
361
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsAlertComponent, isStandalone: true, selector: "fs-alert", inputs: { type: "type", variant: "variant", title: "title", dismissible: "dismissible", autoDismiss: "autoDismiss" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"animState !== 'exiting' || true\"\n class=\"fs-alert\"\n [class.fs-alert--entering]=\"animState === 'entering'\"\n [class.fs-alert--visible]=\"animState === 'visible'\"\n [class.fs-alert--exiting]=\"animState === 'exiting'\"\n [class]=\"'fs-alert fs-alert--' + type + ' fs-alert--' + variant\"\n [attr.role]=\"type === 'danger' ? 'alert' : 'status'\"\n [attr.aria-live]=\"type === 'danger' ? 'assertive' : 'polite'\"\n>\n\n <!-- \u00EDcono sem\u00E1ntico -->\n <svg\n class=\"fs-alert__icon\"\n width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n [attr.d]=\"iconPath\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- cuerpo -->\n <div class=\"fs-alert__body\">\n <div *ngIf=\"title\" class=\"fs-alert__title\">{{ title }}</div>\n <div class=\"fs-alert__desc\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- bot\u00F3n cerrar -->\n <button\n *ngIf=\"dismissible\"\n class=\"fs-alert__close\"\n type=\"button\"\n aria-label=\"Cerrar\"\n (click)=\"dismiss()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M3 3l8 8M11 3L3 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n\n <!-- progress bar de auto-dismiss -->\n <div\n *ngIf=\"autoDismiss > 0\"\n class=\"fs-alert__progress\"\n [style.animation-duration]=\"progressDuration\"\n ></div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}@keyframes fs-alert-in{0%{opacity:0;transform:translateY(-10px);max-height:0;padding:0 1rem}to{opacity:1;transform:translateY(0);max-height:300px}}@keyframes fs-alert-out{0%{opacity:1;transform:translateY(0);max-height:300px;margin-bottom:0}to{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}}@keyframes fs-alert-progress{0%{width:100%}to{width:0%}}.fs-alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:8px;padding:.75rem 1rem;border:.5px solid transparent;position:relative;overflow:hidden;width:100%}.fs-alert--entering{animation:fs-alert-in .28s cubic-bezier(.4,0,.2,1) forwards}.fs-alert--visible{opacity:1;transform:translateY(0)}.fs-alert--exiting{animation:fs-alert-out .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.fs-alert--info.fs-alert--filled{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd}.fs-alert--info.fs-alert--filled .fs-alert__progress{background:#2563eb}.fs-alert--info.fs-alert--accent{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd;border-left:3px solid #2563eb;border-radius:0 8px 8px 0}.fs-alert--info.fs-alert--accent .fs-alert__progress{background:#2563eb}.fs-alert--success.fs-alert--filled{background:#22c55e1a;border-color:#22c55e4d;color:#86efac}.fs-alert--success.fs-alert--filled .fs-alert__progress{background:#22c55e}.fs-alert--success.fs-alert--accent{background:#22c55e1a;border-color:#22c55e4d;color:#86efac;border-left:3px solid #22c55e;border-radius:0 8px 8px 0}.fs-alert--success.fs-alert--accent .fs-alert__progress{background:#22c55e}.fs-alert--warning.fs-alert--filled{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d}.fs-alert--warning.fs-alert--filled .fs-alert__progress{background:#f59e0b}.fs-alert--warning.fs-alert--accent{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d;border-left:3px solid #f59e0b;border-radius:0 8px 8px 0}.fs-alert--warning.fs-alert--accent .fs-alert__progress{background:#f59e0b}.fs-alert--danger.fs-alert--filled{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185}.fs-alert--danger.fs-alert--filled .fs-alert__progress{background:#f43f5e}.fs-alert--danger.fs-alert--accent{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185;border-left:3px solid #f43f5e;border-radius:0 8px 8px 0}.fs-alert--danger.fs-alert--accent .fs-alert__progress{background:#f43f5e}.fs-alert--neutral.fs-alert--filled{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3}.fs-alert--neutral.fs-alert--filled .fs-alert__progress{background:#ffffff4d}.fs-alert--neutral.fs-alert--accent{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3;border-left:3px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0}.fs-alert--neutral.fs-alert--accent .fs-alert__progress{background:#ffffff4d}.fs-alert__icon{flex-shrink:0;margin-top:1px;stroke:currentColor}.fs-alert__body{flex:1;min-width:0}.fs-alert__title{font-size:.875rem;font-weight:600;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px;line-height:1.4}.fs-alert__desc{font-size:.75rem;font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1.6;opacity:.85}.fs-alert__desc code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:11px;background:#ffffff14;padding:1px 5px;border-radius:4px}.fs-alert__close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0;flex-shrink:0;border-radius:4px;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-alert__close:hover{opacity:1}.fs-alert__close:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}.fs-alert__progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 8px;animation:fs-alert-progress linear forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
362
|
-
}
|
|
363
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsAlertComponent, decorators: [{
|
|
364
|
-
type: Component,
|
|
365
|
-
args: [{ selector: 'fs-alert', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"animState !== 'exiting' || true\"\n class=\"fs-alert\"\n [class.fs-alert--entering]=\"animState === 'entering'\"\n [class.fs-alert--visible]=\"animState === 'visible'\"\n [class.fs-alert--exiting]=\"animState === 'exiting'\"\n [class]=\"'fs-alert fs-alert--' + type + ' fs-alert--' + variant\"\n [attr.role]=\"type === 'danger' ? 'alert' : 'status'\"\n [attr.aria-live]=\"type === 'danger' ? 'assertive' : 'polite'\"\n>\n\n <!-- \u00EDcono sem\u00E1ntico -->\n <svg\n class=\"fs-alert__icon\"\n width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n [attr.d]=\"iconPath\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- cuerpo -->\n <div class=\"fs-alert__body\">\n <div *ngIf=\"title\" class=\"fs-alert__title\">{{ title }}</div>\n <div class=\"fs-alert__desc\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- bot\u00F3n cerrar -->\n <button\n *ngIf=\"dismissible\"\n class=\"fs-alert__close\"\n type=\"button\"\n aria-label=\"Cerrar\"\n (click)=\"dismiss()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M3 3l8 8M11 3L3 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n\n <!-- progress bar de auto-dismiss -->\n <div\n *ngIf=\"autoDismiss > 0\"\n class=\"fs-alert__progress\"\n [style.animation-duration]=\"progressDuration\"\n ></div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}@keyframes fs-alert-in{0%{opacity:0;transform:translateY(-10px);max-height:0;padding:0 1rem}to{opacity:1;transform:translateY(0);max-height:300px}}@keyframes fs-alert-out{0%{opacity:1;transform:translateY(0);max-height:300px;margin-bottom:0}to{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}}@keyframes fs-alert-progress{0%{width:100%}to{width:0%}}.fs-alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:8px;padding:.75rem 1rem;border:.5px solid transparent;position:relative;overflow:hidden;width:100%}.fs-alert--entering{animation:fs-alert-in .28s cubic-bezier(.4,0,.2,1) forwards}.fs-alert--visible{opacity:1;transform:translateY(0)}.fs-alert--exiting{animation:fs-alert-out .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.fs-alert--info.fs-alert--filled{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd}.fs-alert--info.fs-alert--filled .fs-alert__progress{background:#2563eb}.fs-alert--info.fs-alert--accent{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd;border-left:3px solid #2563eb;border-radius:0 8px 8px 0}.fs-alert--info.fs-alert--accent .fs-alert__progress{background:#2563eb}.fs-alert--success.fs-alert--filled{background:#22c55e1a;border-color:#22c55e4d;color:#86efac}.fs-alert--success.fs-alert--filled .fs-alert__progress{background:#22c55e}.fs-alert--success.fs-alert--accent{background:#22c55e1a;border-color:#22c55e4d;color:#86efac;border-left:3px solid #22c55e;border-radius:0 8px 8px 0}.fs-alert--success.fs-alert--accent .fs-alert__progress{background:#22c55e}.fs-alert--warning.fs-alert--filled{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d}.fs-alert--warning.fs-alert--filled .fs-alert__progress{background:#f59e0b}.fs-alert--warning.fs-alert--accent{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d;border-left:3px solid #f59e0b;border-radius:0 8px 8px 0}.fs-alert--warning.fs-alert--accent .fs-alert__progress{background:#f59e0b}.fs-alert--danger.fs-alert--filled{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185}.fs-alert--danger.fs-alert--filled .fs-alert__progress{background:#f43f5e}.fs-alert--danger.fs-alert--accent{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185;border-left:3px solid #f43f5e;border-radius:0 8px 8px 0}.fs-alert--danger.fs-alert--accent .fs-alert__progress{background:#f43f5e}.fs-alert--neutral.fs-alert--filled{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3}.fs-alert--neutral.fs-alert--filled .fs-alert__progress{background:#ffffff4d}.fs-alert--neutral.fs-alert--accent{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3;border-left:3px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0}.fs-alert--neutral.fs-alert--accent .fs-alert__progress{background:#ffffff4d}.fs-alert__icon{flex-shrink:0;margin-top:1px;stroke:currentColor}.fs-alert__body{flex:1;min-width:0}.fs-alert__title{font-size:.875rem;font-weight:600;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px;line-height:1.4}.fs-alert__desc{font-size:.75rem;font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1.6;opacity:.85}.fs-alert__desc code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:11px;background:#ffffff14;padding:1px 5px;border-radius:4px}.fs-alert__close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0;flex-shrink:0;border-radius:4px;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-alert__close:hover{opacity:1}.fs-alert__close:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}.fs-alert__progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 8px;animation:fs-alert-progress linear forwards}\n"] }]
|
|
366
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
|
|
367
|
-
type: Input
|
|
368
|
-
}], variant: [{
|
|
369
|
-
type: Input
|
|
370
|
-
}], title: [{
|
|
371
|
-
type: Input
|
|
372
|
-
}], dismissible: [{
|
|
373
|
-
type: Input
|
|
374
|
-
}], autoDismiss: [{
|
|
375
|
-
type: Input
|
|
376
|
-
}], dismissed: [{
|
|
377
|
-
type: Output
|
|
378
|
-
}] } });
|
|
379
|
-
|
|
380
|
-
class FsTabsComponent {
|
|
381
|
-
cdr;
|
|
382
|
-
zone;
|
|
383
|
-
/** Lista de tabs a renderizar */
|
|
384
|
-
tabs = [];
|
|
385
|
-
/** Id de la tab activa */
|
|
386
|
-
activeTab = '';
|
|
387
|
-
/** Two-way binding: [(activeTab)] */
|
|
388
|
-
activeTabChange = new EventEmitter();
|
|
389
|
-
/** Emite la tab completa al cambiar */
|
|
390
|
-
tabChange = new EventEmitter();
|
|
391
|
-
tabsRow;
|
|
392
|
-
indicatorLeft = 0;
|
|
393
|
-
indicatorWidth = 0;
|
|
394
|
-
constructor(cdr, zone) {
|
|
395
|
-
this.cdr = cdr;
|
|
396
|
-
this.zone = zone;
|
|
397
|
-
}
|
|
398
|
-
ngAfterViewInit() {
|
|
399
|
-
this.updateIndicator();
|
|
400
|
-
// Recalcular al cambiar el tamaño del contenedor
|
|
401
|
-
this.zone.runOutsideAngular(() => {
|
|
402
|
-
const ro = new ResizeObserver(() => {
|
|
403
|
-
this.zone.run(() => {
|
|
404
|
-
this.updateIndicator();
|
|
405
|
-
this.cdr.markForCheck();
|
|
406
|
-
});
|
|
407
|
-
});
|
|
408
|
-
ro.observe(this.tabsRow.nativeElement);
|
|
409
|
-
});
|
|
410
|
-
}
|
|
411
|
-
ngOnChanges(changes) {
|
|
412
|
-
if (changes['activeTab'] || changes['tabs']) {
|
|
413
|
-
// Defer para que el DOM se actualice primero
|
|
414
|
-
setTimeout(() => this.updateIndicator());
|
|
415
|
-
}
|
|
416
|
-
}
|
|
417
|
-
selectTab(tab) {
|
|
418
|
-
if (tab.disabled)
|
|
419
|
-
return;
|
|
420
|
-
this.activeTab = tab.id;
|
|
421
|
-
this.activeTabChange.emit(tab.id);
|
|
422
|
-
this.tabChange.emit(tab);
|
|
423
|
-
this.updateIndicator();
|
|
424
|
-
}
|
|
425
|
-
isActive(tab) {
|
|
426
|
-
return this.activeTab === tab.id;
|
|
427
|
-
}
|
|
428
|
-
updateIndicator() {
|
|
429
|
-
if (!this.tabsRow)
|
|
430
|
-
return;
|
|
431
|
-
const row = this.tabsRow.nativeElement;
|
|
432
|
-
const items = row.querySelectorAll('.fs-tabs__item');
|
|
433
|
-
const idx = this.tabs.findIndex(t => t.id === this.activeTab);
|
|
434
|
-
if (idx === -1 || !items[idx])
|
|
435
|
-
return;
|
|
436
|
-
const item = items[idx];
|
|
437
|
-
this.indicatorLeft = item.offsetLeft;
|
|
438
|
-
this.indicatorWidth = item.offsetWidth;
|
|
439
|
-
this.cdr.markForCheck();
|
|
440
|
-
}
|
|
441
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
442
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsTabsComponent, isStandalone: true, selector: "fs-tabs", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabsRow", first: true, predicate: ["tabsRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fs-tabs\">\n\n <!-- encabezado -->\n <div class=\"fs-tabs__header\" #tabsRow role=\"tablist\">\n\n <button\n *ngFor=\"let tab of tabs\"\n class=\"fs-tabs__item\"\n [class.fs-tabs__item--active]=\"isActive(tab)\"\n [class.fs-tabs__item--disabled]=\"tab.disabled\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n {{ tab.label }}\n </button>\n\n <!-- indicator deslizante -->\n <span\n class=\"fs-tabs__indicator\"\n [style.left.px]=\"indicatorLeft\"\n [style.width.px]=\"indicatorWidth\"\n aria-hidden=\"true\"\n ></span>\n\n </div>\n\n <!-- contenido v\u00EDa content projection -->\n <div class=\"fs-tabs__content\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-tabs{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45);--fs-tab-radius: 8px;display:flex;flex-direction:column;width:100%}.fs-tabs__header{display:flex;position:relative;width:100%;background:var(--fs-tab-bg);border-radius:var(--fs-tab-radius) var(--fs-tab-radius) 0 0;border-bottom:1px solid var(--fs-tab-border);overflow:hidden}.fs-tabs__item{flex:1;padding:14px 8px;font-size:.875rem;font-weight:500;color:var(--fs-tab-color);background:transparent;border:none;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;line-height:1}.fs-tabs__item:hover:not(.fs-tabs__item--disabled):not(.fs-tabs__item--active){color:var(--fs-tab-color-hover);background:var(--fs-tab-hover-bg)}.fs-tabs__item--active{color:var(--fs-tab-color-active);font-weight:600}.fs-tabs__item--disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.fs-tabs__item:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-tabs__indicator{position:absolute;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--fs-tab-indicator-from) 0%,var(--fs-tab-indicator-to) 100%);box-shadow:0 0 10px var(--fs-tab-indicator-glow);transition:left .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1)}.fs-tabs__content{flex:1;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
443
|
-
}
|
|
444
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsTabsComponent, decorators: [{
|
|
445
|
-
type: Component,
|
|
446
|
-
args: [{ selector: 'fs-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fs-tabs\">\n\n <!-- encabezado -->\n <div class=\"fs-tabs__header\" #tabsRow role=\"tablist\">\n\n <button\n *ngFor=\"let tab of tabs\"\n class=\"fs-tabs__item\"\n [class.fs-tabs__item--active]=\"isActive(tab)\"\n [class.fs-tabs__item--disabled]=\"tab.disabled\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n {{ tab.label }}\n </button>\n\n <!-- indicator deslizante -->\n <span\n class=\"fs-tabs__indicator\"\n [style.left.px]=\"indicatorLeft\"\n [style.width.px]=\"indicatorWidth\"\n aria-hidden=\"true\"\n ></span>\n\n </div>\n\n <!-- contenido v\u00EDa content projection -->\n <div class=\"fs-tabs__content\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-tabs{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45);--fs-tab-radius: 8px;display:flex;flex-direction:column;width:100%}.fs-tabs__header{display:flex;position:relative;width:100%;background:var(--fs-tab-bg);border-radius:var(--fs-tab-radius) var(--fs-tab-radius) 0 0;border-bottom:1px solid var(--fs-tab-border);overflow:hidden}.fs-tabs__item{flex:1;padding:14px 8px;font-size:.875rem;font-weight:500;color:var(--fs-tab-color);background:transparent;border:none;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;line-height:1}.fs-tabs__item:hover:not(.fs-tabs__item--disabled):not(.fs-tabs__item--active){color:var(--fs-tab-color-hover);background:var(--fs-tab-hover-bg)}.fs-tabs__item--active{color:var(--fs-tab-color-active);font-weight:600}.fs-tabs__item--disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.fs-tabs__item:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-tabs__indicator{position:absolute;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--fs-tab-indicator-from) 0%,var(--fs-tab-indicator-to) 100%);box-shadow:0 0 10px var(--fs-tab-indicator-glow);transition:left .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1)}.fs-tabs__content{flex:1;width:100%}\n"] }]
|
|
447
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { tabs: [{
|
|
448
|
-
type: Input
|
|
449
|
-
}], activeTab: [{
|
|
450
|
-
type: Input
|
|
451
|
-
}], activeTabChange: [{
|
|
452
|
-
type: Output
|
|
453
|
-
}], tabChange: [{
|
|
454
|
-
type: Output
|
|
455
|
-
}], tabsRow: [{
|
|
456
|
-
type: ViewChild,
|
|
457
|
-
args: ['tabsRow']
|
|
458
|
-
}] } });
|
|
459
|
-
|
|
460
535
|
/*
|
|
461
536
|
* Public API Surface of fsociety
|
|
462
537
|
*/
|
|
@@ -465,5 +540,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
465
540
|
* Generated bundle index. Do not edit.
|
|
466
541
|
*/
|
|
467
542
|
|
|
468
|
-
export { FsAlertComponent, FsExperienceCardComponent, FsProfileCardComponent, FsTabsComponent, FsocietyComponent, FsocietyService };
|
|
543
|
+
export { FsAlertComponent, FsBadgeComponent, FsButtonComponent, FsExperienceCardComponent, FsProfileCardComponent, FsTabsComponent, FsocietyComponent, FsocietyService };
|
|
469
544
|
//# sourceMappingURL=heroelc-fsociety.mjs.map
|