@heroelc/fsociety 0.0.10 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +379 -34
- package/fesm2022/heroelc-fsociety.mjs +53 -56
- package/fesm2022/heroelc-fsociety.mjs.map +1 -1
- package/lib/badge/badge.component.d.ts +17 -10
- package/lib/experience-card/experience-card.component.d.ts +3 -0
- package/lib/profile-card/profile-card.component.d.ts +12 -27
- package/package.json +1 -1
|
@@ -110,6 +110,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
110
110
|
class FsBadgeComponent {
|
|
111
111
|
/** Color semántico del badge */
|
|
112
112
|
color = 'neutral';
|
|
113
|
+
/**
|
|
114
|
+
* Color personalizado en formato hex.
|
|
115
|
+
* Ejemplo: '#7c3aed'
|
|
116
|
+
* Cuando se provee, tiene prioridad sobre `color` y genera
|
|
117
|
+
* automáticamente el fondo, borde y texto con la opacidad correcta.
|
|
118
|
+
*/
|
|
119
|
+
customColor;
|
|
113
120
|
/** Filled = fondo sutil · outline = solo borde */
|
|
114
121
|
variant = 'filled';
|
|
115
122
|
/** Tamaño */
|
|
@@ -118,17 +125,13 @@ class FsBadgeComponent {
|
|
|
118
125
|
label;
|
|
119
126
|
/** Muestra punto de estado a la izquierda */
|
|
120
127
|
dot = false;
|
|
121
|
-
/**
|
|
122
|
-
* SVG path del ícono izquierdo (viewBox 0 0 24 24).
|
|
123
|
-
*/
|
|
128
|
+
/** SVG path del ícono izquierdo (viewBox 0 0 24 24) */
|
|
124
129
|
iconLeft;
|
|
125
|
-
/**
|
|
126
|
-
* SVG path del ícono derecho (viewBox 0 0 24 24).
|
|
127
|
-
*/
|
|
130
|
+
/** SVG path del ícono derecho (viewBox 0 0 24 24) */
|
|
128
131
|
iconRight;
|
|
129
132
|
/**
|
|
130
133
|
* URL o ruta de imagen izquierda.
|
|
131
|
-
* Ejemplo: 'assets/icons/angular.svg' o 'https
|
|
134
|
+
* Ejemplo: 'assets/icons/angular.svg' o 'https://cdn.simpleicons.org/angular/white'
|
|
132
135
|
* Tiene prioridad sobre iconLeft si ambos están definidos.
|
|
133
136
|
*/
|
|
134
137
|
imgLeft;
|
|
@@ -150,11 +153,22 @@ class FsBadgeComponent {
|
|
|
150
153
|
removable = false;
|
|
151
154
|
/** Emite cuando se clickea el botón remove */
|
|
152
155
|
removed = new EventEmitter();
|
|
156
|
+
// Estilos calculados para customColor
|
|
157
|
+
customStyles = {};
|
|
158
|
+
ngOnChanges() {
|
|
159
|
+
if (this.customColor) {
|
|
160
|
+
this.customStyles = this.buildCustomStyles(this.customColor);
|
|
161
|
+
}
|
|
162
|
+
else {
|
|
163
|
+
this.customStyles = {};
|
|
164
|
+
}
|
|
165
|
+
}
|
|
153
166
|
get classes() {
|
|
154
167
|
return {
|
|
155
|
-
[`fs-badge--${this.color}`]:
|
|
168
|
+
[`fs-badge--${this.color}`]: !this.customColor,
|
|
156
169
|
[`fs-badge--${this.variant}`]: true,
|
|
157
170
|
[`fs-badge--${this.size}`]: true,
|
|
171
|
+
'fs-badge--custom': !!this.customColor,
|
|
158
172
|
'fs-badge--dot': this.dot,
|
|
159
173
|
'fs-badge--icon-only': this.iconOnly,
|
|
160
174
|
'fs-badge--removable': this.removable,
|
|
@@ -164,14 +178,39 @@ class FsBadgeComponent {
|
|
|
164
178
|
event.stopPropagation();
|
|
165
179
|
this.removed.emit();
|
|
166
180
|
}
|
|
181
|
+
buildCustomStyles(hex) {
|
|
182
|
+
// Convertir hex a rgb para poder usar con opacidad
|
|
183
|
+
const r = parseInt(hex.slice(1, 3), 16);
|
|
184
|
+
const g = parseInt(hex.slice(3, 5), 16);
|
|
185
|
+
const b = parseInt(hex.slice(5, 7), 16);
|
|
186
|
+
if (this.variant === 'outline') {
|
|
187
|
+
return {
|
|
188
|
+
'background': 'transparent',
|
|
189
|
+
'color': hex,
|
|
190
|
+
'border-color': hex,
|
|
191
|
+
};
|
|
192
|
+
}
|
|
193
|
+
return {
|
|
194
|
+
'background': `rgba(${r}, ${g}, ${b}, 0.15)`,
|
|
195
|
+
'color': this.lightenHex(r, g, b),
|
|
196
|
+
'border-color': `rgba(${r}, ${g}, ${b}, 0.30)`,
|
|
197
|
+
};
|
|
198
|
+
}
|
|
199
|
+
lightenHex(r, g, b) {
|
|
200
|
+
// Mezcla con blanco al 60% para el texto
|
|
201
|
+
const mix = (c) => Math.round(c + (255 - c) * 0.6);
|
|
202
|
+
return `rgb(${mix(r)}, ${mix(g)}, ${mix(b)})`;
|
|
203
|
+
}
|
|
167
204
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
168
|
-
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", imgLeft: "imgLeft", imgRight: "imgRight", imgLeftAlt: "imgLeftAlt", imgRightAlt: "imgRightAlt", 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 <!-- imagen izquierda (prioridad sobre iconLeft) -->\n <span *ngIf=\"imgLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <img [src]=\"imgLeft\" [alt]=\"imgLeftAlt\" class=\"fs-badge__img\" />\n </span>\n\n <!-- \u00EDcono izquierdo SVG (solo si no hay imgLeft) -->\n <span *ngIf=\"iconLeft && !imgLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path [attr.d]=\"iconLeft\"/>\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 <!-- imagen derecha (prioridad sobre iconRight) -->\n <span *ngIf=\"imgRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <img [src]=\"imgRight\" [alt]=\"imgRightAlt\" class=\"fs-badge__img\" />\n </span>\n\n <!-- \u00EDcono derecho SVG (solo si no hay imgRight) -->\n <span *ngIf=\"iconRight && !imgRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path [attr.d]=\"iconRight\"/>\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)}}.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__img{width:12px;height:12px;object-fit:contain;display:block;flex-shrink:0}.fs-badge--sm .fs-badge__img{width:11px;height:11px}.fs-badge--md .fs-badge__img{width:13px;height:13px}.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 });
|
|
205
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsBadgeComponent, isStandalone: true, selector: "fs-badge", inputs: { color: "color", customColor: "customColor", variant: "variant", size: "size", label: "label", dot: "dot", iconLeft: "iconLeft", iconRight: "iconRight", imgLeft: "imgLeft", imgRight: "imgRight", imgLeftAlt: "imgLeftAlt", imgRightAlt: "imgRightAlt", iconOnly: "iconOnly", removable: "removable" }, outputs: { removed: "removed" }, usesOnChanges: true, ngImport: i0, template: "<span class=\"fs-badge\" [ngClass]=\"classes\" [ngStyle]=\"customStyles\">\n\n <!-- dot de estado -->\n <span *ngIf=\"dot\" class=\"fs-badge__dot\" aria-hidden=\"true\"></span>\n\n <!-- imagen izquierda (prioridad sobre iconLeft) -->\n <span *ngIf=\"imgLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <img [src]=\"imgLeft\" [alt]=\"imgLeftAlt\" class=\"fs-badge__img\" />\n </span>\n\n <!-- \u00EDcono izquierdo SVG (solo si no hay imgLeft) -->\n <span *ngIf=\"iconLeft && !imgLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path [attr.d]=\"iconLeft\"/>\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 <!-- imagen derecha (prioridad sobre iconRight) -->\n <span *ngIf=\"imgRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <img [src]=\"imgRight\" [alt]=\"imgRightAlt\" class=\"fs-badge__img\" />\n </span>\n\n <!-- \u00EDcono derecho SVG (solo si no hay imgRight) -->\n <span *ngIf=\"iconRight && !imgRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path [attr.d]=\"iconRight\"/>\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)}}.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__img{width:12px;height:12px;object-fit:contain;display:block;flex-shrink:0}.fs-badge--sm .fs-badge__img{width:11px;height:11px}.fs-badge--md .fs-badge__img{width:13px;height:13px}.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"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
169
206
|
}
|
|
170
207
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsBadgeComponent, decorators: [{
|
|
171
208
|
type: Component,
|
|
172
|
-
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 <!-- imagen izquierda (prioridad sobre iconLeft) -->\n <span *ngIf=\"imgLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <img [src]=\"imgLeft\" [alt]=\"imgLeftAlt\" class=\"fs-badge__img\" />\n </span>\n\n <!-- \u00EDcono izquierdo SVG (solo si no hay imgLeft) -->\n <span *ngIf=\"iconLeft && !imgLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path [attr.d]=\"iconLeft\"/>\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 <!-- imagen derecha (prioridad sobre iconRight) -->\n <span *ngIf=\"imgRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <img [src]=\"imgRight\" [alt]=\"imgRightAlt\" class=\"fs-badge__img\" />\n </span>\n\n <!-- \u00EDcono derecho SVG (solo si no hay imgRight) -->\n <span *ngIf=\"iconRight && !imgRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path [attr.d]=\"iconRight\"/>\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)}}.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__img{width:12px;height:12px;object-fit:contain;display:block;flex-shrink:0}.fs-badge--sm .fs-badge__img{width:11px;height:11px}.fs-badge--md .fs-badge__img{width:13px;height:13px}.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"] }]
|
|
209
|
+
args: [{ selector: 'fs-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fs-badge\" [ngClass]=\"classes\" [ngStyle]=\"customStyles\">\n\n <!-- dot de estado -->\n <span *ngIf=\"dot\" class=\"fs-badge__dot\" aria-hidden=\"true\"></span>\n\n <!-- imagen izquierda (prioridad sobre iconLeft) -->\n <span *ngIf=\"imgLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <img [src]=\"imgLeft\" [alt]=\"imgLeftAlt\" class=\"fs-badge__img\" />\n </span>\n\n <!-- \u00EDcono izquierdo SVG (solo si no hay imgLeft) -->\n <span *ngIf=\"iconLeft && !imgLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path [attr.d]=\"iconLeft\"/>\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 <!-- imagen derecha (prioridad sobre iconRight) -->\n <span *ngIf=\"imgRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <img [src]=\"imgRight\" [alt]=\"imgRightAlt\" class=\"fs-badge__img\" />\n </span>\n\n <!-- \u00EDcono derecho SVG (solo si no hay imgRight) -->\n <span *ngIf=\"iconRight && !imgRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path [attr.d]=\"iconRight\"/>\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)}}.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__img{width:12px;height:12px;object-fit:contain;display:block;flex-shrink:0}.fs-badge--sm .fs-badge__img{width:11px;height:11px}.fs-badge--md .fs-badge__img{width:13px;height:13px}.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"] }]
|
|
173
210
|
}], propDecorators: { color: [{
|
|
174
211
|
type: Input
|
|
212
|
+
}], customColor: [{
|
|
213
|
+
type: Input
|
|
175
214
|
}], variant: [{
|
|
176
215
|
type: Input
|
|
177
216
|
}], size: [{
|
|
@@ -438,11 +477,11 @@ class FsExperienceCardComponent {
|
|
|
438
477
|
return isNaN(d.getTime()) ? null : d;
|
|
439
478
|
}
|
|
440
479
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsExperienceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
441
|
-
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)}}.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;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", "imgLeft", "imgRight", "imgLeftAlt", "imgRightAlt", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
480
|
+
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 [customColor]=\"badge.customColor\"\n [iconLeft]=\"badge.iconLeft\"\n [imgLeft]=\"badge.imgLeft\"\n [imgLeftAlt]=\"badge.imgLeftAlt || ''\"\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)}}.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;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", "customColor", "variant", "size", "label", "dot", "iconLeft", "iconRight", "imgLeft", "imgRight", "imgLeftAlt", "imgRightAlt", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
442
481
|
}
|
|
443
482
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsExperienceCardComponent, decorators: [{
|
|
444
483
|
type: Component,
|
|
445
|
-
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)}}.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;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"] }]
|
|
484
|
+
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 [customColor]=\"badge.customColor\"\n [iconLeft]=\"badge.iconLeft\"\n [imgLeft]=\"badge.imgLeft\"\n [imgLeftAlt]=\"badge.imgLeftAlt || ''\"\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)}}.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;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"] }]
|
|
446
485
|
}], propDecorators: { experience: [{
|
|
447
486
|
type: Input
|
|
448
487
|
}], variant: [{
|
|
@@ -454,62 +493,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
454
493
|
}] } });
|
|
455
494
|
|
|
456
495
|
class FsProfileCardComponent {
|
|
457
|
-
// -------------------------------------------------------------------------
|
|
458
|
-
// Identidad
|
|
459
|
-
// -------------------------------------------------------------------------
|
|
460
|
-
/** Nombre completo */
|
|
461
496
|
name = '';
|
|
462
|
-
/** Handle sin @ */
|
|
463
497
|
handle = '';
|
|
464
|
-
/** Rol / título */
|
|
465
498
|
role = '';
|
|
466
|
-
/** Muestra el badge de verificado */
|
|
467
499
|
verified = false;
|
|
468
|
-
// -------------------------------------------------------------------------
|
|
469
|
-
// Imágenes
|
|
470
|
-
// -------------------------------------------------------------------------
|
|
471
|
-
/**
|
|
472
|
-
* URL de la foto de perfil.
|
|
473
|
-
* Si no se provee, se muestran las iniciales.
|
|
474
|
-
*/
|
|
475
500
|
avatarUrl;
|
|
476
|
-
/**
|
|
477
|
-
* URL de imagen para el banner.
|
|
478
|
-
* Si no se provee, se usa el degradé navy por defecto.
|
|
479
|
-
*/
|
|
480
501
|
bannerUrl;
|
|
481
|
-
// -------------------------------------------------------------------------
|
|
482
|
-
// Contenido
|
|
483
|
-
// -------------------------------------------------------------------------
|
|
484
|
-
/** Links de redes sociales / ubicación */
|
|
485
502
|
links = [];
|
|
486
|
-
/** Badges de tecnologías */
|
|
487
503
|
badges = [];
|
|
488
|
-
/**
|
|
489
|
-
* Stats configurables: años de exp., proyectos, seguidores, etc.
|
|
490
|
-
* Array de { value, label } — se muestran todos en el footer.
|
|
491
|
-
*/
|
|
492
504
|
stats = [];
|
|
493
|
-
// -------------------------------------------------------------------------
|
|
494
|
-
// Variante
|
|
495
|
-
// -------------------------------------------------------------------------
|
|
496
|
-
/**
|
|
497
|
-
* Muestra los botones de acción (Seguir / Mensaje).
|
|
498
|
-
* false = variante readonly / portfolio propio.
|
|
499
|
-
*/
|
|
500
505
|
showActions = false;
|
|
501
|
-
/** Label del botón primario */
|
|
502
506
|
primaryActionLabel = 'Seguir';
|
|
503
|
-
/** Label del botón secundario */
|
|
504
507
|
secondaryActionLabel = 'Mensaje';
|
|
505
|
-
// -------------------------------------------------------------------------
|
|
506
|
-
// Outputs
|
|
507
|
-
// -------------------------------------------------------------------------
|
|
508
508
|
primaryAction = new EventEmitter();
|
|
509
509
|
secondaryAction = new EventEmitter();
|
|
510
|
-
// -------------------------------------------------------------------------
|
|
511
|
-
// Helpers
|
|
512
|
-
// -------------------------------------------------------------------------
|
|
513
510
|
get initials() {
|
|
514
511
|
return this.name
|
|
515
512
|
.split(' ')
|
|
@@ -519,11 +516,11 @@ class FsProfileCardComponent {
|
|
|
519
516
|
.toUpperCase();
|
|
520
517
|
}
|
|
521
518
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsProfileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
522
|
-
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)}}.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", "imgLeft", "imgRight", "imgLeftAlt", "imgRightAlt", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
519
|
+
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 <!-- imagen del link (prioridad sobre icon SVG) -->\n <img\n *ngIf=\"link.imgUrl\"\n [src]=\"link.imgUrl\"\n [alt]=\"link.imgAlt || ''\"\n class=\"fs-profile__link-img\"\n aria-hidden=\"true\"\n />\n <!-- \u00EDcono SVG (solo si no hay imgUrl) -->\n <svg\n *ngIf=\"link.icon && !link.imgUrl\"\n width=\"12\" height=\"12\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\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 [customColor]=\"badge.customColor\"\n [iconLeft]=\"badge.iconLeft\"\n [imgLeft]=\"badge.imgLeft\"\n [imgLeftAlt]=\"badge.imgLeftAlt || ''\"\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)}}.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__link-img{width:14px;height:14px;object-fit:contain;display:block;flex-shrink:0;opacity:.6;border-radius:2px}.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", "customColor", "variant", "size", "label", "dot", "iconLeft", "iconRight", "imgLeft", "imgRight", "imgLeftAlt", "imgRightAlt", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
523
520
|
}
|
|
524
521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsProfileCardComponent, decorators: [{
|
|
525
522
|
type: Component,
|
|
526
|
-
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)}}.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"] }]
|
|
523
|
+
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 <!-- imagen del link (prioridad sobre icon SVG) -->\n <img\n *ngIf=\"link.imgUrl\"\n [src]=\"link.imgUrl\"\n [alt]=\"link.imgAlt || ''\"\n class=\"fs-profile__link-img\"\n aria-hidden=\"true\"\n />\n <!-- \u00EDcono SVG (solo si no hay imgUrl) -->\n <svg\n *ngIf=\"link.icon && !link.imgUrl\"\n width=\"12\" height=\"12\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\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 [customColor]=\"badge.customColor\"\n [iconLeft]=\"badge.iconLeft\"\n [imgLeft]=\"badge.imgLeft\"\n [imgLeftAlt]=\"badge.imgLeftAlt || ''\"\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)}}.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__link-img{width:14px;height:14px;object-fit:contain;display:block;flex-shrink:0;opacity:.6;border-radius:2px}.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"] }]
|
|
527
524
|
}], propDecorators: { name: [{
|
|
528
525
|
type: Input
|
|
529
526
|
}], handle: [{
|