@heroelc/fsociety 0.0.8 → 0.0.10
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/{src/styles/_mixins.scss → _mixins.scss} +24 -23
- package/{src/styles/_tokens.scss → _tokens.scss} +11 -26
- package/fesm2022/heroelc-fsociety.mjs +38 -16
- package/fesm2022/heroelc-fsociety.mjs.map +1 -1
- package/global.scss +2 -0
- package/lib/badge/badge.component.d.ts +19 -5
- package/lib/button/button.component.d.ts +1 -1
- package/package.json +1 -1
- /package/{src/styles/_index.scss → _index.scss} +0 -0
|
@@ -77,11 +77,11 @@ class FsButtonComponent {
|
|
|
77
77
|
this.fsClick.emit(event);
|
|
78
78
|
}
|
|
79
79
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
80
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsButtonComponent, isStandalone: true, selector: "fs-button", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", loading: "loading", label: "label", iconLeft: "iconLeft", iconRight: "iconRight", fullWidth: "fullWidth" }, outputs: { fsClick: "fsClick" }, host: { properties: { "style.width": "this.hostWidth" } }, ngImport: i0, template: "<button\n class=\"fs-btn\"\n [ngClass]=\"classes\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-disabled]=\"isDisabled\"\n [attr.aria-busy]=\"loading\"\n (click)=\"onClick($event)\"\n>\n <!-- spinner (solo cuando loading) -->\n <span *ngIf=\"loading\" class=\"fs-btn__spinner\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-dasharray=\"28\" stroke-dashoffset=\"10\" />\n </svg>\n </span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft && !loading\" class=\"fs-btn__icon fs-btn__icon--left\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label v\u00EDa input o content projection -->\n <span class=\"fs-btn__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight && !loading\" class=\"fs-btn__icon fs-btn__icon--right\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</button>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;border-radius:6px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;outline:none;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);position:relative;-webkit-user-select:none;user-select:none}.fs-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}.fs-btn--sm{font-size:.75rem;padding:.25rem .75rem;min-height:28px}.fs-btn--md{font-size:.875rem;padding:.5rem 1rem;min-height:36px}.fs-btn--lg{font-size:1rem;padding:.75rem 1.5rem;min-height:44px}.fs-btn--primary{background:var(--fs-primary-base);color:#fff;border-color:var(--fs-primary-base)}.fs-btn--primary:hover:not(:disabled){background:var(--fs-primary-hover);border-color:var(--fs-primary-hover)}.fs-btn--primary:active:not(:disabled){background:var(--fs-primary-active);border-color:var(--fs-primary-active)}.fs-btn--secondary{background:var(--fs-secondary-base);color:#fff;border-color:var(--fs-secondary-base)}.fs-btn--secondary:hover:not(:disabled){background:var(--fs-secondary-hover);border-color:var(--fs-secondary-hover)}.fs-btn--secondary:active:not(:disabled){background:var(--fs-secondary-active);border-color:var(--fs-secondary-active)}.fs-btn--outline{background:transparent;color:var(--fs-primary-base);border-color:var(--fs-primary-base)}.fs-btn--outline:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--outline:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--ghost{background:transparent;color:var(--fs-primary-base);border-color:transparent}.fs-btn--ghost:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--ghost:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--danger{background:var(--fs-danger-base);color:#fff;border-color:var(--fs-danger-base)}.fs-btn--danger:hover:not(:disabled){background:var(--fs-danger-hover);border-color:var(--fs-danger-hover)}.fs-btn--danger:active:not(:disabled){background:var(--fs-danger-active);border-color:var(--fs-danger-active)}.fs-btn--disabled,.fs-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fs-btn--loading{cursor:wait}.fs-btn--loading .fs-btn__label{opacity:.7}.fs-btn--full-width{width:100%}.fs-btn__spinner{display:flex;align-items:center;flex-shrink:0}.fs-btn__spinner svg{animation:fs-spin .35s linear infinite}.fs-btn__icon{display:flex;align-items:center;flex-shrink:0}.fs-btn__icon--left{margin-right:-.25rem}.fs-btn__icon--right{margin-left:-.25rem}.fs-btn__label{display:inline-flex;align-items:center;gap:.25rem;transition:opacity .1s cubic-bezier(.4,0,.2,1)}@keyframes fs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
80
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsButtonComponent, isStandalone: true, selector: "fs-button", inputs: { variant: "variant", size: "size", type: "type", disabled: "disabled", loading: "loading", label: "label", iconLeft: "iconLeft", iconRight: "iconRight", fullWidth: "fullWidth" }, outputs: { fsClick: "fsClick" }, host: { properties: { "style.width": "this.hostWidth" } }, ngImport: i0, template: "<button\n class=\"fs-btn\"\n [ngClass]=\"classes\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-disabled]=\"isDisabled\"\n [attr.aria-busy]=\"loading\"\n (click)=\"onClick($event)\"\n>\n <!-- spinner (solo cuando loading) -->\n <span *ngIf=\"loading\" class=\"fs-btn__spinner\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-dasharray=\"28\" stroke-dashoffset=\"10\" />\n </svg>\n </span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft && !loading\" class=\"fs-btn__icon fs-btn__icon--left\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label v\u00EDa input o content projection -->\n <span class=\"fs-btn__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight && !loading\" class=\"fs-btn__icon fs-btn__icon--right\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</button>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;border-radius:6px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;outline:none;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);position:relative;-webkit-user-select:none;user-select:none}.fs-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}.fs-btn--sm{font-size:.75rem;padding:.25rem .75rem;min-height:28px}.fs-btn--md{font-size:.875rem;padding:.5rem 1rem;min-height:36px}.fs-btn--lg{font-size:1rem;padding:.75rem 1.5rem;min-height:44px}.fs-btn--primary{background:var(--fs-primary-base);color:#fff;border-color:var(--fs-primary-base)}.fs-btn--primary:hover:not(:disabled){background:var(--fs-primary-hover);border-color:var(--fs-primary-hover)}.fs-btn--primary:active:not(:disabled){background:var(--fs-primary-active);border-color:var(--fs-primary-active)}.fs-btn--secondary{background:var(--fs-secondary-base);color:#fff;border-color:var(--fs-secondary-base)}.fs-btn--secondary:hover:not(:disabled){background:var(--fs-secondary-hover);border-color:var(--fs-secondary-hover)}.fs-btn--secondary:active:not(:disabled){background:var(--fs-secondary-active);border-color:var(--fs-secondary-active)}.fs-btn--outline{background:transparent;color:var(--fs-primary-base);border-color:var(--fs-primary-base)}.fs-btn--outline:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--outline:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--ghost{background:transparent;color:var(--fs-primary-base);border-color:transparent}.fs-btn--ghost:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--ghost:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--danger{background:var(--fs-danger-base);color:#fff;border-color:var(--fs-danger-base)}.fs-btn--danger:hover:not(:disabled){background:var(--fs-danger-hover);border-color:var(--fs-danger-hover)}.fs-btn--danger:active:not(:disabled){background:var(--fs-danger-active);border-color:var(--fs-danger-active)}.fs-btn--link{background:transparent;color:var(--fs-primary-base);border-color:transparent;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:1.5px;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),text-decoration-color .1s cubic-bezier(.4,0,.2,1)}.fs-btn--link:hover:not(:disabled){text-decoration-color:var(--fs-primary-base)}.fs-btn--link:active:not(:disabled){color:var(--fs-primary-active);text-decoration-color:var(--fs-primary-active)}.fs-btn--disabled,.fs-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fs-btn--loading{cursor:wait}.fs-btn--loading .fs-btn__label{opacity:.7}.fs-btn--full-width{width:100%}.fs-btn__spinner{display:flex;align-items:center;flex-shrink:0}.fs-btn__spinner svg{animation:fs-spin .35s linear infinite}.fs-btn__icon{display:flex;align-items:center;flex-shrink:0}.fs-btn__icon--left{margin-right:-.25rem}.fs-btn__icon--right{margin-left:-.25rem}.fs-btn__label{display:inline-flex;align-items:center;gap:.25rem;transition:opacity .1s cubic-bezier(.4,0,.2,1)}@keyframes fs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
81
81
|
}
|
|
82
82
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsButtonComponent, decorators: [{
|
|
83
83
|
type: Component,
|
|
84
|
-
args: [{ selector: 'fs-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"fs-btn\"\n [ngClass]=\"classes\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-disabled]=\"isDisabled\"\n [attr.aria-busy]=\"loading\"\n (click)=\"onClick($event)\"\n>\n <!-- spinner (solo cuando loading) -->\n <span *ngIf=\"loading\" class=\"fs-btn__spinner\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-dasharray=\"28\" stroke-dashoffset=\"10\" />\n </svg>\n </span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft && !loading\" class=\"fs-btn__icon fs-btn__icon--left\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label v\u00EDa input o content projection -->\n <span class=\"fs-btn__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight && !loading\" class=\"fs-btn__icon fs-btn__icon--right\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</button>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;border-radius:6px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;outline:none;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);position:relative;-webkit-user-select:none;user-select:none}.fs-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}.fs-btn--sm{font-size:.75rem;padding:.25rem .75rem;min-height:28px}.fs-btn--md{font-size:.875rem;padding:.5rem 1rem;min-height:36px}.fs-btn--lg{font-size:1rem;padding:.75rem 1.5rem;min-height:44px}.fs-btn--primary{background:var(--fs-primary-base);color:#fff;border-color:var(--fs-primary-base)}.fs-btn--primary:hover:not(:disabled){background:var(--fs-primary-hover);border-color:var(--fs-primary-hover)}.fs-btn--primary:active:not(:disabled){background:var(--fs-primary-active);border-color:var(--fs-primary-active)}.fs-btn--secondary{background:var(--fs-secondary-base);color:#fff;border-color:var(--fs-secondary-base)}.fs-btn--secondary:hover:not(:disabled){background:var(--fs-secondary-hover);border-color:var(--fs-secondary-hover)}.fs-btn--secondary:active:not(:disabled){background:var(--fs-secondary-active);border-color:var(--fs-secondary-active)}.fs-btn--outline{background:transparent;color:var(--fs-primary-base);border-color:var(--fs-primary-base)}.fs-btn--outline:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--outline:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--ghost{background:transparent;color:var(--fs-primary-base);border-color:transparent}.fs-btn--ghost:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--ghost:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--danger{background:var(--fs-danger-base);color:#fff;border-color:var(--fs-danger-base)}.fs-btn--danger:hover:not(:disabled){background:var(--fs-danger-hover);border-color:var(--fs-danger-hover)}.fs-btn--danger:active:not(:disabled){background:var(--fs-danger-active);border-color:var(--fs-danger-active)}.fs-btn--disabled,.fs-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fs-btn--loading{cursor:wait}.fs-btn--loading .fs-btn__label{opacity:.7}.fs-btn--full-width{width:100%}.fs-btn__spinner{display:flex;align-items:center;flex-shrink:0}.fs-btn__spinner svg{animation:fs-spin .35s linear infinite}.fs-btn__icon{display:flex;align-items:center;flex-shrink:0}.fs-btn__icon--left{margin-right:-.25rem}.fs-btn__icon--right{margin-left:-.25rem}.fs-btn__label{display:inline-flex;align-items:center;gap:.25rem;transition:opacity .1s cubic-bezier(.4,0,.2,1)}@keyframes fs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
84
|
+
args: [{ selector: 'fs-button', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"fs-btn\"\n [ngClass]=\"classes\"\n [type]=\"type\"\n [disabled]=\"isDisabled\"\n [attr.aria-disabled]=\"isDisabled\"\n [attr.aria-busy]=\"loading\"\n (click)=\"onClick($event)\"\n>\n <!-- spinner (solo cuando loading) -->\n <span *ngIf=\"loading\" class=\"fs-btn__spinner\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <circle cx=\"8\" cy=\"8\" r=\"6\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-dasharray=\"28\" stroke-dashoffset=\"10\" />\n </svg>\n </span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft && !loading\" class=\"fs-btn__icon fs-btn__icon--left\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label v\u00EDa input o content projection -->\n <span class=\"fs-btn__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight && !loading\" class=\"fs-btn__icon fs-btn__icon--right\" aria-hidden=\"true\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n</button>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}.fs-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1.5px solid transparent;border-radius:6px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;line-height:1;cursor:pointer;text-decoration:none;white-space:nowrap;outline:none;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);position:relative;-webkit-user-select:none;user-select:none}.fs-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}.fs-btn--sm{font-size:.75rem;padding:.25rem .75rem;min-height:28px}.fs-btn--md{font-size:.875rem;padding:.5rem 1rem;min-height:36px}.fs-btn--lg{font-size:1rem;padding:.75rem 1.5rem;min-height:44px}.fs-btn--primary{background:var(--fs-primary-base);color:#fff;border-color:var(--fs-primary-base)}.fs-btn--primary:hover:not(:disabled){background:var(--fs-primary-hover);border-color:var(--fs-primary-hover)}.fs-btn--primary:active:not(:disabled){background:var(--fs-primary-active);border-color:var(--fs-primary-active)}.fs-btn--secondary{background:var(--fs-secondary-base);color:#fff;border-color:var(--fs-secondary-base)}.fs-btn--secondary:hover:not(:disabled){background:var(--fs-secondary-hover);border-color:var(--fs-secondary-hover)}.fs-btn--secondary:active:not(:disabled){background:var(--fs-secondary-active);border-color:var(--fs-secondary-active)}.fs-btn--outline{background:transparent;color:var(--fs-primary-base);border-color:var(--fs-primary-base)}.fs-btn--outline:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--outline:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--ghost{background:transparent;color:var(--fs-primary-base);border-color:transparent}.fs-btn--ghost:hover:not(:disabled){background:var(--fs-primary-muted)}.fs-btn--ghost:active:not(:disabled){background:var(--fs-primary-subtle)}.fs-btn--danger{background:var(--fs-danger-base);color:#fff;border-color:var(--fs-danger-base)}.fs-btn--danger:hover:not(:disabled){background:var(--fs-danger-hover);border-color:var(--fs-danger-hover)}.fs-btn--danger:active:not(:disabled){background:var(--fs-danger-active);border-color:var(--fs-danger-active)}.fs-btn--link{background:transparent;color:var(--fs-primary-base);border-color:transparent;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:1.5px;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),text-decoration-color .1s cubic-bezier(.4,0,.2,1)}.fs-btn--link:hover:not(:disabled){text-decoration-color:var(--fs-primary-base)}.fs-btn--link:active:not(:disabled){color:var(--fs-primary-active);text-decoration-color:var(--fs-primary-active)}.fs-btn--disabled,.fs-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.fs-btn--loading{cursor:wait}.fs-btn--loading .fs-btn__label{opacity:.7}.fs-btn--full-width{width:100%}.fs-btn__spinner{display:flex;align-items:center;flex-shrink:0}.fs-btn__spinner svg{animation:fs-spin .35s linear infinite}.fs-btn__icon{display:flex;align-items:center;flex-shrink:0}.fs-btn__icon--left{margin-right:-.25rem}.fs-btn__icon--right{margin-left:-.25rem}.fs-btn__label{display:inline-flex;align-items:center;gap:.25rem;transition:opacity .1s cubic-bezier(.4,0,.2,1)}@keyframes fs-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
85
85
|
}], propDecorators: { variant: [{
|
|
86
86
|
type: Input
|
|
87
87
|
}], size: [{
|
|
@@ -119,17 +119,31 @@ class FsBadgeComponent {
|
|
|
119
119
|
/** Muestra punto de estado a la izquierda */
|
|
120
120
|
dot = false;
|
|
121
121
|
/**
|
|
122
|
-
* SVG path del ícono izquierdo.
|
|
123
|
-
* Ejemplo: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10...'
|
|
122
|
+
* SVG path del ícono izquierdo (viewBox 0 0 24 24).
|
|
124
123
|
*/
|
|
125
124
|
iconLeft;
|
|
126
125
|
/**
|
|
127
|
-
* SVG path del ícono derecho.
|
|
126
|
+
* SVG path del ícono derecho (viewBox 0 0 24 24).
|
|
128
127
|
*/
|
|
129
128
|
iconRight;
|
|
129
|
+
/**
|
|
130
|
+
* URL o ruta de imagen izquierda.
|
|
131
|
+
* Ejemplo: 'assets/icons/angular.svg' o 'https://...'
|
|
132
|
+
* Tiene prioridad sobre iconLeft si ambos están definidos.
|
|
133
|
+
*/
|
|
134
|
+
imgLeft;
|
|
135
|
+
/**
|
|
136
|
+
* URL o ruta de imagen derecha.
|
|
137
|
+
* Tiene prioridad sobre iconRight si ambos están definidos.
|
|
138
|
+
*/
|
|
139
|
+
imgRight;
|
|
140
|
+
/** Alt text para imgLeft — por defecto vacío (decorativo) */
|
|
141
|
+
imgLeftAlt = '';
|
|
142
|
+
/** Alt text para imgRight — por defecto vacío (decorativo) */
|
|
143
|
+
imgRightAlt = '';
|
|
130
144
|
/**
|
|
131
145
|
* Modo solo ícono — oculta el label y hace el badge cuadrado/circular.
|
|
132
|
-
* Requiere iconLeft o
|
|
146
|
+
* Requiere iconLeft, iconRight, imgLeft o imgRight.
|
|
133
147
|
*/
|
|
134
148
|
iconOnly = false;
|
|
135
149
|
/** Badge removible — muestra botón X */
|
|
@@ -151,11 +165,11 @@ class FsBadgeComponent {
|
|
|
151
165
|
this.removed.emit();
|
|
152
166
|
}
|
|
153
167
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
154
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsBadgeComponent, isStandalone: true, selector: "fs-badge", inputs: { color: "color", variant: "variant", size: "size", label: "label", dot: "dot", iconLeft: "iconLeft", iconRight: "iconRight", iconOnly: "iconOnly", removable: "removable" }, outputs: { removed: "removed" }, ngImport: i0, template: "<span class=\"fs-badge\" [ngClass]=\"classes\">\n\n <!-- dot de estado -->\n <span *ngIf=\"dot\" class=\"fs-badge__dot\" aria-hidden=\"true\"></span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label \u2014 oculto en iconOnly -->\n <span *ngIf=\"!iconOnly\" class=\"fs-badge__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- bot\u00F3n remove -->\n <button\n *ngIf=\"removable\"\n class=\"fs-badge__remove\"\n type=\"button\"\n aria-label=\"Remover\"\n (click)=\"onRemove($event)\"\n >\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 2l6 6M8 2L2 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n</span>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;white-space:nowrap;border:1px solid transparent;line-height:1}.fs-badge--sm{font-size:.75rem;padding:.25rem .75rem}.fs-badge--sm .fs-badge__icon svg{width:11px;height:11px}.fs-badge--md{font-size:.875rem;padding:.25rem .75rem}.fs-badge--md .fs-badge__icon svg{width:13px;height:13px}.fs-badge--icon-only{padding:.25rem!important;justify-content:center}.fs-badge--icon-only.fs-badge--sm{width:24px;height:24px}.fs-badge--icon-only.fs-badge--md{width:28px;height:28px}.fs-badge--primary.fs-badge--filled{background:var(--fs-primary-50);color:var(--fs-primary-800);border-color:var(--fs-primary-200)}.fs-badge--primary.fs-badge--outline{background:transparent;color:var(--fs-primary-500);border-color:var(--fs-primary-500)}.fs-badge--primary .fs-badge__dot{background:var(--fs-primary-500)}.fs-badge--secondary.fs-badge--filled{background:var(--fs-secondary-50);color:var(--fs-secondary-800);border-color:var(--fs-secondary-200)}.fs-badge--secondary.fs-badge--outline{background:transparent;color:var(--fs-secondary-500);border-color:var(--fs-secondary-500)}.fs-badge--secondary .fs-badge__dot{background:var(--fs-secondary-500)}.fs-badge--tertiary.fs-badge--filled{background:var(--fs-tertiary-50);color:var(--fs-tertiary-800);border-color:var(--fs-tertiary-200)}.fs-badge--tertiary.fs-badge--outline{background:transparent;color:var(--fs-tertiary-500);border-color:var(--fs-tertiary-500)}.fs-badge--tertiary .fs-badge__dot{background:var(--fs-tertiary-500)}.fs-badge--success.fs-badge--filled{background:var(--fs-success-50);color:var(--fs-success-800);border-color:var(--fs-success-200)}.fs-badge--success.fs-badge--outline{background:transparent;color:var(--fs-success-500);border-color:var(--fs-success-500)}.fs-badge--success .fs-badge__dot{background:var(--fs-success-500)}.fs-badge--warning.fs-badge--filled{background:var(--fs-warning-50);color:var(--fs-warning-800);border-color:var(--fs-warning-200)}.fs-badge--warning.fs-badge--outline{background:transparent;color:var(--fs-warning-500);border-color:var(--fs-warning-500)}.fs-badge--warning .fs-badge__dot{background:var(--fs-warning-500)}.fs-badge--danger.fs-badge--filled{background:var(--fs-danger-50);color:var(--fs-danger-800);border-color:var(--fs-danger-200)}.fs-badge--danger.fs-badge--outline{background:transparent;color:var(--fs-danger-500);border-color:var(--fs-danger-500)}.fs-badge--danger .fs-badge__dot{background:var(--fs-danger-500)}.fs-badge--neutral.fs-badge--filled{background:var(--fs-neutral-50);color:var(--fs-neutral-800);border-color:var(--fs-neutral-200)}.fs-badge--neutral.fs-badge--outline{background:transparent;color:var(--fs-neutral-500);border-color:var(--fs-neutral-500)}.fs-badge--neutral .fs-badge__dot{background:var(--fs-neutral-500)}.fs-badge__dot{width:7px;height:7px;border-radius:9999px;flex-shrink:0}.fs-badge__icon{display:inline-flex;align-items:center;flex-shrink:0}.fs-badge__label{display:inline-flex;align-items:center}.fs-badge__remove{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;color:inherit;opacity:.55;border-radius:9999px;transition:opacity .1s cubic-bezier(.4,0,.2,1);margin-left:2px}.fs-badge__remove:hover{opacity:1}.fs-badge__remove:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
155
169
|
}
|
|
156
170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsBadgeComponent, decorators: [{
|
|
157
171
|
type: Component,
|
|
158
|
-
args: [{ selector: 'fs-badge', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"fs-badge\" [ngClass]=\"classes\">\n\n <!-- dot de estado -->\n <span *ngIf=\"dot\" class=\"fs-badge__dot\" aria-hidden=\"true\"></span>\n\n <!-- \u00EDcono izquierdo -->\n <span *ngIf=\"iconLeft\" class=\"fs-badge__icon fs-badge__icon--left\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconLeft\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- label \u2014 oculto en iconOnly -->\n <span *ngIf=\"!iconOnly\" class=\"fs-badge__label\">\n <ng-content>{{ label }}</ng-content>\n </span>\n\n <!-- \u00EDcono derecho -->\n <span *ngIf=\"iconRight\" class=\"fs-badge__icon fs-badge__icon--right\" aria-hidden=\"true\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"iconRight\" stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n\n <!-- bot\u00F3n remove -->\n <button\n *ngIf=\"removable\"\n class=\"fs-badge__remove\"\n type=\"button\"\n aria-label=\"Remover\"\n (click)=\"onRemove($event)\"\n >\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 2l6 6M8 2L2 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n </button>\n\n</span>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-badge{display:inline-flex;align-items:center;gap:.25rem;border-radius:9999px;font-family:Inter,Segoe UI,system-ui,sans-serif;font-weight:500;white-space:nowrap;border:1px solid transparent;line-height:1}.fs-badge--sm{font-size:.75rem;padding:.25rem .75rem}.fs-badge--sm .fs-badge__icon svg{width:11px;height:11px}.fs-badge--md{font-size:.875rem;padding:.25rem .75rem}.fs-badge--md .fs-badge__icon svg{width:13px;height:13px}.fs-badge--icon-only{padding:.25rem!important;justify-content:center}.fs-badge--icon-only.fs-badge--sm{width:24px;height:24px}.fs-badge--icon-only.fs-badge--md{width:28px;height:28px}.fs-badge--primary.fs-badge--filled{background:var(--fs-primary-50);color:var(--fs-primary-800);border-color:var(--fs-primary-200)}.fs-badge--primary.fs-badge--outline{background:transparent;color:var(--fs-primary-500);border-color:var(--fs-primary-500)}.fs-badge--primary .fs-badge__dot{background:var(--fs-primary-500)}.fs-badge--secondary.fs-badge--filled{background:var(--fs-secondary-50);color:var(--fs-secondary-800);border-color:var(--fs-secondary-200)}.fs-badge--secondary.fs-badge--outline{background:transparent;color:var(--fs-secondary-500);border-color:var(--fs-secondary-500)}.fs-badge--secondary .fs-badge__dot{background:var(--fs-secondary-500)}.fs-badge--tertiary.fs-badge--filled{background:var(--fs-tertiary-50);color:var(--fs-tertiary-800);border-color:var(--fs-tertiary-200)}.fs-badge--tertiary.fs-badge--outline{background:transparent;color:var(--fs-tertiary-500);border-color:var(--fs-tertiary-500)}.fs-badge--tertiary .fs-badge__dot{background:var(--fs-tertiary-500)}.fs-badge--success.fs-badge--filled{background:var(--fs-success-50);color:var(--fs-success-800);border-color:var(--fs-success-200)}.fs-badge--success.fs-badge--outline{background:transparent;color:var(--fs-success-500);border-color:var(--fs-success-500)}.fs-badge--success .fs-badge__dot{background:var(--fs-success-500)}.fs-badge--warning.fs-badge--filled{background:var(--fs-warning-50);color:var(--fs-warning-800);border-color:var(--fs-warning-200)}.fs-badge--warning.fs-badge--outline{background:transparent;color:var(--fs-warning-500);border-color:var(--fs-warning-500)}.fs-badge--warning .fs-badge__dot{background:var(--fs-warning-500)}.fs-badge--danger.fs-badge--filled{background:var(--fs-danger-50);color:var(--fs-danger-800);border-color:var(--fs-danger-200)}.fs-badge--danger.fs-badge--outline{background:transparent;color:var(--fs-danger-500);border-color:var(--fs-danger-500)}.fs-badge--danger .fs-badge__dot{background:var(--fs-danger-500)}.fs-badge--neutral.fs-badge--filled{background:var(--fs-neutral-50);color:var(--fs-neutral-800);border-color:var(--fs-neutral-200)}.fs-badge--neutral.fs-badge--outline{background:transparent;color:var(--fs-neutral-500);border-color:var(--fs-neutral-500)}.fs-badge--neutral .fs-badge__dot{background:var(--fs-neutral-500)}.fs-badge__dot{width:7px;height:7px;border-radius:9999px;flex-shrink:0}.fs-badge__icon{display:inline-flex;align-items:center;flex-shrink:0}.fs-badge__label{display:inline-flex;align-items:center}.fs-badge__remove{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;padding:0;cursor:pointer;color:inherit;opacity:.55;border-radius:9999px;transition:opacity .1s cubic-bezier(.4,0,.2,1);margin-left:2px}.fs-badge__remove:hover{opacity:1}.fs-badge__remove:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px #2563eb}\n"] }]
|
|
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"] }]
|
|
159
173
|
}], propDecorators: { color: [{
|
|
160
174
|
type: Input
|
|
161
175
|
}], variant: [{
|
|
@@ -170,6 +184,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
170
184
|
type: Input
|
|
171
185
|
}], iconRight: [{
|
|
172
186
|
type: Input
|
|
187
|
+
}], imgLeft: [{
|
|
188
|
+
type: Input
|
|
189
|
+
}], imgRight: [{
|
|
190
|
+
type: Input
|
|
191
|
+
}], imgLeftAlt: [{
|
|
192
|
+
type: Input
|
|
193
|
+
}], imgRightAlt: [{
|
|
194
|
+
type: Input
|
|
173
195
|
}], iconOnly: [{
|
|
174
196
|
type: Input
|
|
175
197
|
}], removable: [{
|
|
@@ -240,11 +262,11 @@ class FsTabsComponent {
|
|
|
240
262
|
this.cdr.markForCheck();
|
|
241
263
|
}
|
|
242
264
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsTabsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
|
|
243
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsTabsComponent, isStandalone: true, selector: "fs-tabs", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabsRow", first: true, predicate: ["tabsRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fs-tabs\">\n\n <!-- encabezado -->\n <div class=\"fs-tabs__header\" #tabsRow role=\"tablist\">\n\n <button\n *ngFor=\"let tab of tabs\"\n class=\"fs-tabs__item\"\n [class.fs-tabs__item--active]=\"isActive(tab)\"\n [class.fs-tabs__item--disabled]=\"tab.disabled\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n {{ tab.label }}\n </button>\n\n <!-- indicator deslizante -->\n <span\n class=\"fs-tabs__indicator\"\n [style.left.px]=\"indicatorLeft\"\n [style.width.px]=\"indicatorWidth\"\n aria-hidden=\"true\"\n ></span>\n\n </div>\n\n <!-- contenido v\u00EDa content projection -->\n <div class=\"fs-tabs__content\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-tabs{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45);--fs-tab-radius: 8px;display:flex;flex-direction:column;width:100%}.fs-tabs__header{display:flex;position:relative;width:100%;background:var(--fs-tab-bg);border-radius:var(--fs-tab-radius) var(--fs-tab-radius) 0 0;border-bottom:1px solid var(--fs-tab-border);overflow:hidden}.fs-tabs__item{flex:1;padding:14px 8px;font-size:.875rem;font-weight:500;color:var(--fs-tab-color);background:transparent;border:none;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;line-height:1}.fs-tabs__item:hover:not(.fs-tabs__item--disabled):not(.fs-tabs__item--active){color:var(--fs-tab-color-hover);background:var(--fs-tab-hover-bg)}.fs-tabs__item--active{color:var(--fs-tab-color-active);font-weight:600}.fs-tabs__item--disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.fs-tabs__item:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-tabs__indicator{position:absolute;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--fs-tab-indicator-from) 0%,var(--fs-tab-indicator-to) 100%);box-shadow:0 0 10px var(--fs-tab-indicator-glow);transition:left .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1)}.fs-tabs__content{flex:1;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsTabsComponent, isStandalone: true, selector: "fs-tabs", inputs: { tabs: "tabs", activeTab: "activeTab" }, outputs: { activeTabChange: "activeTabChange", tabChange: "tabChange" }, viewQueries: [{ propertyName: "tabsRow", first: true, predicate: ["tabsRow"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fs-tabs\">\n\n <!-- encabezado -->\n <div class=\"fs-tabs__header\" #tabsRow role=\"tablist\">\n\n <button\n *ngFor=\"let tab of tabs\"\n class=\"fs-tabs__item\"\n [class.fs-tabs__item--active]=\"isActive(tab)\"\n [class.fs-tabs__item--disabled]=\"tab.disabled\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n {{ tab.label }}\n </button>\n\n <!-- indicator deslizante -->\n <span\n class=\"fs-tabs__indicator\"\n [style.left.px]=\"indicatorLeft\"\n [style.width.px]=\"indicatorWidth\"\n aria-hidden=\"true\"\n ></span>\n\n </div>\n\n <!-- contenido v\u00EDa content projection -->\n <div class=\"fs-tabs__content\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}.fs-tabs{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45);--fs-tab-radius: 8px;display:flex;flex-direction:column;width:100%}.fs-tabs__header{display:flex;position:relative;width:100%;background:var(--fs-tab-bg);border-radius:var(--fs-tab-radius) var(--fs-tab-radius) 0 0;border-bottom:1px solid var(--fs-tab-border);overflow:hidden}.fs-tabs__item{flex:1;padding:14px 8px;font-size:.875rem;font-weight:500;color:var(--fs-tab-color);background:transparent;border:none;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;line-height:1}.fs-tabs__item:hover:not(.fs-tabs__item--disabled):not(.fs-tabs__item--active){color:var(--fs-tab-color-hover);background:var(--fs-tab-hover-bg)}.fs-tabs__item--active{color:var(--fs-tab-color-active);font-weight:600}.fs-tabs__item--disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.fs-tabs__item:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-tabs__indicator{position:absolute;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--fs-tab-indicator-from) 0%,var(--fs-tab-indicator-to) 100%);box-shadow:0 0 10px var(--fs-tab-indicator-glow);transition:left .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1)}.fs-tabs__content{flex:1;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
244
266
|
}
|
|
245
267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsTabsComponent, decorators: [{
|
|
246
268
|
type: Component,
|
|
247
|
-
args: [{ selector: 'fs-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fs-tabs\">\n\n <!-- encabezado -->\n <div class=\"fs-tabs__header\" #tabsRow role=\"tablist\">\n\n <button\n *ngFor=\"let tab of tabs\"\n class=\"fs-tabs__item\"\n [class.fs-tabs__item--active]=\"isActive(tab)\"\n [class.fs-tabs__item--disabled]=\"tab.disabled\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n {{ tab.label }}\n </button>\n\n <!-- indicator deslizante -->\n <span\n class=\"fs-tabs__indicator\"\n [style.left.px]=\"indicatorLeft\"\n [style.width.px]=\"indicatorWidth\"\n aria-hidden=\"true\"\n ></span>\n\n </div>\n\n <!-- contenido v\u00EDa content projection -->\n <div class=\"fs-tabs__content\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-tabs{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45);--fs-tab-radius: 8px;display:flex;flex-direction:column;width:100%}.fs-tabs__header{display:flex;position:relative;width:100%;background:var(--fs-tab-bg);border-radius:var(--fs-tab-radius) var(--fs-tab-radius) 0 0;border-bottom:1px solid var(--fs-tab-border);overflow:hidden}.fs-tabs__item{flex:1;padding:14px 8px;font-size:.875rem;font-weight:500;color:var(--fs-tab-color);background:transparent;border:none;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;line-height:1}.fs-tabs__item:hover:not(.fs-tabs__item--disabled):not(.fs-tabs__item--active){color:var(--fs-tab-color-hover);background:var(--fs-tab-hover-bg)}.fs-tabs__item--active{color:var(--fs-tab-color-active);font-weight:600}.fs-tabs__item--disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.fs-tabs__item:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-tabs__indicator{position:absolute;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--fs-tab-indicator-from) 0%,var(--fs-tab-indicator-to) 100%);box-shadow:0 0 10px var(--fs-tab-indicator-glow);transition:left .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1)}.fs-tabs__content{flex:1;width:100%}\n"] }]
|
|
269
|
+
args: [{ selector: 'fs-tabs', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fs-tabs\">\n\n <!-- encabezado -->\n <div class=\"fs-tabs__header\" #tabsRow role=\"tablist\">\n\n <button\n *ngFor=\"let tab of tabs\"\n class=\"fs-tabs__item\"\n [class.fs-tabs__item--active]=\"isActive(tab)\"\n [class.fs-tabs__item--disabled]=\"tab.disabled\"\n role=\"tab\"\n [attr.aria-selected]=\"isActive(tab)\"\n [attr.aria-disabled]=\"tab.disabled\"\n [disabled]=\"tab.disabled\"\n (click)=\"selectTab(tab)\"\n >\n {{ tab.label }}\n </button>\n\n <!-- indicator deslizante -->\n <span\n class=\"fs-tabs__indicator\"\n [style.left.px]=\"indicatorLeft\"\n [style.width.px]=\"indicatorWidth\"\n aria-hidden=\"true\"\n ></span>\n\n </div>\n\n <!-- contenido v\u00EDa content projection -->\n <div class=\"fs-tabs__content\" role=\"tabpanel\">\n <ng-content></ng-content>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}.fs-tabs{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45);--fs-tab-radius: 8px;display:flex;flex-direction:column;width:100%}.fs-tabs__header{display:flex;position:relative;width:100%;background:var(--fs-tab-bg);border-radius:var(--fs-tab-radius) var(--fs-tab-radius) 0 0;border-bottom:1px solid var(--fs-tab-border);overflow:hidden}.fs-tabs__item{flex:1;padding:14px 8px;font-size:.875rem;font-weight:500;color:var(--fs-tab-color);background:transparent;border:none;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;position:relative;z-index:1;transition:color .2s cubic-bezier(.4,0,.2,1),background .1s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none;line-height:1}.fs-tabs__item:hover:not(.fs-tabs__item--disabled):not(.fs-tabs__item--active){color:var(--fs-tab-color-hover);background:var(--fs-tab-hover-bg)}.fs-tabs__item--active{color:var(--fs-tab-color-active);font-weight:600}.fs-tabs__item--disabled{opacity:.3;cursor:not-allowed;pointer-events:none}.fs-tabs__item:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-tabs__indicator{position:absolute;bottom:0;height:2px;border-radius:2px 2px 0 0;background:linear-gradient(90deg,var(--fs-tab-indicator-from) 0%,var(--fs-tab-indicator-to) 100%);box-shadow:0 0 10px var(--fs-tab-indicator-glow);transition:left .26s cubic-bezier(.4,0,.2,1),width .26s cubic-bezier(.4,0,.2,1)}.fs-tabs__content{flex:1;width:100%}\n"] }]
|
|
248
270
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { tabs: [{
|
|
249
271
|
type: Input
|
|
250
272
|
}], activeTab: [{
|
|
@@ -320,11 +342,11 @@ class FsAlertComponent {
|
|
|
320
342
|
return icons[this.type];
|
|
321
343
|
}
|
|
322
344
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsAlertComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
323
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsAlertComponent, isStandalone: true, selector: "fs-alert", inputs: { type: "type", variant: "variant", title: "title", dismissible: "dismissible", autoDismiss: "autoDismiss" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"animState !== 'exiting' || true\"\n class=\"fs-alert\"\n [class.fs-alert--entering]=\"animState === 'entering'\"\n [class.fs-alert--visible]=\"animState === 'visible'\"\n [class.fs-alert--exiting]=\"animState === 'exiting'\"\n [class]=\"'fs-alert fs-alert--' + type + ' fs-alert--' + variant\"\n [attr.role]=\"type === 'danger' ? 'alert' : 'status'\"\n [attr.aria-live]=\"type === 'danger' ? 'assertive' : 'polite'\"\n>\n\n <!-- \u00EDcono sem\u00E1ntico -->\n <svg\n class=\"fs-alert__icon\"\n width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n [attr.d]=\"iconPath\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- cuerpo -->\n <div class=\"fs-alert__body\">\n <div *ngIf=\"title\" class=\"fs-alert__title\">{{ title }}</div>\n <div class=\"fs-alert__desc\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- bot\u00F3n cerrar -->\n <button\n *ngIf=\"dismissible\"\n class=\"fs-alert__close\"\n type=\"button\"\n aria-label=\"Cerrar\"\n (click)=\"dismiss()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M3 3l8 8M11 3L3 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n\n <!-- progress bar de auto-dismiss -->\n <div\n *ngIf=\"autoDismiss > 0\"\n class=\"fs-alert__progress\"\n [style.animation-duration]=\"progressDuration\"\n ></div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}@keyframes fs-alert-in{0%{opacity:0;transform:translateY(-10px);max-height:0;padding:0 1rem}to{opacity:1;transform:translateY(0);max-height:300px}}@keyframes fs-alert-out{0%{opacity:1;transform:translateY(0);max-height:300px;margin-bottom:0}to{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}}@keyframes fs-alert-progress{0%{width:100%}to{width:0%}}.fs-alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:8px;padding:.75rem 1rem;border:.5px solid transparent;position:relative;overflow:hidden;width:100%}.fs-alert--entering{animation:fs-alert-in .28s cubic-bezier(.4,0,.2,1) forwards}.fs-alert--visible{opacity:1;transform:translateY(0)}.fs-alert--exiting{animation:fs-alert-out .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.fs-alert--info.fs-alert--filled{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd}.fs-alert--info.fs-alert--filled .fs-alert__progress{background:#2563eb}.fs-alert--info.fs-alert--accent{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd;border-left:3px solid #2563eb;border-radius:0 8px 8px 0}.fs-alert--info.fs-alert--accent .fs-alert__progress{background:#2563eb}.fs-alert--success.fs-alert--filled{background:#22c55e1a;border-color:#22c55e4d;color:#86efac}.fs-alert--success.fs-alert--filled .fs-alert__progress{background:#22c55e}.fs-alert--success.fs-alert--accent{background:#22c55e1a;border-color:#22c55e4d;color:#86efac;border-left:3px solid #22c55e;border-radius:0 8px 8px 0}.fs-alert--success.fs-alert--accent .fs-alert__progress{background:#22c55e}.fs-alert--warning.fs-alert--filled{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d}.fs-alert--warning.fs-alert--filled .fs-alert__progress{background:#f59e0b}.fs-alert--warning.fs-alert--accent{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d;border-left:3px solid #f59e0b;border-radius:0 8px 8px 0}.fs-alert--warning.fs-alert--accent .fs-alert__progress{background:#f59e0b}.fs-alert--danger.fs-alert--filled{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185}.fs-alert--danger.fs-alert--filled .fs-alert__progress{background:#f43f5e}.fs-alert--danger.fs-alert--accent{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185;border-left:3px solid #f43f5e;border-radius:0 8px 8px 0}.fs-alert--danger.fs-alert--accent .fs-alert__progress{background:#f43f5e}.fs-alert--neutral.fs-alert--filled{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3}.fs-alert--neutral.fs-alert--filled .fs-alert__progress{background:#ffffff4d}.fs-alert--neutral.fs-alert--accent{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3;border-left:3px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0}.fs-alert--neutral.fs-alert--accent .fs-alert__progress{background:#ffffff4d}.fs-alert__icon{flex-shrink:0;margin-top:1px;stroke:currentColor}.fs-alert__body{flex:1;min-width:0}.fs-alert__title{font-size:.875rem;font-weight:600;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px;line-height:1.4}.fs-alert__desc{font-size:.75rem;font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1.6;opacity:.85}.fs-alert__desc code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:11px;background:#ffffff14;padding:1px 5px;border-radius:4px}.fs-alert__close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0;flex-shrink:0;border-radius:4px;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-alert__close:hover{opacity:1}.fs-alert__close:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}.fs-alert__progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 8px;animation:fs-alert-progress linear forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
345
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsAlertComponent, isStandalone: true, selector: "fs-alert", inputs: { type: "type", variant: "variant", title: "title", dismissible: "dismissible", autoDismiss: "autoDismiss" }, outputs: { dismissed: "dismissed" }, ngImport: i0, template: "<div\n *ngIf=\"animState !== 'exiting' || true\"\n class=\"fs-alert\"\n [class.fs-alert--entering]=\"animState === 'entering'\"\n [class.fs-alert--visible]=\"animState === 'visible'\"\n [class.fs-alert--exiting]=\"animState === 'exiting'\"\n [class]=\"'fs-alert fs-alert--' + type + ' fs-alert--' + variant\"\n [attr.role]=\"type === 'danger' ? 'alert' : 'status'\"\n [attr.aria-live]=\"type === 'danger' ? 'assertive' : 'polite'\"\n>\n\n <!-- \u00EDcono sem\u00E1ntico -->\n <svg\n class=\"fs-alert__icon\"\n width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n [attr.d]=\"iconPath\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- cuerpo -->\n <div class=\"fs-alert__body\">\n <div *ngIf=\"title\" class=\"fs-alert__title\">{{ title }}</div>\n <div class=\"fs-alert__desc\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- bot\u00F3n cerrar -->\n <button\n *ngIf=\"dismissible\"\n class=\"fs-alert__close\"\n type=\"button\"\n aria-label=\"Cerrar\"\n (click)=\"dismiss()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M3 3l8 8M11 3L3 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n\n <!-- progress bar de auto-dismiss -->\n <div\n *ngIf=\"autoDismiss > 0\"\n class=\"fs-alert__progress\"\n [style.animation-duration]=\"progressDuration\"\n ></div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}@keyframes fs-alert-in{0%{opacity:0;transform:translateY(-10px);max-height:0;padding:0 1rem}to{opacity:1;transform:translateY(0);max-height:300px}}@keyframes fs-alert-out{0%{opacity:1;transform:translateY(0);max-height:300px;margin-bottom:0}to{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}}@keyframes fs-alert-progress{0%{width:100%}to{width:0%}}.fs-alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:8px;padding:.75rem 1rem;border:.5px solid transparent;position:relative;overflow:hidden;width:100%}.fs-alert--entering{animation:fs-alert-in .28s cubic-bezier(.4,0,.2,1) forwards}.fs-alert--visible{opacity:1;transform:translateY(0)}.fs-alert--exiting{animation:fs-alert-out .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.fs-alert--info.fs-alert--filled{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd}.fs-alert--info.fs-alert--filled .fs-alert__progress{background:#2563eb}.fs-alert--info.fs-alert--accent{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd;border-left:3px solid #2563eb;border-radius:0 8px 8px 0}.fs-alert--info.fs-alert--accent .fs-alert__progress{background:#2563eb}.fs-alert--success.fs-alert--filled{background:#22c55e1a;border-color:#22c55e4d;color:#86efac}.fs-alert--success.fs-alert--filled .fs-alert__progress{background:#22c55e}.fs-alert--success.fs-alert--accent{background:#22c55e1a;border-color:#22c55e4d;color:#86efac;border-left:3px solid #22c55e;border-radius:0 8px 8px 0}.fs-alert--success.fs-alert--accent .fs-alert__progress{background:#22c55e}.fs-alert--warning.fs-alert--filled{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d}.fs-alert--warning.fs-alert--filled .fs-alert__progress{background:#f59e0b}.fs-alert--warning.fs-alert--accent{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d;border-left:3px solid #f59e0b;border-radius:0 8px 8px 0}.fs-alert--warning.fs-alert--accent .fs-alert__progress{background:#f59e0b}.fs-alert--danger.fs-alert--filled{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185}.fs-alert--danger.fs-alert--filled .fs-alert__progress{background:#f43f5e}.fs-alert--danger.fs-alert--accent{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185;border-left:3px solid #f43f5e;border-radius:0 8px 8px 0}.fs-alert--danger.fs-alert--accent .fs-alert__progress{background:#f43f5e}.fs-alert--neutral.fs-alert--filled{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3}.fs-alert--neutral.fs-alert--filled .fs-alert__progress{background:#ffffff4d}.fs-alert--neutral.fs-alert--accent{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3;border-left:3px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0}.fs-alert--neutral.fs-alert--accent .fs-alert__progress{background:#ffffff4d}.fs-alert__icon{flex-shrink:0;margin-top:1px;stroke:currentColor}.fs-alert__body{flex:1;min-width:0}.fs-alert__title{font-size:.875rem;font-weight:600;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px;line-height:1.4}.fs-alert__desc{font-size:.75rem;font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1.6;opacity:.85}.fs-alert__desc code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:11px;background:#ffffff14;padding:1px 5px;border-radius:4px}.fs-alert__close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0;flex-shrink:0;border-radius:4px;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-alert__close:hover{opacity:1}.fs-alert__close:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}.fs-alert__progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 8px;animation:fs-alert-progress linear forwards}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
324
346
|
}
|
|
325
347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsAlertComponent, decorators: [{
|
|
326
348
|
type: Component,
|
|
327
|
-
args: [{ selector: 'fs-alert', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"animState !== 'exiting' || true\"\n class=\"fs-alert\"\n [class.fs-alert--entering]=\"animState === 'entering'\"\n [class.fs-alert--visible]=\"animState === 'visible'\"\n [class.fs-alert--exiting]=\"animState === 'exiting'\"\n [class]=\"'fs-alert fs-alert--' + type + ' fs-alert--' + variant\"\n [attr.role]=\"type === 'danger' ? 'alert' : 'status'\"\n [attr.aria-live]=\"type === 'danger' ? 'assertive' : 'polite'\"\n>\n\n <!-- \u00EDcono sem\u00E1ntico -->\n <svg\n class=\"fs-alert__icon\"\n width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n [attr.d]=\"iconPath\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- cuerpo -->\n <div class=\"fs-alert__body\">\n <div *ngIf=\"title\" class=\"fs-alert__title\">{{ title }}</div>\n <div class=\"fs-alert__desc\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- bot\u00F3n cerrar -->\n <button\n *ngIf=\"dismissible\"\n class=\"fs-alert__close\"\n type=\"button\"\n aria-label=\"Cerrar\"\n (click)=\"dismiss()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M3 3l8 8M11 3L3 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n\n <!-- progress bar de auto-dismiss -->\n <div\n *ngIf=\"autoDismiss > 0\"\n class=\"fs-alert__progress\"\n [style.animation-duration]=\"progressDuration\"\n ></div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}@keyframes fs-alert-in{0%{opacity:0;transform:translateY(-10px);max-height:0;padding:0 1rem}to{opacity:1;transform:translateY(0);max-height:300px}}@keyframes fs-alert-out{0%{opacity:1;transform:translateY(0);max-height:300px;margin-bottom:0}to{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}}@keyframes fs-alert-progress{0%{width:100%}to{width:0%}}.fs-alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:8px;padding:.75rem 1rem;border:.5px solid transparent;position:relative;overflow:hidden;width:100%}.fs-alert--entering{animation:fs-alert-in .28s cubic-bezier(.4,0,.2,1) forwards}.fs-alert--visible{opacity:1;transform:translateY(0)}.fs-alert--exiting{animation:fs-alert-out .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.fs-alert--info.fs-alert--filled{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd}.fs-alert--info.fs-alert--filled .fs-alert__progress{background:#2563eb}.fs-alert--info.fs-alert--accent{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd;border-left:3px solid #2563eb;border-radius:0 8px 8px 0}.fs-alert--info.fs-alert--accent .fs-alert__progress{background:#2563eb}.fs-alert--success.fs-alert--filled{background:#22c55e1a;border-color:#22c55e4d;color:#86efac}.fs-alert--success.fs-alert--filled .fs-alert__progress{background:#22c55e}.fs-alert--success.fs-alert--accent{background:#22c55e1a;border-color:#22c55e4d;color:#86efac;border-left:3px solid #22c55e;border-radius:0 8px 8px 0}.fs-alert--success.fs-alert--accent .fs-alert__progress{background:#22c55e}.fs-alert--warning.fs-alert--filled{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d}.fs-alert--warning.fs-alert--filled .fs-alert__progress{background:#f59e0b}.fs-alert--warning.fs-alert--accent{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d;border-left:3px solid #f59e0b;border-radius:0 8px 8px 0}.fs-alert--warning.fs-alert--accent .fs-alert__progress{background:#f59e0b}.fs-alert--danger.fs-alert--filled{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185}.fs-alert--danger.fs-alert--filled .fs-alert__progress{background:#f43f5e}.fs-alert--danger.fs-alert--accent{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185;border-left:3px solid #f43f5e;border-radius:0 8px 8px 0}.fs-alert--danger.fs-alert--accent .fs-alert__progress{background:#f43f5e}.fs-alert--neutral.fs-alert--filled{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3}.fs-alert--neutral.fs-alert--filled .fs-alert__progress{background:#ffffff4d}.fs-alert--neutral.fs-alert--accent{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3;border-left:3px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0}.fs-alert--neutral.fs-alert--accent .fs-alert__progress{background:#ffffff4d}.fs-alert__icon{flex-shrink:0;margin-top:1px;stroke:currentColor}.fs-alert__body{flex:1;min-width:0}.fs-alert__title{font-size:.875rem;font-weight:600;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px;line-height:1.4}.fs-alert__desc{font-size:.75rem;font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1.6;opacity:.85}.fs-alert__desc code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:11px;background:#ffffff14;padding:1px 5px;border-radius:4px}.fs-alert__close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0;flex-shrink:0;border-radius:4px;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-alert__close:hover{opacity:1}.fs-alert__close:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}.fs-alert__progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 8px;animation:fs-alert-progress linear forwards}\n"] }]
|
|
349
|
+
args: [{ selector: 'fs-alert', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"animState !== 'exiting' || true\"\n class=\"fs-alert\"\n [class.fs-alert--entering]=\"animState === 'entering'\"\n [class.fs-alert--visible]=\"animState === 'visible'\"\n [class.fs-alert--exiting]=\"animState === 'exiting'\"\n [class]=\"'fs-alert fs-alert--' + type + ' fs-alert--' + variant\"\n [attr.role]=\"type === 'danger' ? 'alert' : 'status'\"\n [attr.aria-live]=\"type === 'danger' ? 'assertive' : 'polite'\"\n>\n\n <!-- \u00EDcono sem\u00E1ntico -->\n <svg\n class=\"fs-alert__icon\"\n width=\"16\" height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n [attr.d]=\"iconPath\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n\n <!-- cuerpo -->\n <div class=\"fs-alert__body\">\n <div *ngIf=\"title\" class=\"fs-alert__title\">{{ title }}</div>\n <div class=\"fs-alert__desc\">\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- bot\u00F3n cerrar -->\n <button\n *ngIf=\"dismissible\"\n class=\"fs-alert__close\"\n type=\"button\"\n aria-label=\"Cerrar\"\n (click)=\"dismiss()\"\n >\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n <path\n d=\"M3 3l8 8M11 3L3 11\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n />\n </svg>\n </button>\n\n <!-- progress bar de auto-dismiss -->\n <div\n *ngIf=\"autoDismiss > 0\"\n class=\"fs-alert__progress\"\n [style.animation-duration]=\"progressDuration\"\n ></div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}@keyframes fs-alert-in{0%{opacity:0;transform:translateY(-10px);max-height:0;padding:0 1rem}to{opacity:1;transform:translateY(0);max-height:300px}}@keyframes fs-alert-out{0%{opacity:1;transform:translateY(0);max-height:300px;margin-bottom:0}to{opacity:0;transform:translateY(-8px);max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0}}@keyframes fs-alert-progress{0%{width:100%}to{width:0%}}.fs-alert{display:flex;gap:.75rem;align-items:flex-start;border-radius:8px;padding:.75rem 1rem;border:.5px solid transparent;position:relative;overflow:hidden;width:100%}.fs-alert--entering{animation:fs-alert-in .28s cubic-bezier(.4,0,.2,1) forwards}.fs-alert--visible{opacity:1;transform:translateY(0)}.fs-alert--exiting{animation:fs-alert-out .22s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.fs-alert--info.fs-alert--filled{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd}.fs-alert--info.fs-alert--filled .fs-alert__progress{background:#2563eb}.fs-alert--info.fs-alert--accent{background:#2563eb1f;border-color:#2563eb59;color:#93c5fd;border-left:3px solid #2563eb;border-radius:0 8px 8px 0}.fs-alert--info.fs-alert--accent .fs-alert__progress{background:#2563eb}.fs-alert--success.fs-alert--filled{background:#22c55e1a;border-color:#22c55e4d;color:#86efac}.fs-alert--success.fs-alert--filled .fs-alert__progress{background:#22c55e}.fs-alert--success.fs-alert--accent{background:#22c55e1a;border-color:#22c55e4d;color:#86efac;border-left:3px solid #22c55e;border-radius:0 8px 8px 0}.fs-alert--success.fs-alert--accent .fs-alert__progress{background:#22c55e}.fs-alert--warning.fs-alert--filled{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d}.fs-alert--warning.fs-alert--filled .fs-alert__progress{background:#f59e0b}.fs-alert--warning.fs-alert--accent{background:#f59e0b1a;border-color:#f59e0b4d;color:#fcd34d;border-left:3px solid #f59e0b;border-radius:0 8px 8px 0}.fs-alert--warning.fs-alert--accent .fs-alert__progress{background:#f59e0b}.fs-alert--danger.fs-alert--filled{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185}.fs-alert--danger.fs-alert--filled .fs-alert__progress{background:#f43f5e}.fs-alert--danger.fs-alert--accent{background:#f43f5e1a;border-color:#f43f5e4d;color:#fb7185;border-left:3px solid #f43f5e;border-radius:0 8px 8px 0}.fs-alert--danger.fs-alert--accent .fs-alert__progress{background:#f43f5e}.fs-alert--neutral.fs-alert--filled{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3}.fs-alert--neutral.fs-alert--filled .fs-alert__progress{background:#ffffff4d}.fs-alert--neutral.fs-alert--accent{background:#ffffff0a;border-color:#ffffff1a;color:#ffffffb3;border-left:3px solid rgba(255,255,255,.3);border-radius:0 8px 8px 0}.fs-alert--neutral.fs-alert--accent .fs-alert__progress{background:#ffffff4d}.fs-alert__icon{flex-shrink:0;margin-top:1px;stroke:currentColor}.fs-alert__body{flex:1;min-width:0}.fs-alert__title{font-size:.875rem;font-weight:600;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:2px;line-height:1.4}.fs-alert__desc{font-size:.75rem;font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1.6;opacity:.85}.fs-alert__desc code{font-family:JetBrains Mono,Fira Code,Cascadia Code,monospace;font-size:11px;background:#ffffff14;padding:1px 5px;border-radius:4px}.fs-alert__close{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:inherit;opacity:.5;padding:0;flex-shrink:0;border-radius:4px;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-alert__close:hover{opacity:1}.fs-alert__close:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px currentColor}.fs-alert__progress{position:absolute;bottom:0;left:0;height:2px;border-radius:0 0 8px;animation:fs-alert-progress linear forwards}\n"] }]
|
|
328
350
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { type: [{
|
|
329
351
|
type: Input
|
|
330
352
|
}], variant: [{
|
|
@@ -416,11 +438,11 @@ class FsExperienceCardComponent {
|
|
|
416
438
|
return isNaN(d.getTime()) ? null : d;
|
|
417
439
|
}
|
|
418
440
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsExperienceCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
419
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsExperienceCardComponent, isStandalone: true, selector: "fs-experience-card", inputs: { experience: "experience", variant: "variant", timeline: "timeline", timelineLast: "timelineLast" }, ngImport: i0, template: "<div\n class=\"fs-exp\"\n [class.fs-exp--compact]=\"variant === 'compact'\"\n [class.fs-exp--timeline]=\"timeline\"\n [class.fs-exp--timeline-last]=\"timeline && timelineLast\"\n>\n\n <!-- l\u00EDnea vertical de timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-line\"></div>\n\n <!-- dot del timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-dot\"\n [class.fs-exp__timeline-dot--current]=\"isCurrent\">\n </div>\n\n <!-- card -->\n <div class=\"fs-exp__card\">\n\n <!-- header -->\n <div class=\"fs-exp__header\">\n\n <!-- logo -->\n <div class=\"fs-exp__logo\">\n <img\n *ngIf=\"experience.logoUrl\"\n [src]=\"experience.logoUrl\"\n [alt]=\"experience.company\"\n class=\"fs-exp__logo-img\"\n />\n <span *ngIf=\"!experience.logoUrl\" class=\"fs-exp__logo-text\">\n {{ experience.logoText || experience.company.slice(0, 4).toUpperCase() }}\n </span>\n </div>\n\n <!-- info -->\n <div class=\"fs-exp__info\">\n <div class=\"fs-exp__company\">{{ experience.company }}</div>\n <div class=\"fs-exp__role\">{{ experience.role }}</div>\n <div class=\"fs-exp__date\">\n <span\n class=\"fs-exp__dot\"\n [class.fs-exp__dot--current]=\"isCurrent\"\n ></span>\n <span>\n {{ experience.startDate }} \u2013\n {{ experience.current ? 'actualidad' : experience.endDate }}\n </span>\n <span *ngIf=\"duration\" class=\"fs-exp__duration\">\n \u00B7 {{ duration }}\n </span>\n </div>\n </div>\n\n </div>\n\n <!-- cuerpo \u2014 solo en variante full -->\n <ng-container *ngIf=\"variant === 'full'\">\n\n <div *ngIf=\"hasBullets || experience.badges?.length\" class=\"fs-exp__divider\"></div>\n\n <!-- bullets -->\n <ul *ngIf=\"hasBullets\" class=\"fs-exp__bullets\">\n <li *ngFor=\"let bullet of visibleBullets\" class=\"fs-exp__bullet\">\n <span class=\"fs-exp__bullet-arrow\" aria-hidden=\"true\">\u25B8</span>\n <span>{{ bullet }}</span>\n </li>\n </ul>\n\n <!-- toggle ver m\u00E1s / menos -->\n <button\n *ngIf=\"hasMoreBullets\"\n class=\"fs-exp__toggle\"\n type=\"button\"\n (click)=\"toggleExpand()\"\n >\n <svg\n class=\"fs-exp__toggle-icon\"\n [class.fs-exp__toggle-icon--open]=\"expanded\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n >\n <path d=\"M3 4.5l3 3 3-3\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n {{ expanded ? 'ver menos' : 'ver m\u00E1s' }}\n </button>\n\n <!-- badges -->\n <div *ngIf=\"experience.badges?.length\" class=\"fs-exp__badges\">\n <fs-badge\n *ngFor=\"let badge of experience.badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </ng-container>\n\n </div>\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-exp{--fs-exp-bg: #0d1117;--fs-exp-border: rgba(255, 255, 255, .08);--fs-exp-company: rgba(255, 255, 255, .45);--fs-exp-role: #ffffff;--fs-exp-date: rgba(255, 255, 255, .35);--fs-exp-duration: rgba(255, 255, 255, .2);--fs-exp-bullet: rgba(255, 255, 255, .6);--fs-exp-bullet-arrow: var(--fs-primary-base);--fs-exp-divider: rgba(255, 255, 255, .06);--fs-exp-logo-bg: #161b22;--fs-exp-logo-border: rgba(255, 255, 255, .1);--fs-exp-logo-text: rgba(255, 255, 255, .45);--fs-exp-toggle: var(--fs-primary-base);--fs-exp-dot-current: var(--fs-success-base);--fs-exp-dot-past: rgba(255, 255, 255, .2);--fs-exp-radius: 12px;position:relative;width:100%;display:flex;gap:16px}.fs-exp--timeline{padding-left:28px}.fs-exp__timeline-line{position:absolute;left:8px;top:20px;bottom:-16px;width:1px;background:var(--fs-exp-border)}.fs-exp--timeline-last .fs-exp__timeline-line{display:none}.fs-exp__timeline-dot{position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:9999px;background:var(--fs-exp-dot-past);border:2px solid var(--fs-exp-bg);flex-shrink:0}.fs-exp__timeline-dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 6px #22c55e80}.fs-exp__card{flex:1;background:var(--fs-exp-bg);border:.5px solid var(--fs-exp-border);border-radius:var(--fs-exp-radius);padding:1.5rem;transition:border-color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__card:hover{border-color:#ffffff24}.fs-exp__header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}.fs-exp--compact .fs-exp__header{margin-bottom:0}.fs-exp__logo{width:52px;height:52px;border-radius:8px;background:var(--fs-exp-logo-bg);border:.5px solid var(--fs-exp-logo-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.fs-exp__logo-img{width:100%;height:100%;object-fit:contain;padding:4px}.fs-exp__logo-text{font-size:10px;font-weight:700;color:var(--fs-exp-logo-text);letter-spacing:-.5px;text-align:center;line-height:1.2;padding:4px;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__info{flex:1;min-width:0}.fs-exp__company{font-size:.875rem;color:var(--fs-exp-company);margin-bottom:.25rem;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__role{font-size:1.125rem;font-weight:600;color:var(--fs-exp-role);margin-bottom:.5rem;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-exp__date{font-size:.875rem;color:var(--fs-exp-date);display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__dot{width:7px;height:7px;border-radius:9999px;background:var(--fs-exp-dot-past);flex-shrink:0}.fs-exp__dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 4px #22c55e99}.fs-exp__duration{color:var(--fs-exp-duration)}.fs-exp__divider{height:.5px;background:var(--fs-exp-divider);margin-bottom:1rem}.fs-exp__bullets{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;padding:0}.fs-exp__bullet{font-size:.875rem;color:var(--fs-exp-bullet);display:flex;gap:.5rem;line-height:1.6;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__bullet-arrow{color:var(--fs-exp-bullet-arrow);flex-shrink:0;margin-top:2px;font-size:11px}.fs-exp__toggle{display:inline-flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:500;color:var(--fs-exp-toggle);background:transparent;border:none;cursor:pointer;padding:0;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:1rem;transition:color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__toggle:hover{color:var(--fs-primary-hover)}.fs-exp__toggle:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-exp__toggle-icon{transition:transform .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.fs-exp__toggle-icon--open{transform:rotate(180deg)}.fs-exp__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsBadgeComponent, selector: "fs-badge", inputs: ["color", "variant", "size", "label", "dot", "iconLeft", "iconRight", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
420
442
|
}
|
|
421
443
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsExperienceCardComponent, decorators: [{
|
|
422
444
|
type: Component,
|
|
423
|
-
args: [{ selector: 'fs-experience-card', standalone: true, imports: [CommonModule, FsBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"fs-exp\"\n [class.fs-exp--compact]=\"variant === 'compact'\"\n [class.fs-exp--timeline]=\"timeline\"\n [class.fs-exp--timeline-last]=\"timeline && timelineLast\"\n>\n\n <!-- l\u00EDnea vertical de timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-line\"></div>\n\n <!-- dot del timeline -->\n <div *ngIf=\"timeline\" class=\"fs-exp__timeline-dot\"\n [class.fs-exp__timeline-dot--current]=\"isCurrent\">\n </div>\n\n <!-- card -->\n <div class=\"fs-exp__card\">\n\n <!-- header -->\n <div class=\"fs-exp__header\">\n\n <!-- logo -->\n <div class=\"fs-exp__logo\">\n <img\n *ngIf=\"experience.logoUrl\"\n [src]=\"experience.logoUrl\"\n [alt]=\"experience.company\"\n class=\"fs-exp__logo-img\"\n />\n <span *ngIf=\"!experience.logoUrl\" class=\"fs-exp__logo-text\">\n {{ experience.logoText || experience.company.slice(0, 4).toUpperCase() }}\n </span>\n </div>\n\n <!-- info -->\n <div class=\"fs-exp__info\">\n <div class=\"fs-exp__company\">{{ experience.company }}</div>\n <div class=\"fs-exp__role\">{{ experience.role }}</div>\n <div class=\"fs-exp__date\">\n <span\n class=\"fs-exp__dot\"\n [class.fs-exp__dot--current]=\"isCurrent\"\n ></span>\n <span>\n {{ experience.startDate }} \u2013\n {{ experience.current ? 'actualidad' : experience.endDate }}\n </span>\n <span *ngIf=\"duration\" class=\"fs-exp__duration\">\n \u00B7 {{ duration }}\n </span>\n </div>\n </div>\n\n </div>\n\n <!-- cuerpo \u2014 solo en variante full -->\n <ng-container *ngIf=\"variant === 'full'\">\n\n <div *ngIf=\"hasBullets || experience.badges?.length\" class=\"fs-exp__divider\"></div>\n\n <!-- bullets -->\n <ul *ngIf=\"hasBullets\" class=\"fs-exp__bullets\">\n <li *ngFor=\"let bullet of visibleBullets\" class=\"fs-exp__bullet\">\n <span class=\"fs-exp__bullet-arrow\" aria-hidden=\"true\">\u25B8</span>\n <span>{{ bullet }}</span>\n </li>\n </ul>\n\n <!-- toggle ver m\u00E1s / menos -->\n <button\n *ngIf=\"hasMoreBullets\"\n class=\"fs-exp__toggle\"\n type=\"button\"\n (click)=\"toggleExpand()\"\n >\n <svg\n class=\"fs-exp__toggle-icon\"\n [class.fs-exp__toggle-icon--open]=\"expanded\"\n width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"\n >\n <path d=\"M3 4.5l3 3 3-3\"\n stroke=\"currentColor\" stroke-width=\"1.5\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n {{ expanded ? 'ver menos' : 'ver m\u00E1s' }}\n </button>\n\n <!-- badges -->\n <div *ngIf=\"experience.badges?.length\" class=\"fs-exp__badges\">\n <fs-badge\n *ngFor=\"let badge of experience.badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </ng-container>\n\n </div>\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-exp{--fs-exp-bg: #0d1117;--fs-exp-border: rgba(255, 255, 255, .08);--fs-exp-company: rgba(255, 255, 255, .45);--fs-exp-role: #ffffff;--fs-exp-date: rgba(255, 255, 255, .35);--fs-exp-duration: rgba(255, 255, 255, .2);--fs-exp-bullet: rgba(255, 255, 255, .6);--fs-exp-bullet-arrow: var(--fs-primary-base);--fs-exp-divider: rgba(255, 255, 255, .06);--fs-exp-logo-bg: #161b22;--fs-exp-logo-border: rgba(255, 255, 255, .1);--fs-exp-logo-text: rgba(255, 255, 255, .45);--fs-exp-toggle: var(--fs-primary-base);--fs-exp-dot-current: var(--fs-success-base);--fs-exp-dot-past: rgba(255, 255, 255, .2);--fs-exp-radius: 12px;position:relative;width:100%;display:flex;gap:16px}.fs-exp--timeline{padding-left:28px}.fs-exp__timeline-line{position:absolute;left:8px;top:20px;bottom:-16px;width:1px;background:var(--fs-exp-border)}.fs-exp--timeline-last .fs-exp__timeline-line{display:none}.fs-exp__timeline-dot{position:absolute;left:4px;top:18px;width:9px;height:9px;border-radius:9999px;background:var(--fs-exp-dot-past);border:2px solid var(--fs-exp-bg);flex-shrink:0}.fs-exp__timeline-dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 6px #22c55e80}.fs-exp__card{flex:1;background:var(--fs-exp-bg);border:.5px solid var(--fs-exp-border);border-radius:var(--fs-exp-radius);padding:1.5rem;transition:border-color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__card:hover{border-color:#ffffff24}.fs-exp__header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.25rem}.fs-exp--compact .fs-exp__header{margin-bottom:0}.fs-exp__logo{width:52px;height:52px;border-radius:8px;background:var(--fs-exp-logo-bg);border:.5px solid var(--fs-exp-logo-border);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.fs-exp__logo-img{width:100%;height:100%;object-fit:contain;padding:4px}.fs-exp__logo-text{font-size:10px;font-weight:700;color:var(--fs-exp-logo-text);letter-spacing:-.5px;text-align:center;line-height:1.2;padding:4px;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__info{flex:1;min-width:0}.fs-exp__company{font-size:.875rem;color:var(--fs-exp-company);margin-bottom:.25rem;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__role{font-size:1.125rem;font-weight:600;color:var(--fs-exp-role);margin-bottom:.5rem;font-family:Inter,Segoe UI,system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-exp__date{font-size:.875rem;color:var(--fs-exp-date);display:flex;align-items:center;gap:.25rem;flex-wrap:wrap;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__dot{width:7px;height:7px;border-radius:9999px;background:var(--fs-exp-dot-past);flex-shrink:0}.fs-exp__dot--current{background:var(--fs-exp-dot-current);box-shadow:0 0 4px #22c55e99}.fs-exp__duration{color:var(--fs-exp-duration)}.fs-exp__divider{height:.5px;background:var(--fs-exp-divider);margin-bottom:1rem}.fs-exp__bullets{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem;padding:0}.fs-exp__bullet{font-size:.875rem;color:var(--fs-exp-bullet);display:flex;gap:.5rem;line-height:1.6;font-family:Inter,Segoe UI,system-ui,sans-serif}.fs-exp__bullet-arrow{color:var(--fs-exp-bullet-arrow);flex-shrink:0;margin-top:2px;font-size:11px}.fs-exp__toggle{display:inline-flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:500;color:var(--fs-exp-toggle);background:transparent;border:none;cursor:pointer;padding:0;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:1rem;transition:color .1s cubic-bezier(.4,0,.2,1)}.fs-exp__toggle:hover{color:var(--fs-primary-hover)}.fs-exp__toggle:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-exp__toggle-icon{transition:transform .2s cubic-bezier(.4,0,.2,1);flex-shrink:0}.fs-exp__toggle-icon--open{transform:rotate(180deg)}.fs-exp__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}\n"] }]
|
|
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"] }]
|
|
424
446
|
}], propDecorators: { experience: [{
|
|
425
447
|
type: Input
|
|
426
448
|
}], variant: [{
|
|
@@ -497,11 +519,11 @@ class FsProfileCardComponent {
|
|
|
497
519
|
.toUpperCase();
|
|
498
520
|
}
|
|
499
521
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsProfileCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
500
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: FsProfileCardComponent, isStandalone: true, selector: "fs-profile-card", inputs: { name: "name", handle: "handle", role: "role", verified: "verified", avatarUrl: "avatarUrl", bannerUrl: "bannerUrl", links: "links", badges: "badges", stats: "stats", showActions: "showActions", primaryActionLabel: "primaryActionLabel", secondaryActionLabel: "secondaryActionLabel" }, outputs: { primaryAction: "primaryAction", secondaryAction: "secondaryAction" }, ngImport: i0, template: "<div class=\"fs-profile\">\n\n <!-- banner -->\n <div class=\"fs-profile__banner\">\n <img\n *ngIf=\"bannerUrl\"\n [src]=\"bannerUrl\"\n [alt]=\"name + ' banner'\"\n class=\"fs-profile__banner-img\"\n />\n <div *ngIf=\"!bannerUrl\" class=\"fs-profile__banner-gradient\"></div>\n <div class=\"fs-profile__banner-line\"></div>\n </div>\n\n <!-- body -->\n <div class=\"fs-profile__body\">\n\n <!-- avatar -->\n <div class=\"fs-profile__avatar-wrap\">\n <div class=\"fs-profile__avatar\">\n <img\n *ngIf=\"avatarUrl\"\n [src]=\"avatarUrl\"\n [alt]=\"name\"\n class=\"fs-profile__avatar-img\"\n />\n <span *ngIf=\"!avatarUrl\" class=\"fs-profile__avatar-initials\">\n {{ initials }}\n </span>\n </div>\n <div *ngIf=\"verified\" class=\"fs-profile__verified\" aria-label=\"Verificado\">\n <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 5l2 2 4-4\"\n stroke=\"white\" stroke-width=\"1.6\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <!-- identidad -->\n <div class=\"fs-profile__name\">{{ name }}</div>\n <div *ngIf=\"handle\" class=\"fs-profile__handle\">@{{ handle }}</div>\n <div *ngIf=\"role\" class=\"fs-profile__role\">{{ role }}</div>\n\n <!-- acciones -->\n <div *ngIf=\"showActions\" class=\"fs-profile__actions\">\n <button\n class=\"fs-profile__btn fs-profile__btn--primary\"\n type=\"button\"\n (click)=\"primaryAction.emit()\"\n >\n {{ primaryActionLabel }}\n </button>\n <button\n class=\"fs-profile__btn fs-profile__btn--outline\"\n type=\"button\"\n (click)=\"secondaryAction.emit()\"\n >\n {{ secondaryActionLabel }}\n </button>\n </div>\n\n <!-- links -->\n <div *ngIf=\"links.length\" class=\"fs-profile__links\">\n <a\n *ngFor=\"let link of links\"\n class=\"fs-profile__link\"\n [href]=\"link.url || '#'\"\n [attr.target]=\"link.url ? '_blank' : null\"\n [attr.rel]=\"link.url ? 'noopener noreferrer' : null\"\n >\n <svg *ngIf=\"link.icon\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"link.icon\" stroke=\"currentColor\" stroke-width=\"1.3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ link.label }}</span>\n </a>\n </div>\n\n <!-- badges -->\n <div *ngIf=\"badges.length\" class=\"fs-profile__badges\">\n <fs-badge\n *ngFor=\"let badge of badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </div>\n\n <!-- stats footer -->\n <div *ngIf=\"stats.length\" class=\"fs-profile__stats\">\n <div *ngFor=\"let stat of stats\" class=\"fs-profile__stat\">\n <span class=\"fs-profile__stat-value\">{{ stat.value }}</span>\n <span class=\"fs-profile__stat-label\">{{ stat.label }}</span>\n </div>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-profile{--fs-profile-bg: #0d1117;--fs-profile-border: rgba(255, 255, 255, .08);--fs-profile-banner-from: #1e3a5f;--fs-profile-banner-to: #0f2035;--fs-profile-avatar-bg: #1d3557;--fs-profile-avatar-color: #60a5fa;--fs-profile-avatar-border: #0d1117;--fs-profile-name: #ffffff;--fs-profile-handle: rgba(255, 255, 255, .35);--fs-profile-role: rgba(255, 255, 255, .5);--fs-profile-link: #60a5fa;--fs-profile-stat-value: #ffffff;--fs-profile-stat-label: rgba(255, 255, 255, .3);--fs-profile-stats-border: rgba(255, 255, 255, .06);--fs-profile-divider: rgba(255, 255, 255, .06);--fs-profile-radius: 12px;background:var(--fs-profile-bg);border:.5px solid var(--fs-profile-border);border-radius:var(--fs-profile-radius);overflow:hidden;width:100%}.fs-profile__banner{height:180px;position:relative;overflow:hidden}.fs-profile__banner-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.fs-profile__banner-gradient{width:100%;height:100%;background:linear-gradient(135deg,var(--fs-profile-banner-from) 0%,var(--fs-profile-banner-to) 100%)}.fs-profile__banner-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--fs-primary-base) 0%,var(--fs-tertiary-base) 100%)}.fs-profile__body{padding:.75rem 1.5rem 1.5rem}.fs-profile__avatar-wrap{position:relative;width:fit-content;margin-top:-60px;margin-bottom:1rem}.fs-profile__avatar{width:120px;height:120px;border-radius:9999px;background:var(--fs-profile-avatar-bg);border:3px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center;overflow:hidden}.fs-profile__avatar-img{width:100%;height:100%;object-fit:cover;display:block}.fs-profile__avatar-initials{font-size:34px;font-weight:700;color:var(--fs-profile-avatar-color);font-family:Inter,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.fs-profile__verified{position:absolute;bottom:2px;right:0;width:30px;height:30px;border-radius:9999px;background:var(--fs-primary-base);border:2px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center}.fs-profile__name{font-size:1.25rem;font-weight:600;color:var(--fs-profile-name);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.25rem;line-height:1.2}.fs-profile__handle{font-size:.875rem;color:var(--fs-profile-handle);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.5rem}.fs-profile__role{font-size:.875rem;font-weight:500;color:var(--fs-profile-role);text-transform:uppercase;letter-spacing:.08em;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:1rem}.fs-profile__actions{display:flex;gap:.5rem;margin-bottom:1rem}.fs-profile__btn{flex:1;padding:.5rem 0;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);border:none}.fs-profile__btn--primary{background:var(--fs-primary-base);color:#fff}.fs-profile__btn--primary:hover{background:var(--fs-primary-hover)}.fs-profile__btn--primary:active{background:var(--fs-primary-active)}.fs-profile__btn--outline{background:transparent;color:#ffffffb3;border:.5px solid rgba(255,255,255,.15)}.fs-profile__btn--outline:hover{border-color:#ffffff4d}.fs-profile__btn--outline:active{background:#ffffff0d}.fs-profile__btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-profile__links{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.fs-profile__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--fs-profile-link);text-decoration:none;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-profile__link svg{opacity:.5;flex-shrink:0;stroke:currentColor}.fs-profile__link:hover{opacity:.75}.fs-profile__badges{display:flex;flex-wrap:wrap;gap:.5rem}.fs-profile__stats{border-top:.5px solid var(--fs-profile-stats-border);display:flex}.fs-profile__stat{flex:1;padding:1rem 0;text-align:center;border-right:.5px solid var(--fs-profile-divider);display:flex;flex-direction:column;gap:.25rem}.fs-profile__stat:last-child{border-right:none}.fs-profile__stat-value{font-size:1.25rem;font-weight:600;color:var(--fs-profile-stat-value);font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1}.fs-profile__stat-label{font-size:.75rem;color:var(--fs-profile-stat-label);font-family:Inter,Segoe UI,system-ui,sans-serif}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FsBadgeComponent, selector: "fs-badge", inputs: ["color", "variant", "size", "label", "dot", "iconLeft", "iconRight", "iconOnly", "removable"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
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 });
|
|
501
523
|
}
|
|
502
524
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: FsProfileCardComponent, decorators: [{
|
|
503
525
|
type: Component,
|
|
504
|
-
args: [{ selector: 'fs-profile-card', standalone: true, imports: [CommonModule, FsBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"fs-profile\">\n\n <!-- banner -->\n <div class=\"fs-profile__banner\">\n <img\n *ngIf=\"bannerUrl\"\n [src]=\"bannerUrl\"\n [alt]=\"name + ' banner'\"\n class=\"fs-profile__banner-img\"\n />\n <div *ngIf=\"!bannerUrl\" class=\"fs-profile__banner-gradient\"></div>\n <div class=\"fs-profile__banner-line\"></div>\n </div>\n\n <!-- body -->\n <div class=\"fs-profile__body\">\n\n <!-- avatar -->\n <div class=\"fs-profile__avatar-wrap\">\n <div class=\"fs-profile__avatar\">\n <img\n *ngIf=\"avatarUrl\"\n [src]=\"avatarUrl\"\n [alt]=\"name\"\n class=\"fs-profile__avatar-img\"\n />\n <span *ngIf=\"!avatarUrl\" class=\"fs-profile__avatar-initials\">\n {{ initials }}\n </span>\n </div>\n <div *ngIf=\"verified\" class=\"fs-profile__verified\" aria-label=\"Verificado\">\n <svg width=\"9\" height=\"9\" viewBox=\"0 0 10 10\" fill=\"none\">\n <path d=\"M2 5l2 2 4-4\"\n stroke=\"white\" stroke-width=\"1.6\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </div>\n </div>\n\n <!-- identidad -->\n <div class=\"fs-profile__name\">{{ name }}</div>\n <div *ngIf=\"handle\" class=\"fs-profile__handle\">@{{ handle }}</div>\n <div *ngIf=\"role\" class=\"fs-profile__role\">{{ role }}</div>\n\n <!-- acciones -->\n <div *ngIf=\"showActions\" class=\"fs-profile__actions\">\n <button\n class=\"fs-profile__btn fs-profile__btn--primary\"\n type=\"button\"\n (click)=\"primaryAction.emit()\"\n >\n {{ primaryActionLabel }}\n </button>\n <button\n class=\"fs-profile__btn fs-profile__btn--outline\"\n type=\"button\"\n (click)=\"secondaryAction.emit()\"\n >\n {{ secondaryActionLabel }}\n </button>\n </div>\n\n <!-- links -->\n <div *ngIf=\"links.length\" class=\"fs-profile__links\">\n <a\n *ngFor=\"let link of links\"\n class=\"fs-profile__link\"\n [href]=\"link.url || '#'\"\n [attr.target]=\"link.url ? '_blank' : null\"\n [attr.rel]=\"link.url ? 'noopener noreferrer' : null\"\n >\n <svg *ngIf=\"link.icon\" width=\"12\" height=\"12\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path [attr.d]=\"link.icon\" stroke=\"currentColor\" stroke-width=\"1.3\"\n stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <span>{{ link.label }}</span>\n </a>\n </div>\n\n <!-- badges -->\n <div *ngIf=\"badges.length\" class=\"fs-profile__badges\">\n <fs-badge\n *ngFor=\"let badge of badges\"\n [color]=\"badge.color || 'neutral'\"\n [iconLeft]=\"badge.iconLeft\"\n variant=\"filled\"\n size=\"sm\"\n >{{ badge.label }}</fs-badge>\n </div>\n\n </div>\n\n <!-- stats footer -->\n <div *ngIf=\"stats.length\" class=\"fs-profile__stats\">\n <div *ngFor=\"let stat of stats\" class=\"fs-profile__stat\">\n <span class=\"fs-profile__stat-value\">{{ stat.value }}</span>\n <span class=\"fs-profile__stat-label\">{{ stat.label }}</span>\n </div>\n </div>\n\n</div>\n", styles: [":root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-50);--fs-primary-subtle: var(--fs-primary-100);--fs-primary-tint: var(--fs-primary-200);--fs-primary-light: var(--fs-primary-300);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-600);--fs-primary-active: var(--fs-primary-700);--fs-primary-emphasis: var(--fs-primary-800);--fs-primary-contrast: var(--fs-primary-900);--fs-secondary-muted: var(--fs-secondary-50);--fs-secondary-subtle: var(--fs-secondary-100);--fs-secondary-tint: var(--fs-secondary-200);--fs-secondary-light: var(--fs-secondary-300);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-600);--fs-secondary-active: var(--fs-secondary-700);--fs-secondary-emphasis: var(--fs-secondary-800);--fs-secondary-contrast: var(--fs-secondary-900);--fs-tertiary-muted: var(--fs-tertiary-50);--fs-tertiary-subtle: var(--fs-tertiary-100);--fs-tertiary-tint: var(--fs-tertiary-200);--fs-tertiary-light: var(--fs-tertiary-300);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-600);--fs-tertiary-active: var(--fs-tertiary-700);--fs-tertiary-emphasis: var(--fs-tertiary-800);--fs-tertiary-contrast: var(--fs-tertiary-900);--fs-neutral-muted: var(--fs-neutral-50);--fs-neutral-subtle: var(--fs-neutral-100);--fs-neutral-tint: var(--fs-neutral-200);--fs-neutral-light: var(--fs-neutral-300);--fs-neutral-soft: var(--fs-neutral-400);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-600);--fs-neutral-active: var(--fs-neutral-700);--fs-neutral-emphasis: var(--fs-neutral-800);--fs-neutral-contrast: var(--fs-neutral-900);--fs-success-muted: var(--fs-success-50);--fs-success-subtle: var(--fs-success-100);--fs-success-tint: var(--fs-success-200);--fs-success-light: var(--fs-success-300);--fs-success-soft: var(--fs-success-400);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-600);--fs-success-active: var(--fs-success-700);--fs-success-emphasis: var(--fs-success-800);--fs-success-contrast: var(--fs-success-900);--fs-warning-muted: var(--fs-warning-50);--fs-warning-subtle: var(--fs-warning-100);--fs-warning-tint: var(--fs-warning-200);--fs-warning-light: var(--fs-warning-300);--fs-warning-soft: var(--fs-warning-400);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-600);--fs-warning-active: var(--fs-warning-700);--fs-warning-emphasis: var(--fs-warning-800);--fs-warning-contrast: var(--fs-warning-900);--fs-danger-muted: var(--fs-danger-50);--fs-danger-subtle: var(--fs-danger-100);--fs-danger-tint: var(--fs-danger-200);--fs-danger-light: var(--fs-danger-300);--fs-danger-soft: var(--fs-danger-400);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-600);--fs-danger-active: var(--fs-danger-700);--fs-danger-emphasis: var(--fs-danger-800);--fs-danger-contrast: var(--fs-danger-900);--fs-font-sans: Inter, Segoe UI, system-ui, sans-serif;--fs-font-mono: JetBrains Mono, Fira Code, Cascadia Code, monospace;--fs-font-serif: Georgia, serif;--fs-radius-sm: 4px;--fs-radius-md: 6px;--fs-radius-lg: 8px;--fs-radius-xl: 12px;--fs-radius-full: 9999px;--fs-duration-fast: .1s;--fs-duration-normal: .2s;--fs-duration-slow: .35s;--fs-shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--fs-shadow-md: 0 4px 6px rgba(0, 0, 0, .07), 0 2px 4px rgba(0, 0, 0, .04);--fs-shadow-lg: 0 10px 15px rgba(0, 0, 0, .08), 0 4px 6px rgba(0, 0, 0, .04);--fs-space-1: .25rem;--fs-space-2: .5rem;--fs-space-3: .75rem;--fs-space-4: 1rem;--fs-space-6: 1.5rem;--fs-space-8: 2rem}@media (prefers-color-scheme: dark){:root,[data-theme=dark]{--fs-primary-50: rgb(237.56, 242.52, 253.4);--fs-primary-100: rgb(211.4, 223.8, 251);--fs-primary-200: rgb(176.52, 198.84, 247.8);--fs-primary-300: rgb(132.92, 167.64, 243.8);--fs-primary-400: rgb(84.96, 133.32, 239.4);--fs-primary-500: #2563eb;--fs-primary-600: rgb(33.48, 86.84, 204.12);--fs-primary-700: rgb(29.52, 73.16, 169.38);--fs-primary-800: rgb(25.12, 57.96, 130.78);--fs-primary-900: rgb(21.16, 44.28, 96.04);--fs-secondary-50: rgb(235.72, 247.8, 253.24);--fs-secondary-100: rgb(206.8, 237, 250.6);--fs-secondary-200: rgb(168.24, 222.6, 247.08);--fs-secondary-300: rgb(120.04, 204.6, 242.68);--fs-secondary-400: rgb(67.02, 184.8, 237.84);--fs-secondary-500: #0ea5e9;--fs-secondary-600: rgb(14.16, 142.28, 202.44);--fs-secondary-700: rgb(14.34, 116.72, 168.06);--fs-secondary-800: rgb(14.54, 88.32, 129.86);--fs-secondary-900: rgb(14.72, 62.76, 95.48);--fs-tertiary-50: rgb(237.32, 251.48, 253.64);--fs-tertiary-100: rgb(210.8, 246.2, 251.6);--fs-tertiary-200: rgb(175.44, 239.16, 248.88);--fs-tertiary-300: rgb(131.24, 230.36, 245.48);--fs-tertiary-400: rgb(82.62, 220.68, 241.74);--fs-tertiary-500: #22d3ee;--fs-tertiary-600: rgb(30.96, 180.92, 206.64);--fs-tertiary-700: rgb(27.54, 147.08, 171.36);--fs-tertiary-800: rgb(23.74, 109.48, 132.16);--fs-tertiary-900: rgb(20.32, 75.64, 96.88);--fs-neutral-50: rgb(242.6, 243.88, 245.72);--fs-neutral-100: rgb(224, 227.2, 231.8);--fs-neutral-200: rgb(199.2, 204.96, 213.24);--fs-neutral-300: rgb(168.2, 177.16, 190.04);--fs-neutral-400: rgb(134.1, 146.58, 164.52);--fs-neutral-500: #64748b;--fs-neutral-600: rgb(86.4, 101.12, 123.48);--fs-neutral-700: rgb(71.1, 84.38, 106.02);--fs-neutral-800: rgb(54.1, 65.78, 86.62);--fs-neutral-900: rgb(38.8, 49.04, 69.16);--fs-success-50: rgb(237.32, 250.36, 242.12);--fs-success-100: rgb(210.8, 243.4, 222.8);--fs-success-200: rgb(175.44, 234.12, 197.04);--fs-success-300: rgb(131.24, 222.52, 164.84);--fs-success-400: rgb(82.62, 209.76, 129.42);--fs-success-500: #22c55e;--fs-success-600: rgb(30.96, 169.16, 85.68);--fs-success-700: rgb(27.54, 137.84, 76.32);--fs-success-800: rgb(23.74, 103.04, 65.92);--fs-success-900: rgb(20.32, 71.72, 56.56);--fs-warning-50: rgb(254.2, 247.24, 235.48);--fs-warning-100: rgb(253, 235.6, 206.2);--fs-warning-200: rgb(251.4, 220.08, 167.16);--fs-warning-300: rgb(249.4, 200.68, 118.36);--fs-warning-400: rgb(247.2, 179.34, 64.68);--fs-warning-500: #f59e0b;--fs-warning-600: rgb(208.2, 136.4, 15.96);--fs-warning-700: rgb(166.8, 112.1, 21.54);--fs-warning-800: rgb(120.8, 85.1, 27.74);--fs-warning-900: rgb(79.4, 60.8, 33.32);--fs-danger-50: rgb(254.12, 239.64, 242.12);--fs-danger-100: rgb(252.8, 216.6, 222.8);--fs-danger-200: rgb(251.04, 185.88, 197.04);--fs-danger-300: rgb(248.84, 147.48, 164.84);--fs-danger-400: rgb(246.42, 105.24, 129.42);--fs-danger-500: #f43f5e;--fs-danger-600: rgb(207.36, 56.6, 85.68);--fs-danger-700: rgb(166.14, 49.4, 76.32);--fs-danger-800: rgb(120.34, 41.4, 65.92);--fs-danger-900: rgb(79.12, 34.2, 56.56);--fs-primary-muted: var(--fs-primary-900);--fs-primary-subtle: var(--fs-primary-800);--fs-primary-tint: var(--fs-primary-700);--fs-primary-light: var(--fs-primary-600);--fs-primary-soft: var(--fs-primary-400);--fs-primary-base: var(--fs-primary-500);--fs-primary-hover: var(--fs-primary-400);--fs-primary-active: var(--fs-primary-300);--fs-primary-emphasis: var(--fs-primary-200);--fs-primary-contrast: var(--fs-primary-50);--fs-secondary-muted: var(--fs-secondary-900);--fs-secondary-subtle: var(--fs-secondary-800);--fs-secondary-tint: var(--fs-secondary-700);--fs-secondary-light: var(--fs-secondary-600);--fs-secondary-soft: var(--fs-secondary-400);--fs-secondary-base: var(--fs-secondary-500);--fs-secondary-hover: var(--fs-secondary-400);--fs-secondary-active: var(--fs-secondary-300);--fs-secondary-emphasis: var(--fs-secondary-200);--fs-secondary-contrast: var(--fs-secondary-50);--fs-tertiary-muted: var(--fs-tertiary-900);--fs-tertiary-subtle: var(--fs-tertiary-800);--fs-tertiary-tint: var(--fs-tertiary-700);--fs-tertiary-light: var(--fs-tertiary-600);--fs-tertiary-soft: var(--fs-tertiary-400);--fs-tertiary-base: var(--fs-tertiary-500);--fs-tertiary-hover: var(--fs-tertiary-400);--fs-tertiary-active: var(--fs-tertiary-300);--fs-tertiary-emphasis: var(--fs-tertiary-200);--fs-tertiary-contrast: var(--fs-tertiary-50);--fs-neutral-muted: var(--fs-neutral-900);--fs-neutral-subtle: var(--fs-neutral-800);--fs-neutral-base: var(--fs-neutral-500);--fs-neutral-hover: var(--fs-neutral-400);--fs-neutral-active: var(--fs-neutral-300);--fs-neutral-contrast: var(--fs-neutral-50);--fs-danger-muted: var(--fs-danger-900);--fs-danger-base: var(--fs-danger-500);--fs-danger-hover: var(--fs-danger-400);--fs-danger-contrast: var(--fs-danger-50);--fs-success-muted: var(--fs-success-900);--fs-success-base: var(--fs-success-500);--fs-success-hover: var(--fs-success-400);--fs-success-contrast: var(--fs-success-50);--fs-warning-muted: var(--fs-warning-900);--fs-warning-base: var(--fs-warning-500);--fs-warning-hover: var(--fs-warning-400);--fs-warning-contrast: var(--fs-warning-50)}}:root,[data-theme=dark]{--fs-tab-bg: #0d1117;--fs-tab-color: rgba(255, 255, 255, .4);--fs-tab-color-hover: rgba(255, 255, 255, .7);--fs-tab-color-active: #ffffff;--fs-tab-border: rgba(255, 255, 255, .08);--fs-tab-hover-bg: rgba(255, 255, 255, .03);--fs-tab-indicator-from: var(--fs-primary-base);--fs-tab-indicator-to: var(--fs-tertiary-base);--fs-tab-indicator-glow: rgba(34, 211, 238, .45)}.fs-profile{--fs-profile-bg: #0d1117;--fs-profile-border: rgba(255, 255, 255, .08);--fs-profile-banner-from: #1e3a5f;--fs-profile-banner-to: #0f2035;--fs-profile-avatar-bg: #1d3557;--fs-profile-avatar-color: #60a5fa;--fs-profile-avatar-border: #0d1117;--fs-profile-name: #ffffff;--fs-profile-handle: rgba(255, 255, 255, .35);--fs-profile-role: rgba(255, 255, 255, .5);--fs-profile-link: #60a5fa;--fs-profile-stat-value: #ffffff;--fs-profile-stat-label: rgba(255, 255, 255, .3);--fs-profile-stats-border: rgba(255, 255, 255, .06);--fs-profile-divider: rgba(255, 255, 255, .06);--fs-profile-radius: 12px;background:var(--fs-profile-bg);border:.5px solid var(--fs-profile-border);border-radius:var(--fs-profile-radius);overflow:hidden;width:100%}.fs-profile__banner{height:180px;position:relative;overflow:hidden}.fs-profile__banner-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}.fs-profile__banner-gradient{width:100%;height:100%;background:linear-gradient(135deg,var(--fs-profile-banner-from) 0%,var(--fs-profile-banner-to) 100%)}.fs-profile__banner-line{position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--fs-primary-base) 0%,var(--fs-tertiary-base) 100%)}.fs-profile__body{padding:.75rem 1.5rem 1.5rem}.fs-profile__avatar-wrap{position:relative;width:fit-content;margin-top:-60px;margin-bottom:1rem}.fs-profile__avatar{width:120px;height:120px;border-radius:9999px;background:var(--fs-profile-avatar-bg);border:3px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center;overflow:hidden}.fs-profile__avatar-img{width:100%;height:100%;object-fit:cover;display:block}.fs-profile__avatar-initials{font-size:34px;font-weight:700;color:var(--fs-profile-avatar-color);font-family:Inter,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.fs-profile__verified{position:absolute;bottom:2px;right:0;width:30px;height:30px;border-radius:9999px;background:var(--fs-primary-base);border:2px solid var(--fs-profile-avatar-border);display:flex;align-items:center;justify-content:center}.fs-profile__name{font-size:1.25rem;font-weight:600;color:var(--fs-profile-name);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.25rem;line-height:1.2}.fs-profile__handle{font-size:.875rem;color:var(--fs-profile-handle);font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:.5rem}.fs-profile__role{font-size:.875rem;font-weight:500;color:var(--fs-profile-role);text-transform:uppercase;letter-spacing:.08em;font-family:Inter,Segoe UI,system-ui,sans-serif;margin-bottom:1rem}.fs-profile__actions{display:flex;gap:.5rem;margin-bottom:1rem}.fs-profile__btn{flex:1;padding:.5rem 0;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:background-color .1s cubic-bezier(.4,0,.2,1),border-color .1s cubic-bezier(.4,0,.2,1),color .1s cubic-bezier(.4,0,.2,1);border:none}.fs-profile__btn--primary{background:var(--fs-primary-base);color:#fff}.fs-profile__btn--primary:hover{background:var(--fs-primary-hover)}.fs-profile__btn--primary:active{background:var(--fs-primary-active)}.fs-profile__btn--outline{background:transparent;color:#ffffffb3;border:.5px solid rgba(255,255,255,.15)}.fs-profile__btn--outline:hover{border-color:#ffffff4d}.fs-profile__btn--outline:active{background:#ffffff0d}.fs-profile__btn:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--fs-primary-base)}.fs-profile__links{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.fs-profile__link{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--fs-profile-link);text-decoration:none;font-family:Inter,Segoe UI,system-ui,sans-serif;transition:opacity .1s cubic-bezier(.4,0,.2,1)}.fs-profile__link svg{opacity:.5;flex-shrink:0;stroke:currentColor}.fs-profile__link:hover{opacity:.75}.fs-profile__badges{display:flex;flex-wrap:wrap;gap:.5rem}.fs-profile__stats{border-top:.5px solid var(--fs-profile-stats-border);display:flex}.fs-profile__stat{flex:1;padding:1rem 0;text-align:center;border-right:.5px solid var(--fs-profile-divider);display:flex;flex-direction:column;gap:.25rem}.fs-profile__stat:last-child{border-right:none}.fs-profile__stat-value{font-size:1.25rem;font-weight:600;color:var(--fs-profile-stat-value);font-family:Inter,Segoe UI,system-ui,sans-serif;line-height:1}.fs-profile__stat-label{font-size:.75rem;color:var(--fs-profile-stat-label);font-family:Inter,Segoe UI,system-ui,sans-serif}\n"] }]
|
|
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"] }]
|
|
505
527
|
}], propDecorators: { name: [{
|
|
506
528
|
type: Input
|
|
507
529
|
}], handle: [{
|