@crowdfarming/oliva-ds 1.3.2 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/crowdfarming-oliva-ds.mjs +858 -0
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -0
- package/index.d.ts +25 -0
- package/lib/avatar/src/index.d.ts +1 -0
- package/lib/avatar/src/lib/avatar/avatar.component.d.ts +9 -0
- package/lib/button/src/index.d.ts +1 -0
- package/lib/button/src/lib/button/button.component.d.ts +20 -0
- package/lib/button-icon/src/index.d.ts +1 -0
- package/lib/button-icon/src/lib/button-icon/button-icon.component.d.ts +19 -0
- package/lib/button-set/src/index.d.ts +1 -0
- package/lib/button-set/src/lib/button-set/button-set.component.d.ts +13 -0
- package/lib/checkbox/src/index.d.ts +1 -0
- package/lib/checkbox/src/lib/checkbox/checkbox.component.d.ts +15 -0
- package/lib/checkbox-group/src/index.d.ts +1 -0
- package/lib/checkbox-group/src/lib/checkbox-group/checkbox-group.component.d.ts +26 -0
- package/lib/chips/src/index.d.ts +1 -0
- package/lib/chips/src/lib/chips/chips.component.d.ts +13 -0
- package/lib/design-tokens/src/index.d.ts +1 -0
- package/lib/design-tokens/src/lib/design-tokens/design-tokens.component.d.ts +5 -0
- package/lib/icon-alert/src/index.d.ts +1 -0
- package/lib/icon-alert/src/lib/icon-alert/icon-alert.component.d.ts +7 -0
- package/lib/icon-eye/src/index.d.ts +1 -0
- package/lib/icon-eye/src/lib/icon-eye/icon-eye.component.d.ts +8 -0
- package/lib/icon-spinner/src/index.d.ts +1 -0
- package/lib/icon-spinner/src/lib/icon-spinner/icon-spinner.component.d.ts +6 -0
- package/lib/icon-success/src/index.d.ts +1 -0
- package/lib/icon-success/src/lib/icon-success/icon-success.component.d.ts +7 -0
- package/lib/icon-test/src/index.d.ts +1 -0
- package/lib/icon-test/src/lib/icon-test/icon-test.component.d.ts +7 -0
- package/lib/icon-thumb/src/index.d.ts +1 -0
- package/lib/icon-thumb/src/lib/icon-thumb/icon-thumb.component.d.ts +7 -0
- package/lib/icon-user/src/index.d.ts +1 -0
- package/lib/icon-user/src/lib/icon-user/icon-user.component.d.ts +7 -0
- package/lib/input-label/src/index.d.ts +1 -0
- package/lib/input-label/src/lib/input-label/input-label.component.d.ts +10 -0
- package/lib/link/src/index.d.ts +1 -0
- package/lib/link/src/lib/link/link.component.d.ts +18 -0
- package/lib/password-input/src/index.d.ts +1 -0
- package/lib/password-input/src/lib/password-input/password-input.component.d.ts +21 -0
- package/lib/radio/src/index.d.ts +1 -0
- package/lib/radio/src/lib/radio/radio.component.d.ts +22 -0
- package/lib/radio-group/src/index.d.ts +1 -0
- package/lib/radio-group/src/lib/radio-group/radio-group.component.d.ts +19 -0
- package/lib/segmented-control/src/index.d.ts +1 -0
- package/lib/segmented-control/src/lib/segmented-control/segmented-control.component.d.ts +20 -0
- package/lib/text-input/src/index.d.ts +1 -0
- package/lib/text-input/src/lib/text-input/text-input.component.d.ts +20 -0
- package/lib/textarea/src/index.d.ts +1 -0
- package/lib/textarea/src/lib/textarea/textarea.component.d.ts +19 -0
- package/lib/thumbnail/src/index.d.ts +1 -0
- package/lib/thumbnail/src/lib/thumbnail/thumbnail.component.d.ts +8 -0
- package/lib/tooltip/src/index.d.ts +1 -0
- package/lib/tooltip/src/lib/tooltip/tooltip.component.d.ts +12 -0
- package/package.json +23 -5
|
@@ -0,0 +1,858 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { Input, Component, ElementRef, ContentChild, EventEmitter, Output, HostBinding, HostListener } from '@angular/core';
|
|
3
|
+
import * as i1 from '@angular/common';
|
|
4
|
+
import { CommonModule } from '@angular/common';
|
|
5
|
+
|
|
6
|
+
class IconUserComponent {
|
|
7
|
+
extraClass = '';
|
|
8
|
+
size = 'lg';
|
|
9
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconUserComponent, isStandalone: true, selector: "lib-icon-user", inputs: { extraClass: "extraClass", size: "size" }, ngImport: i0, template: "<svg [ngClass]=\"['o-svg','o-svg__user','o-svg--' + size,extraClass ? 'o-svg__user--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M21.6488 19.8751c-1.4279-2.4684-3.6282-4.2384-6.196-5.0775 1.2702-.7561 2.257-1.9083 2.809-3.2796.5519-1.3712.6385-2.88576.2464-4.31099-.3921-1.42523-1.2412-2.68234-2.417-3.57828-1.1757-.89594-2.613-1.38117-4.0912-1.38117-1.4782 0-2.91549.48523-4.09122 1.38117-1.17572.89594-2.02484 2.15305-2.41695 3.57828-.39212 1.42523-.30554 2.93979.24642 4.31099.55196 1.3713 1.53879 2.5235 2.80895 3.2796-2.56782.8381-4.76813 2.6081-6.19594 5.0775-.05236.0854-.08709.1804-.10214.2794-.01505.099-.01012.2.01451.2971.02462.0971.06844.1883.12887.2681.06043.0799.13624.1469.22297.197.08673.05.18261.0823.28198.0947.09938.0124.20025.0049.29664-.0223.0964-.0272.18638-.0734.26463-.1359.07825-.0625.14318-.1401.19098-.2281 1.76625-3.0525 4.88812-4.875 8.3503-4.875 3.4622 0 6.5841 1.8225 8.3503 4.875.0478.088.1128.1656.191.2281.0783.0625.1682.1087.2646.1359.0964.0272.1973.0347.2967.0223.0993-.0124.1952-.0447.2819-.0947.0868-.0501.1626-.1171.223-.197.0604-.0798.1043-.171.1289-.2681.0246-.0971.0296-.1981.0145-.2971-.0151-.099-.0498-.194-.1021-.2794ZM6.75001 9.00011c0-1.03835.30791-2.05339.88478-2.91674.57688-.86336 1.39682-1.53627 2.35613-1.93363.95928-.39736 2.01488-.50133 3.03328-.29875 1.0184.20257 1.9539.70258 2.6881 1.43681.7342.73422 1.2343 1.66968 1.4368 2.68809.2026 1.0184.0986 2.07401-.2987 3.03331-.3974.9593-1.0703 1.7792-1.9336 2.3561-.8634.5769-1.8784.8848-2.9168.8848-1.3919-.0015-2.72641-.5551-3.71066-1.5393-.98424-.9843-1.53784-2.3188-1.53933-3.71069Z\" fill=\"#535858\"/>\n</svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
11
|
+
}
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconUserComponent, decorators: [{
|
|
13
|
+
type: Component,
|
|
14
|
+
args: [{ selector: 'lib-icon-user', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__user','o-svg--' + size,extraClass ? 'o-svg__user--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M21.6488 19.8751c-1.4279-2.4684-3.6282-4.2384-6.196-5.0775 1.2702-.7561 2.257-1.9083 2.809-3.2796.5519-1.3712.6385-2.88576.2464-4.31099-.3921-1.42523-1.2412-2.68234-2.417-3.57828-1.1757-.89594-2.613-1.38117-4.0912-1.38117-1.4782 0-2.91549.48523-4.09122 1.38117-1.17572.89594-2.02484 2.15305-2.41695 3.57828-.39212 1.42523-.30554 2.93979.24642 4.31099.55196 1.3713 1.53879 2.5235 2.80895 3.2796-2.56782.8381-4.76813 2.6081-6.19594 5.0775-.05236.0854-.08709.1804-.10214.2794-.01505.099-.01012.2.01451.2971.02462.0971.06844.1883.12887.2681.06043.0799.13624.1469.22297.197.08673.05.18261.0823.28198.0947.09938.0124.20025.0049.29664-.0223.0964-.0272.18638-.0734.26463-.1359.07825-.0625.14318-.1401.19098-.2281 1.76625-3.0525 4.88812-4.875 8.3503-4.875 3.4622 0 6.5841 1.8225 8.3503 4.875.0478.088.1128.1656.191.2281.0783.0625.1682.1087.2646.1359.0964.0272.1973.0347.2967.0223.0993-.0124.1952-.0447.2819-.0947.0868-.0501.1626-.1171.223-.197.0604-.0798.1043-.171.1289-.2681.0246-.0971.0296-.1981.0145-.2971-.0151-.099-.0498-.194-.1021-.2794ZM6.75001 9.00011c0-1.03835.30791-2.05339.88478-2.91674.57688-.86336 1.39682-1.53627 2.35613-1.93363.95928-.39736 2.01488-.50133 3.03328-.29875 1.0184.20257 1.9539.70258 2.6881 1.43681.7342.73422 1.2343 1.66968 1.4368 2.68809.2026 1.0184.0986 2.07401-.2987 3.03331-.3974.9593-1.0703 1.7792-1.9336 2.3561-.8634.5769-1.8784.8848-2.9168.8848-1.3919-.0015-2.72641-.5551-3.71066-1.5393-.98424-.9843-1.53784-2.3188-1.53933-3.71069Z\" fill=\"#535858\"/>\n</svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}\n"] }]
|
|
15
|
+
}], propDecorators: { extraClass: [{
|
|
16
|
+
type: Input
|
|
17
|
+
}], size: [{
|
|
18
|
+
type: Input
|
|
19
|
+
}] } });
|
|
20
|
+
|
|
21
|
+
class AvatarComponent {
|
|
22
|
+
size = 'lg';
|
|
23
|
+
initial = '';
|
|
24
|
+
src = '';
|
|
25
|
+
alt = '';
|
|
26
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
27
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AvatarComponent, isStandalone: true, selector: "lib-avatar", inputs: { size: "size", initial: "initial", src: "src", alt: "alt" }, ngImport: i0, template: "<figure [ngClass]=\"['c-avatar','c-avatar__' + size, !src && !initial ? 'c-avatar--no-img' : '', !src && initial ? 'c-avatar--initial' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-avatar__img\" />\n <lib-icon-user *ngIf=\"!src && !initial\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n <span class=\"c-avatar--initial\" *ngIf=\"!src && initial\">{{initial}}</span>\n</figure>", styles: [".c-avatar{display:flex;align-items:center;justify-content:center;border-radius:var(--mobile-size-border-radius-full);background:var(--color-feedback-neutral-surface-background, #DEE7E6);overflow:hidden;cursor:pointer}.c-avatar__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-avatar__lg{width:3rem;height:3rem}.c-avatar__lg .c-avatar--initial{color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--mobile-typography-title-lg-family, Satoshi);font-size:var(--mobile--typography-title-lg-size, 1.5rem);font-style:normal;font-weight:var(--mobile--typography-title-lg-weight, 700);line-height:var(--mobile--typography-title-lg-line-height, 2rem);letter-spacing:var(--mobile--typography-title-lg-letter-spacing, 0rem)}.c-avatar__md{width:2.5rem;height:2.5rem}.c-avatar__md .c-avatar--initial{color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--mobile-typography-title-md-family, Satoshi);font-size:var(--mobile-typography-title-md-size, 1.25rem);font-style:normal;font-weight:var(--mobile-typography-title-md-weight, 700);line-height:var(--mobile-typography-title-md-line-height, 1.5rem);letter-spacing:var(--mobile-typography-title-md-letter-spacing, 0rem)}.c-avatar__sm{width:2rem;height:2rem}.c-avatar__sm .c-avatar--initial{color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--mobile-typography-label-md-strong-family, Satoshi);font-size:var(--mobile-typography-label-md-strong-size, 1rem);font-style:normal;font-weight:var(--mobile-typography-label-md-strong-weight, 700);line-height:var(--mobile-typography-label-md-strong-line-height, 1.5rem);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing, 0rem)}.c-avatar__xs{width:1.5rem;height:1.5rem}.c-avatar__xs .c-avatar--initial{color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--mobile-typography-label-sm-strong-family, Satoshi);font-size:var(--mobile-typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-strong-weight, 700);line-height:var(--mobile-typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing, 0rem)}@media (min-width: var(--tablet-size-viewport-width)){.c-avatar{border-radius:var(--tablet-size-border-radius-full)}.c-avatar__lg .c-avatar--initial{font-family:var(--tablet-typography-title-lg-family);font-size:var(--tablet--typography-title-lg-size);font-weight:var(--tablet--typography-title-lg-weight);line-height:var(--tablet--typography-title-lg-line-height);letter-spacing:var(--tablet--typography-title-lg-letter-spacing)}.c-avatar__md .c-avatar--initial{font-family:var(--tablet-typography-title-md-family);font-size:var(--tablet-typography-title-md-size);font-weight:var(--tablet-typography-title-md-weight);line-height:var(--tablet-typography-title-md-line-height);letter-spacing:var(--tablet-typography-title-md-letter-spacing)}.c-avatar__sm .c-avatar--initial{font-family:var(--tablet-typography-label-md-strong-family);font-size:var(--tablet-typography-label-md-strong-size);font-weight:var(--tablet-typography-label-md-strong-weight);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}.c-avatar__xs .c-avatar--initial{font-family:var(--tablet-typography-label-sm-strong-family, Satoshi);font-size:var(--tablet-typography-label-sm-strong-size);font-weight:var(--tablet-typography-label-sm-strong-weight);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-avatar{border-radius:var(--widescreen-size-border-radius-full)}.c-avatar__lg .c-avatar--initial{font-family:var(--widescreen-typography-title-lg-family);font-size:var(--widescreen--typography-title-lg-size);font-weight:var(--widescreen--typography-title-lg-weight);line-height:var(--widescreen--typography-title-lg-line-height);letter-spacing:var(--widescreen--typography-title-lg-letter-spacing)}.c-avatar__md .c-avatar--initial{font-family:var(--widescreen-typography-title-md-family);font-size:var(--widescreen-typography-title-md-size);font-weight:var(--widescreen-typography-title-md-weight);line-height:var(--widescreen-typography-title-md-line-height);letter-spacing:var(--widescreen-typography-title-md-letter-spacing)}.c-avatar__sm .c-avatar--initial{font-family:var(--widescreen-typography-label-md-strong-family);font-size:var(--widescreen-typography-label-md-strong-size);font-weight:var(--widescreen-typography-label-md-strong-weight);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}.c-avatar__xs .c-avatar--initial{font-family:var(--widescreen-typography-label-sm-strong-family, Satoshi);font-size:var(--widescreen-typography-label-sm-strong-size);font-weight:var(--widescreen-typography-label-sm-strong-weight);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-avatar{border-radius:var(--desktop-size-border-radius-full)}.c-avatar__lg .c-avatar--initial{font-family:var(--desktop-typography-title-lg-family);font-size:var(--desktop--typography-title-lg-size);font-weight:var(--desktop--typography-title-lg-weight);line-height:var(--desktop--typography-title-lg-line-height);letter-spacing:var(--desktop--typography-title-lg-letter-spacing)}.c-avatar__md .c-avatar--initial{font-family:var(--desktop-typography-title-md-family);font-size:var(--desktop-typography-title-md-size);font-weight:var(--desktop-typography-title-md-weight);line-height:var(--desktop-typography-title-md-line-height);letter-spacing:var(--desktop-typography-title-md-letter-spacing)}.c-avatar__sm .c-avatar--initial{font-family:var(--desktop-typography-label-md-strong-family);font-size:var(--desktop-typography-label-md-strong-size);font-weight:var(--desktop-typography-label-md-strong-weight);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}.c-avatar__xs .c-avatar--initial{font-family:var(--desktop-typography-label-sm-strong-family, Satoshi);font-size:var(--desktop-typography-label-sm-strong-size);font-weight:var(--desktop-typography-label-sm-strong-weight);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconUserComponent, selector: "lib-icon-user", inputs: ["extraClass", "size"] }] });
|
|
28
|
+
}
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
30
|
+
type: Component,
|
|
31
|
+
args: [{ selector: 'lib-avatar', imports: [CommonModule, IconUserComponent], template: "<figure [ngClass]=\"['c-avatar','c-avatar__' + size, !src && !initial ? 'c-avatar--no-img' : '', !src && initial ? 'c-avatar--initial' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-avatar__img\" />\n <lib-icon-user *ngIf=\"!src && !initial\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n <span class=\"c-avatar--initial\" *ngIf=\"!src && initial\">{{initial}}</span>\n</figure>", styles: [".c-avatar{display:flex;align-items:center;justify-content:center;border-radius:var(--mobile-size-border-radius-full);background:var(--color-feedback-neutral-surface-background, #DEE7E6);overflow:hidden;cursor:pointer}.c-avatar__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-avatar__lg{width:3rem;height:3rem}.c-avatar__lg .c-avatar--initial{color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--mobile-typography-title-lg-family, Satoshi);font-size:var(--mobile--typography-title-lg-size, 1.5rem);font-style:normal;font-weight:var(--mobile--typography-title-lg-weight, 700);line-height:var(--mobile--typography-title-lg-line-height, 2rem);letter-spacing:var(--mobile--typography-title-lg-letter-spacing, 0rem)}.c-avatar__md{width:2.5rem;height:2.5rem}.c-avatar__md .c-avatar--initial{color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--mobile-typography-title-md-family, Satoshi);font-size:var(--mobile-typography-title-md-size, 1.25rem);font-style:normal;font-weight:var(--mobile-typography-title-md-weight, 700);line-height:var(--mobile-typography-title-md-line-height, 1.5rem);letter-spacing:var(--mobile-typography-title-md-letter-spacing, 0rem)}.c-avatar__sm{width:2rem;height:2rem}.c-avatar__sm .c-avatar--initial{color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--mobile-typography-label-md-strong-family, Satoshi);font-size:var(--mobile-typography-label-md-strong-size, 1rem);font-style:normal;font-weight:var(--mobile-typography-label-md-strong-weight, 700);line-height:var(--mobile-typography-label-md-strong-line-height, 1.5rem);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing, 0rem)}.c-avatar__xs{width:1.5rem;height:1.5rem}.c-avatar__xs .c-avatar--initial{color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--mobile-typography-label-sm-strong-family, Satoshi);font-size:var(--mobile-typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-strong-weight, 700);line-height:var(--mobile-typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing, 0rem)}@media (min-width: var(--tablet-size-viewport-width)){.c-avatar{border-radius:var(--tablet-size-border-radius-full)}.c-avatar__lg .c-avatar--initial{font-family:var(--tablet-typography-title-lg-family);font-size:var(--tablet--typography-title-lg-size);font-weight:var(--tablet--typography-title-lg-weight);line-height:var(--tablet--typography-title-lg-line-height);letter-spacing:var(--tablet--typography-title-lg-letter-spacing)}.c-avatar__md .c-avatar--initial{font-family:var(--tablet-typography-title-md-family);font-size:var(--tablet-typography-title-md-size);font-weight:var(--tablet-typography-title-md-weight);line-height:var(--tablet-typography-title-md-line-height);letter-spacing:var(--tablet-typography-title-md-letter-spacing)}.c-avatar__sm .c-avatar--initial{font-family:var(--tablet-typography-label-md-strong-family);font-size:var(--tablet-typography-label-md-strong-size);font-weight:var(--tablet-typography-label-md-strong-weight);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}.c-avatar__xs .c-avatar--initial{font-family:var(--tablet-typography-label-sm-strong-family, Satoshi);font-size:var(--tablet-typography-label-sm-strong-size);font-weight:var(--tablet-typography-label-sm-strong-weight);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-avatar{border-radius:var(--widescreen-size-border-radius-full)}.c-avatar__lg .c-avatar--initial{font-family:var(--widescreen-typography-title-lg-family);font-size:var(--widescreen--typography-title-lg-size);font-weight:var(--widescreen--typography-title-lg-weight);line-height:var(--widescreen--typography-title-lg-line-height);letter-spacing:var(--widescreen--typography-title-lg-letter-spacing)}.c-avatar__md .c-avatar--initial{font-family:var(--widescreen-typography-title-md-family);font-size:var(--widescreen-typography-title-md-size);font-weight:var(--widescreen-typography-title-md-weight);line-height:var(--widescreen-typography-title-md-line-height);letter-spacing:var(--widescreen-typography-title-md-letter-spacing)}.c-avatar__sm .c-avatar--initial{font-family:var(--widescreen-typography-label-md-strong-family);font-size:var(--widescreen-typography-label-md-strong-size);font-weight:var(--widescreen-typography-label-md-strong-weight);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}.c-avatar__xs .c-avatar--initial{font-family:var(--widescreen-typography-label-sm-strong-family, Satoshi);font-size:var(--widescreen-typography-label-sm-strong-size);font-weight:var(--widescreen-typography-label-sm-strong-weight);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-avatar{border-radius:var(--desktop-size-border-radius-full)}.c-avatar__lg .c-avatar--initial{font-family:var(--desktop-typography-title-lg-family);font-size:var(--desktop--typography-title-lg-size);font-weight:var(--desktop--typography-title-lg-weight);line-height:var(--desktop--typography-title-lg-line-height);letter-spacing:var(--desktop--typography-title-lg-letter-spacing)}.c-avatar__md .c-avatar--initial{font-family:var(--desktop-typography-title-md-family);font-size:var(--desktop-typography-title-md-size);font-weight:var(--desktop-typography-title-md-weight);line-height:var(--desktop-typography-title-md-line-height);letter-spacing:var(--desktop-typography-title-md-letter-spacing)}.c-avatar__sm .c-avatar--initial{font-family:var(--desktop-typography-label-md-strong-family);font-size:var(--desktop-typography-label-md-strong-size);font-weight:var(--desktop-typography-label-md-strong-weight);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}.c-avatar__xs .c-avatar--initial{font-family:var(--desktop-typography-label-sm-strong-family, Satoshi);font-size:var(--desktop-typography-label-sm-strong-size);font-weight:var(--desktop-typography-label-sm-strong-weight);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}\n"] }]
|
|
32
|
+
}], propDecorators: { size: [{
|
|
33
|
+
type: Input
|
|
34
|
+
}], initial: [{
|
|
35
|
+
type: Input
|
|
36
|
+
}], src: [{
|
|
37
|
+
type: Input
|
|
38
|
+
}], alt: [{
|
|
39
|
+
type: Input
|
|
40
|
+
}] } });
|
|
41
|
+
|
|
42
|
+
class IconSpinnerComponent {
|
|
43
|
+
extraClass = '';
|
|
44
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconSpinnerComponent, isStandalone: true, selector: "lib-icon-spinner", inputs: { extraClass: "extraClass" }, ngImport: i0, template: "<svg [ngClass]=\"['o-svg','o-svg__spinner',extraClass ? 'o-svg__spinner--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.0145 1.80949c.20184.66019-.16972 1.359-.82991 1.56084-1.11797.3418-2.12799.96809-2.93117 1.81753-.80318.84945-1.37198 1.89294-1.65069 3.02827s-.25778 2.32357.06074 3.44837c.31853 1.1248.92372 2.1476 1.75632 2.9683.8326.8206 1.86405 1.4109 2.99336 1.7131 1.1293.3023 2.31775.306 3.44895.0109 1.1311-.2951 2.1663-.879 3.004-1.6944.8378-.8154 1.4494-1.8343 1.7749-2.9571.1923-.6631.8857-1.0447 1.5487-.8525.6631.1923 1.0447.8857.8524 1.5487-.4461 1.5387-1.2843 2.935-2.4323 4.0524-1.148 1.1174-2.5665 1.9175-4.1166 2.3219-1.5502.4044-3.17876.3993-4.72633-.0148-1.54756-.4142-2.96104-1.2231-4.10201-2.3477-1.14097-1.1246-1.97031-2.5262-2.4068-4.0676-.436495-1.5414-.465178-3.16977-.08324-4.7256.38194-1.55582 1.1614-2.98578 2.26205-4.14984C4.53753 2.3062 5.92164 1.44796 7.45366.979572c.66019-.20184 1.359.169728 1.56084.829918Z\" fill=\"#fff\"/>\n</svg>", styles: ["@keyframes spin{to{transform:rotate(360deg)}}.o-svg__spinner{width:100%;height:100%;display:inline-block;animation:spin 1s linear infinite;transform-origin:center center}.o-svg__spinner--secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--tertiary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--disabled path{fill:var(--color-button-secondary-content-disabled)}.o-svg__spinner--inverse path{fill:var(--color-button-inverse-content-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
46
|
+
}
|
|
47
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconSpinnerComponent, decorators: [{
|
|
48
|
+
type: Component,
|
|
49
|
+
args: [{ selector: 'lib-icon-spinner', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__spinner',extraClass ? 'o-svg__spinner--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.0145 1.80949c.20184.66019-.16972 1.359-.82991 1.56084-1.11797.3418-2.12799.96809-2.93117 1.81753-.80318.84945-1.37198 1.89294-1.65069 3.02827s-.25778 2.32357.06074 3.44837c.31853 1.1248.92372 2.1476 1.75632 2.9683.8326.8206 1.86405 1.4109 2.99336 1.7131 1.1293.3023 2.31775.306 3.44895.0109 1.1311-.2951 2.1663-.879 3.004-1.6944.8378-.8154 1.4494-1.8343 1.7749-2.9571.1923-.6631.8857-1.0447 1.5487-.8525.6631.1923 1.0447.8857.8524 1.5487-.4461 1.5387-1.2843 2.935-2.4323 4.0524-1.148 1.1174-2.5665 1.9175-4.1166 2.3219-1.5502.4044-3.17876.3993-4.72633-.0148-1.54756-.4142-2.96104-1.2231-4.10201-2.3477-1.14097-1.1246-1.97031-2.5262-2.4068-4.0676-.436495-1.5414-.465178-3.16977-.08324-4.7256.38194-1.55582 1.1614-2.98578 2.26205-4.14984C4.53753 2.3062 5.92164 1.44796 7.45366.979572c.66019-.20184 1.359.169728 1.56084.829918Z\" fill=\"#fff\"/>\n</svg>", styles: ["@keyframes spin{to{transform:rotate(360deg)}}.o-svg__spinner{width:100%;height:100%;display:inline-block;animation:spin 1s linear infinite;transform-origin:center center}.o-svg__spinner--secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--tertiary path{fill:var(--color-button-secondary-content-default)}.o-svg__spinner--disabled path{fill:var(--color-button-secondary-content-disabled)}.o-svg__spinner--inverse path{fill:var(--color-button-inverse-content-disabled)}\n"] }]
|
|
50
|
+
}], propDecorators: { extraClass: [{
|
|
51
|
+
type: Input
|
|
52
|
+
}] } });
|
|
53
|
+
|
|
54
|
+
class ButtonComponent {
|
|
55
|
+
text;
|
|
56
|
+
ariaLabel;
|
|
57
|
+
disabled = false;
|
|
58
|
+
loading = false;
|
|
59
|
+
variant = 'primary';
|
|
60
|
+
size = 'primary';
|
|
61
|
+
loadingText = '';
|
|
62
|
+
iconBeforeContent;
|
|
63
|
+
iconAfterContent;
|
|
64
|
+
hasIconBefore = false;
|
|
65
|
+
hasIconAfter = false;
|
|
66
|
+
ngAfterContentInit() {
|
|
67
|
+
this.hasIconBefore = !!this.iconBeforeContent;
|
|
68
|
+
this.hasIconAfter = !!this.iconAfterContent;
|
|
69
|
+
}
|
|
70
|
+
get classes() {
|
|
71
|
+
const c = [
|
|
72
|
+
'c-button',
|
|
73
|
+
`c-button--${this.variant}`,
|
|
74
|
+
`c-button--${this.size}`,
|
|
75
|
+
this.loading ? 'is-loading' : '',
|
|
76
|
+
this.disabled ? 'c-button--disabled' : ''
|
|
77
|
+
];
|
|
78
|
+
return c.filter(Boolean).join(' ');
|
|
79
|
+
}
|
|
80
|
+
get computedAriaLabel() {
|
|
81
|
+
if (!this.text && this.ariaLabel)
|
|
82
|
+
return this.ariaLabel;
|
|
83
|
+
return null;
|
|
84
|
+
}
|
|
85
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
86
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { text: "text", ariaLabel: "ariaLabel", disabled: "disabled", loading: "loading", variant: "variant", size: "size", loadingText: "loadingText" }, queries: [{ propertyName: "iconBeforeContent", first: true, predicate: ["iconBefore"], descendants: true, read: ElementRef }, { propertyName: "iconAfterContent", first: true, predicate: ["iconAfter"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button__loading\" aria-hidden=\"true\"><lib-icon-spinner [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon-spinner></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--mobile-space-component-gap-md);cursor:pointer;font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-md) var(--mobile-space-component-padding-xl);border-radius:var(--mobile-size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-background-processed);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-sm) var(--mobile-space-component-padding-lg)}.c-button--sm{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-xs) var(--mobile-space-component-padding-sm)}.c-button--xs{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-sm-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-strong-weight);font-size:var(--mobile-typography-label-sm-strong-size);line-height:var(--mobile-typography-label-sm-strong-line-height);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-2xs) var(--mobile-space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}@media (min-width: var(--tablet-size-viewport-width)){.c-button{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing);padding:var(--tablet-space-component-padding-md) var(--tablet-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--tablet-typography-label-sm-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-strong-weight);font-size:var(--tablet-typography-label-sm-strong-size);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-button{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing);padding:var(--widescreen-space-component-padding-md) var(--widescreen-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--widescreen-typography-label-sm-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-strong-weight);font-size:var(--widescreen-typography-label-sm-strong-size);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-button{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing);padding:var(--desktop-space-component-padding-md) var(--desktop-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--desktop-typography-label-sm-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-strong-weight);font-size:var(--desktop-typography-label-sm-strong-size);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}.c-button--secondary{background-color:transparent;border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--mobile-size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconSpinnerComponent, selector: "lib-icon-spinner", inputs: ["extraClass"] }] });
|
|
87
|
+
}
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
89
|
+
type: Component,
|
|
90
|
+
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule, IconSpinnerComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button__loading\" aria-hidden=\"true\"><lib-icon-spinner [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon-spinner></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--mobile-space-component-gap-md);cursor:pointer;font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-md) var(--mobile-space-component-padding-xl);border-radius:var(--mobile-size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-background-processed);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-sm) var(--mobile-space-component-padding-lg)}.c-button--sm{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-xs) var(--mobile-space-component-padding-sm)}.c-button--xs{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-sm-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-strong-weight);font-size:var(--mobile-typography-label-sm-strong-size);line-height:var(--mobile-typography-label-sm-strong-line-height);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-2xs) var(--mobile-space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}@media (min-width: var(--tablet-size-viewport-width)){.c-button{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing);padding:var(--tablet-space-component-padding-md) var(--tablet-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--tablet-typography-label-sm-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-strong-weight);font-size:var(--tablet-typography-label-sm-strong-size);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-button{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing);padding:var(--widescreen-space-component-padding-md) var(--widescreen-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--widescreen-typography-label-sm-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-strong-weight);font-size:var(--widescreen-typography-label-sm-strong-size);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-button{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing);padding:var(--desktop-space-component-padding-md) var(--desktop-space-component-padding-xl)}.c-button--md,.c-button--sm{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}.c-button--xs{font-family:var(--desktop-typography-label-sm-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-strong-weight);font-size:var(--desktop-typography-label-sm-strong-size);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}.c-button--secondary{background-color:transparent;border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--mobile-size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-disabled)}\n"] }]
|
|
91
|
+
}], propDecorators: { text: [{
|
|
92
|
+
type: Input
|
|
93
|
+
}], ariaLabel: [{
|
|
94
|
+
type: Input
|
|
95
|
+
}], disabled: [{
|
|
96
|
+
type: Input
|
|
97
|
+
}], loading: [{
|
|
98
|
+
type: Input
|
|
99
|
+
}], variant: [{
|
|
100
|
+
type: Input
|
|
101
|
+
}], size: [{
|
|
102
|
+
type: Input
|
|
103
|
+
}], loadingText: [{
|
|
104
|
+
type: Input
|
|
105
|
+
}], iconBeforeContent: [{
|
|
106
|
+
type: ContentChild,
|
|
107
|
+
args: ['iconBefore', { read: ElementRef }]
|
|
108
|
+
}], iconAfterContent: [{
|
|
109
|
+
type: ContentChild,
|
|
110
|
+
args: ['iconAfter', { read: ElementRef }]
|
|
111
|
+
}] } });
|
|
112
|
+
|
|
113
|
+
class ButtonIconComponent {
|
|
114
|
+
/** Si es un icon‑only button, pon aquí su etiqueta accesible */
|
|
115
|
+
ariaLabel;
|
|
116
|
+
/** Deshabilita la interacción nativa */
|
|
117
|
+
disabled = false;
|
|
118
|
+
/** Estado de carga */
|
|
119
|
+
loading = false;
|
|
120
|
+
/** Variant: afecta colores y contraste */
|
|
121
|
+
variant = 'primary';
|
|
122
|
+
/** Tamaño */
|
|
123
|
+
size = 'primary';
|
|
124
|
+
/** Combina clases BEM según inputs */
|
|
125
|
+
get classes() {
|
|
126
|
+
const c = [
|
|
127
|
+
'c-button-icon',
|
|
128
|
+
`c-button-icon--${this.variant}`,
|
|
129
|
+
`c-button-icon--${this.size}`,
|
|
130
|
+
this.loading ? 'is-loading' : '',
|
|
131
|
+
this.disabled ? 'c-button-icon--disabled' : ''
|
|
132
|
+
];
|
|
133
|
+
return c.filter(Boolean).join(' ');
|
|
134
|
+
}
|
|
135
|
+
/** Para aria-label cuando no hay texto */
|
|
136
|
+
get computedAriaLabel() {
|
|
137
|
+
if (this.ariaLabel)
|
|
138
|
+
return this.ariaLabel;
|
|
139
|
+
return null;
|
|
140
|
+
}
|
|
141
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
142
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonIconComponent, isStandalone: true, selector: "lib-button-icon", inputs: { ariaLabel: "ariaLabel", disabled: "disabled", loading: "loading", variant: "variant", size: "size" }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button-icon__loading\" aria-hidden=\"true\"><lib-icon-spinner [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon-spinner></span>\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"!loading\" class=\"c-button-icon__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button-icon{display:flex;align-items:center;gap:var(--mobile-space-component-gap-md);cursor:pointer;font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-md) var(--mobile-space-component-padding-md);border-radius:var(--mobile-size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-default)}.c-button-icon:hover{background-color:var(--color-button-primary-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button-icon:focus{outline:2px solid var(--focus-outset)}.c-button-icon:pressed{background-color:var(--color-button-primary-background-processed);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button-icon:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-disabled);color:var(--color-button-primary-content-disabled)}.c-button-icon__icon,.c-button-icon__loading{width:24px;height:24px}.c-button-icon--md{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-sm) var(--mobile-space-component-padding-sm)}.c-button-icon--sm{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-xs) var(--mobile-space-component-padding-xs)}.c-button-icon--sm .c-button-icon__icon,.c-button-icon--sm .c-button-icon__loading{width:20px;height:20px}.c-button-icon--xs{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-sm-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-strong-weight);font-size:var(--mobile-typography-label-sm-strong-size);line-height:var(--mobile-typography-label-sm-strong-line-height);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-2xs) var(--mobile-space-component-padding-2xs)}.c-button-icon--xs .c-button-icon__icon,.c-button-icon--xs .c-button-icon__loading{width:16px;height:16px}@media (min-width: var(--tablet-size-viewport-width)){.c-button-icon,.c-button-icon--md,.c-button-icon--sm{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}.c-button-icon--xs{font-family:var(--tablet-typography-label-sm-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-strong-weight);font-size:var(--tablet-typography-label-sm-strong-size);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-button-icon,.c-button-icon--md,.c-button-icon--sm{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}.c-button-icon--xs{font-family:var(--widescreen-typography-label-sm-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-strong-weight);font-size:var(--widescreen-typography-label-sm-strong-size);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-button-icon,.c-button-icon--md,.c-button-icon--sm{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}.c-button-icon--xs{font-family:var(--desktop-typography-label-sm-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-strong-weight);font-size:var(--desktop-typography-label-sm-strong-size);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}.c-button-icon--secondary{background-color:transparent;border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button-icon--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button-icon--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button-icon--tertiary{background-color:transparent;border:0;color:var(--color-button-secondary-content-default)}.c-button-icon--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button-icon--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button-icon--danger{background-color:var(--color-button-danger-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-default);color:var(--color-button-danger-content-default)}.c-button-icon--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-hover)}.c-button-icon--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-pressed)}.c-button-icon--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-disabled)}.c-button-icon--inverse{background-color:var(--color-button-inverse-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button-icon--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button-icon--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-pressed)}.c-button-icon--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconSpinnerComponent, selector: "lib-icon-spinner", inputs: ["extraClass"] }] });
|
|
143
|
+
}
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, decorators: [{
|
|
145
|
+
type: Component,
|
|
146
|
+
args: [{ selector: 'lib-button-icon', imports: [CommonModule, IconSpinnerComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button-icon__loading\" aria-hidden=\"true\"><lib-icon-spinner [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon-spinner></span>\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"!loading\" class=\"c-button-icon__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button-icon{display:flex;align-items:center;gap:var(--mobile-space-component-gap-md);cursor:pointer;font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-md) var(--mobile-space-component-padding-md);border-radius:var(--mobile-size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-default)}.c-button-icon:hover{background-color:var(--color-button-primary-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button-icon:focus{outline:2px solid var(--focus-outset)}.c-button-icon:pressed{background-color:var(--color-button-primary-background-processed);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button-icon:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-primary-background-disabled);color:var(--color-button-primary-content-disabled)}.c-button-icon__icon,.c-button-icon__loading{width:24px;height:24px}.c-button-icon--md{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-sm) var(--mobile-space-component-padding-sm)}.c-button-icon--sm{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-xs) var(--mobile-space-component-padding-xs)}.c-button-icon--sm .c-button-icon__icon,.c-button-icon--sm .c-button-icon__loading{width:20px;height:20px}.c-button-icon--xs{gap:var(--mobile-space-component-gap-md);font-family:var(--mobile-typography-label-sm-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-strong-weight);font-size:var(--mobile-typography-label-sm-strong-size);line-height:var(--mobile-typography-label-sm-strong-line-height);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--mobile-space-component-padding-2xs) var(--mobile-space-component-padding-2xs)}.c-button-icon--xs .c-button-icon__icon,.c-button-icon--xs .c-button-icon__loading{width:16px;height:16px}@media (min-width: var(--tablet-size-viewport-width)){.c-button-icon,.c-button-icon--md,.c-button-icon--sm{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}.c-button-icon--xs{font-family:var(--tablet-typography-label-sm-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-strong-weight);font-size:var(--tablet-typography-label-sm-strong-size);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-button-icon,.c-button-icon--md,.c-button-icon--sm{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}.c-button-icon--xs{font-family:var(--widescreen-typography-label-sm-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-strong-weight);font-size:var(--widescreen-typography-label-sm-strong-size);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-button-icon,.c-button-icon--md,.c-button-icon--sm{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}.c-button-icon--xs{font-family:var(--desktop-typography-label-sm-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-strong-weight);font-size:var(--desktop-typography-label-sm-strong-size);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}.c-button-icon--secondary{background-color:transparent;border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button-icon--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button-icon--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button-icon--tertiary{background-color:transparent;border:0;color:var(--color-button-secondary-content-default)}.c-button-icon--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button-icon--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button-icon--danger{background-color:var(--color-button-danger-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-default);color:var(--color-button-danger-content-default)}.c-button-icon--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-hover)}.c-button-icon--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-pressed)}.c-button-icon--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-danger-background-disabled)}.c-button-icon--inverse{background-color:var(--color-button-inverse-background-default);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button-icon--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button-icon--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-pressed)}.c-button-icon--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--mobile-size-button-border-width) solid var(--color-button-inverse-background-disabled)}\n"] }]
|
|
147
|
+
}], propDecorators: { ariaLabel: [{
|
|
148
|
+
type: Input
|
|
149
|
+
}], disabled: [{
|
|
150
|
+
type: Input
|
|
151
|
+
}], loading: [{
|
|
152
|
+
type: Input
|
|
153
|
+
}], variant: [{
|
|
154
|
+
type: Input
|
|
155
|
+
}], size: [{
|
|
156
|
+
type: Input
|
|
157
|
+
}] } });
|
|
158
|
+
|
|
159
|
+
// libs/link/src/lib/link/link.component.ts
|
|
160
|
+
class LinkComponent {
|
|
161
|
+
text = '';
|
|
162
|
+
loadingText = '';
|
|
163
|
+
href = '';
|
|
164
|
+
external = false;
|
|
165
|
+
disabled = false;
|
|
166
|
+
variant = 'primary';
|
|
167
|
+
size = 'md';
|
|
168
|
+
iconBefore = false;
|
|
169
|
+
iconAfter = false;
|
|
170
|
+
get target() { return this.external ? '_blank' : '_self'; }
|
|
171
|
+
get rel() { return this.external ? 'noopener noreferrer' : null; }
|
|
172
|
+
get variantClass() { return this.variant !== 'primary' ? `c-link--${this.variant}` : ''; }
|
|
173
|
+
get sizeClass() { return this.size !== 'md' ? `c-link--${this.size}` : ''; }
|
|
174
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
175
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LinkComponent, isStandalone: true, selector: "lib-link", inputs: { text: "text", loadingText: "loadingText", href: "href", external: "external", disabled: "disabled", variant: "variant", size: "size", iconBefore: "iconBefore", iconAfter: "iconAfter" }, ngImport: i0, template: "<a\n [ngClass]=\"['c-link', variantClass, sizeClass, disabled ? 'c-link--disabled' : '']\"\n [href]=\"href\"\n [target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"external ? text + ' (abre en una pesta\u00F1a nueva)' : null\"\n>\n <ng-container *ngIf=\"!iconBefore\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconBefore]\"></ng-content></span>\n </ng-container>\n <span class=\"c-link__text\">{{ text }}</span>\n <span *ngIf=\"external\" class=\"sr-only\">(abre en una pesta\u00F1a nueva)</span>\n <ng-container *ngIf=\"!iconAfter\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconAfter]\"></ng-content></span>\n </ng-container>\n</a>", styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.c-link{display:flex;align-items:center;width:max-content;gap:var(--mobile-space-component-gap-xs);font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing);color:var(--color-action-primary-content-default);text-decoration:none}.c-link--sm{font-family:var(--mobile-typography-label-sm-default-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-default-size);line-height:var(--mobile-typography-label-sm-default-line-height);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--mobile-typography-label-xs-default-family),sans-serif;font-weight:var(--mobile-typography-label-xs-default-weight);font-size:var(--mobile-typography-label-xs-default-size);line-height:var(--mobile-typography-label-xs-default-line-height);letter-spacing:var(--mobile-typography-label-xs-default-letter-spacing)}@media (min-width: var(--tablet-size-viewport-width)){.c-link{gap:var(--tablet-space-component-gap-xs);font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-link--sm{font-family:var(--tablet-typography-label-sm-default-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-default-size);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--tablet-typography-label-xs-default-family),sans-serif;font-weight:var(--tablet-typography-label-xs-default-weight);font-size:var(--tablet-typography-label-xs-default-size);line-height:var(--tablet-typography-label-xs-default-line-height);letter-spacing:var(--tablet-typography-label-xs-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-link{gap:var(--widescreen-space-component-gap-xs);font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-link--sm{font-family:var(--widescreen-typography-label-sm-default-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-default-size);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--widescreen-typography-label-xs-default-family),sans-serif;font-weight:var(--widescreen-typography-label-xs-default-weight);font-size:var(--widescreen-typography-label-xs-default-size);line-height:var(--widescreen-typography-label-xs-default-line-height);letter-spacing:var(--widescreen-typography-label-xs-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-link{gap:var(--desktop-space-component-gap-xs);font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-link--sm{font-family:var(--desktop-typography-label-sm-default-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-default-size);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--desktop-typography-label-xs-default-family),sans-serif;font-weight:var(--desktop-typography-label-xs-default-weight);font-size:var(--desktop-typography-label-xs-default-size);line-height:var(--desktop-typography-label-xs-default-line-height);letter-spacing:var(--desktop-typography-label-xs-default-letter-spacing)}}.c-link__icon{color:var(--color-action-primary-content-default);width:18px;height:18px}.c-link__icon .o-svg__test{width:100%;height:100%;fill:currentColor}.c-link:hover{color:var(--color-action-primary-content-hover);text-decoration:underline}.c-link:focus{border:2px solid var(--color-decorative-primary-default);border-radius:var(--mobile-size-border-radius-sm)}.c-link:pressed{color:var(--color-action-primary-content-pressed);text-decoration:underline}.c-link:disabled{color:var(--color-action-primary-content-disabled)}.c-link:disabled .c-link__icon{color:var(--color-action-primary-content-disabled)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral .c-link__icon svg path{fill:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:hover .c-link__icon svg path{fill:var(--color-action-neutral-content-hover)}.c-link--neutral:pressed{color:var(--color-action-neutral-content-pressed)}.c-link--neutral:pressed .c-link__icon svg path{fill:var(--color-action-neutral-content-pressed)}.c-link--neutral:disabled{color:var(--color-action-neutral-content-disabled)}.c-link--neutral:disabled .c-link__icon svg path{fill:var(--color-action-neutral-content-disabled)}.c-link--danger{color:var(--color-action-danger-border-default)}.c-link--danger .c-link__icon{fill:var(--color-action-danger-border-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:hover .c-link__icon svg path{fill:var(--color-action-danger-content-hover)}.c-link--danger:pressed{color:var(--color-action-danger-content-pressed)}.c-link--danger:pressed .c-link__icon svg path{fill:var(--color-action-danger-content-pressed)}.c-link--danger:disabled{color:var(--color-action-danger-content-disabled)}.c-link--danger:disabled .c-link__icon svg path{fill:var(--color-action-danger-content-disabled)}\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"] }] });
|
|
176
|
+
}
|
|
177
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, decorators: [{
|
|
178
|
+
type: Component,
|
|
179
|
+
args: [{ selector: 'lib-link', standalone: true, imports: [CommonModule], template: "<a\n [ngClass]=\"['c-link', variantClass, sizeClass, disabled ? 'c-link--disabled' : '']\"\n [href]=\"href\"\n [target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"external ? text + ' (abre en una pesta\u00F1a nueva)' : null\"\n>\n <ng-container *ngIf=\"!iconBefore\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconBefore]\"></ng-content></span>\n </ng-container>\n <span class=\"c-link__text\">{{ text }}</span>\n <span *ngIf=\"external\" class=\"sr-only\">(abre en una pesta\u00F1a nueva)</span>\n <ng-container *ngIf=\"!iconAfter\">\n <span class=\"c-link__icon\"><ng-content select=\"[iconAfter]\"></ng-content></span>\n </ng-container>\n</a>", styles: [".sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.c-link{display:flex;align-items:center;width:max-content;gap:var(--mobile-space-component-gap-xs);font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing);color:var(--color-action-primary-content-default);text-decoration:none}.c-link--sm{font-family:var(--mobile-typography-label-sm-default-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-default-size);line-height:var(--mobile-typography-label-sm-default-line-height);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--mobile-typography-label-xs-default-family),sans-serif;font-weight:var(--mobile-typography-label-xs-default-weight);font-size:var(--mobile-typography-label-xs-default-size);line-height:var(--mobile-typography-label-xs-default-line-height);letter-spacing:var(--mobile-typography-label-xs-default-letter-spacing)}@media (min-width: var(--tablet-size-viewport-width)){.c-link{gap:var(--tablet-space-component-gap-xs);font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-link--sm{font-family:var(--tablet-typography-label-sm-default-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-default-size);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--tablet-typography-label-xs-default-family),sans-serif;font-weight:var(--tablet-typography-label-xs-default-weight);font-size:var(--tablet-typography-label-xs-default-size);line-height:var(--tablet-typography-label-xs-default-line-height);letter-spacing:var(--tablet-typography-label-xs-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-link{gap:var(--widescreen-space-component-gap-xs);font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-link--sm{font-family:var(--widescreen-typography-label-sm-default-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-default-size);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--widescreen-typography-label-xs-default-family),sans-serif;font-weight:var(--widescreen-typography-label-xs-default-weight);font-size:var(--widescreen-typography-label-xs-default-size);line-height:var(--widescreen-typography-label-xs-default-line-height);letter-spacing:var(--widescreen-typography-label-xs-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-link{gap:var(--desktop-space-component-gap-xs);font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-link--sm{font-family:var(--desktop-typography-label-sm-default-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-default-size);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--desktop-typography-label-xs-default-family),sans-serif;font-weight:var(--desktop-typography-label-xs-default-weight);font-size:var(--desktop-typography-label-xs-default-size);line-height:var(--desktop-typography-label-xs-default-line-height);letter-spacing:var(--desktop-typography-label-xs-default-letter-spacing)}}.c-link__icon{color:var(--color-action-primary-content-default);width:18px;height:18px}.c-link__icon .o-svg__test{width:100%;height:100%;fill:currentColor}.c-link:hover{color:var(--color-action-primary-content-hover);text-decoration:underline}.c-link:focus{border:2px solid var(--color-decorative-primary-default);border-radius:var(--mobile-size-border-radius-sm)}.c-link:pressed{color:var(--color-action-primary-content-pressed);text-decoration:underline}.c-link:disabled{color:var(--color-action-primary-content-disabled)}.c-link:disabled .c-link__icon{color:var(--color-action-primary-content-disabled)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral .c-link__icon svg path{fill:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:hover .c-link__icon svg path{fill:var(--color-action-neutral-content-hover)}.c-link--neutral:pressed{color:var(--color-action-neutral-content-pressed)}.c-link--neutral:pressed .c-link__icon svg path{fill:var(--color-action-neutral-content-pressed)}.c-link--neutral:disabled{color:var(--color-action-neutral-content-disabled)}.c-link--neutral:disabled .c-link__icon svg path{fill:var(--color-action-neutral-content-disabled)}.c-link--danger{color:var(--color-action-danger-border-default)}.c-link--danger .c-link__icon{fill:var(--color-action-danger-border-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:hover .c-link__icon svg path{fill:var(--color-action-danger-content-hover)}.c-link--danger:pressed{color:var(--color-action-danger-content-pressed)}.c-link--danger:pressed .c-link__icon svg path{fill:var(--color-action-danger-content-pressed)}.c-link--danger:disabled{color:var(--color-action-danger-content-disabled)}.c-link--danger:disabled .c-link__icon svg path{fill:var(--color-action-danger-content-disabled)}\n"] }]
|
|
180
|
+
}], propDecorators: { text: [{
|
|
181
|
+
type: Input
|
|
182
|
+
}], loadingText: [{
|
|
183
|
+
type: Input
|
|
184
|
+
}], href: [{
|
|
185
|
+
type: Input
|
|
186
|
+
}], external: [{
|
|
187
|
+
type: Input
|
|
188
|
+
}], disabled: [{
|
|
189
|
+
type: Input
|
|
190
|
+
}], variant: [{
|
|
191
|
+
type: Input
|
|
192
|
+
}], size: [{
|
|
193
|
+
type: Input
|
|
194
|
+
}], iconBefore: [{
|
|
195
|
+
type: Input
|
|
196
|
+
}], iconAfter: [{
|
|
197
|
+
type: Input
|
|
198
|
+
}] } });
|
|
199
|
+
|
|
200
|
+
class ButtonSetComponent {
|
|
201
|
+
primaryText;
|
|
202
|
+
secondaryText;
|
|
203
|
+
tertiaryText;
|
|
204
|
+
align = 'right';
|
|
205
|
+
get alignmentClass() {
|
|
206
|
+
return `c-button-set--${this.align}`;
|
|
207
|
+
}
|
|
208
|
+
handlePrimaryClick() {
|
|
209
|
+
console.log('Primary clicked');
|
|
210
|
+
}
|
|
211
|
+
handleSecondaryClick() {
|
|
212
|
+
console.log('Secondary clicked');
|
|
213
|
+
}
|
|
214
|
+
handleTertiaryClick() {
|
|
215
|
+
console.log('Tertiary clicked');
|
|
216
|
+
}
|
|
217
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
218
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonSetComponent, isStandalone: true, selector: "lib-button-set", inputs: { primaryText: "primaryText", secondaryText: "secondaryText", tertiaryText: "tertiaryText", align: "align" }, ngImport: i0, template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-link\n [text]=\"tertiaryText\"\n variant=\"primary\"\n (click)=\"handleTertiaryClick()\"\n ></lib-link>\n \n <lib-button\n [text]=\"secondaryText\"\n variant=\"secondary\"\n size=\"primary\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n \n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"primary\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n ", styles: [".c-button-set{display:flex;align-items:center;gap:var(--mobile-space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{flex-direction:column-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "variant", "size", "loadingText"] }, { kind: "component", type: LinkComponent, selector: "lib-link", inputs: ["text", "loadingText", "href", "external", "disabled", "variant", "size", "iconBefore", "iconAfter"] }] });
|
|
219
|
+
}
|
|
220
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, decorators: [{
|
|
221
|
+
type: Component,
|
|
222
|
+
args: [{ selector: 'lib-button-set', standalone: true, imports: [CommonModule, ButtonComponent, LinkComponent], template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-link\n [text]=\"tertiaryText\"\n variant=\"primary\"\n (click)=\"handleTertiaryClick()\"\n ></lib-link>\n \n <lib-button\n [text]=\"secondaryText\"\n variant=\"secondary\"\n size=\"primary\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n \n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"primary\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n ", styles: [".c-button-set{display:flex;align-items:center;gap:var(--mobile-space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{flex-direction:column-reverse}\n"] }]
|
|
223
|
+
}], propDecorators: { primaryText: [{
|
|
224
|
+
type: Input
|
|
225
|
+
}], secondaryText: [{
|
|
226
|
+
type: Input
|
|
227
|
+
}], tertiaryText: [{
|
|
228
|
+
type: Input
|
|
229
|
+
}], align: [{
|
|
230
|
+
type: Input
|
|
231
|
+
}] } });
|
|
232
|
+
|
|
233
|
+
class CheckboxComponent {
|
|
234
|
+
label = '';
|
|
235
|
+
id = '';
|
|
236
|
+
checked = false;
|
|
237
|
+
disabled = false;
|
|
238
|
+
error = false;
|
|
239
|
+
indeterminate = false;
|
|
240
|
+
changed = new EventEmitter();
|
|
241
|
+
onChange(event) {
|
|
242
|
+
const input = event.target;
|
|
243
|
+
this.changed.emit(input.checked);
|
|
244
|
+
}
|
|
245
|
+
get ariaChecked() {
|
|
246
|
+
return this.indeterminate ? 'mixed' : String(this.checked);
|
|
247
|
+
}
|
|
248
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
249
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CheckboxComponent, isStandalone: true, selector: "lib-checkbox", inputs: { label: "label", id: "id", checked: "checked", disabled: "disabled", error: "error", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, ngImport: i0, template: "<label\n [attr.for]=\"id\"\n [class.has-error]=\"error\"\n class=\"c-checkbox\"\n>\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n role=\"checkbox\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"onChange($event)\"\n />\n\n <span class=\"c-checkbox__custom\">\n <svg *ngIf=\"checked && !indeterminate\" class=\"c-checkbox__tick\" viewBox=\"0 0 24 24\">\n <polyline points=\"4 12 10 18 20 6\" />\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n <span class=\"c-checkbox__text\">{{ label }}</span>\n</label>\n", styles: [".c-checkbox{display:inline-flex;align-items:center;gap:var(--mobile-space-component-gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-checkbox__input{display:none}.c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__input:checked:hover+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox__input:focus+.c-checkbox__custom{outline:2px solid var(--focus-outset)}.c-checkbox__input:disabled+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__text,.c-checkbox__input:disabled+.c-checkbox__text{color:var(--color-textfield-content-disabled, #7D8483)}.c-checkbox__input:checked+.c-checkbox__custom .c-checkbox__tick{display:block}.c-checkbox.has-error .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929A99);border-radius:var(--mobile-size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__tick{width:12px;height:12px;stroke:#fff;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:none}.c-checkbox:hover__custom{border-color:var(--color-textfield-border-hover, #7D8483)}.c-checkbox:pressed__custom{border-color:var(--color-textfield-border-pressed, #7D8483)}.c-checkbox__text{font-size:.875rem}.c-checkbox__indeterminate{width:12px;height:2px;border-radius:1px;background-color:#fff}@media (min-width: var(--tablet-size-viewport-width)){.c-checkbox{font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-checkbox__custom{border-radius:var(--tablet-size-border-radius-sm)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-checkbox{font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-checkbox__custom{border-radius:var(--widescreen-size-border-radius-sm)}}@media (min-width: var(--desktop-size-viewport-width)){.c-checkbox{font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-checkbox__custom{border-radius:var(--desktop-size-border-radius-sm)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
250
|
+
}
|
|
251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
252
|
+
type: Component,
|
|
253
|
+
args: [{ selector: 'lib-checkbox', standalone: true, imports: [CommonModule], template: "<label\n [attr.for]=\"id\"\n [class.has-error]=\"error\"\n class=\"c-checkbox\"\n>\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n role=\"checkbox\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"onChange($event)\"\n />\n\n <span class=\"c-checkbox__custom\">\n <svg *ngIf=\"checked && !indeterminate\" class=\"c-checkbox__tick\" viewBox=\"0 0 24 24\">\n <polyline points=\"4 12 10 18 20 6\" />\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n <span class=\"c-checkbox__text\">{{ label }}</span>\n</label>\n", styles: [".c-checkbox{display:inline-flex;align-items:center;gap:var(--mobile-space-component-gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-checkbox__input{display:none}.c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__input:checked:hover+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox__input:focus+.c-checkbox__custom{outline:2px solid var(--focus-outset)}.c-checkbox__input:disabled+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__text,.c-checkbox__input:disabled+.c-checkbox__text{color:var(--color-textfield-content-disabled, #7D8483)}.c-checkbox__input:checked+.c-checkbox__custom .c-checkbox__tick{display:block}.c-checkbox.has-error .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border:var(--size-border-width-md, 2px) solid var(--color-textfield-border-default, #929A99);border-radius:var(--mobile-size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__tick{width:12px;height:12px;stroke:#fff;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:none}.c-checkbox:hover__custom{border-color:var(--color-textfield-border-hover, #7D8483)}.c-checkbox:pressed__custom{border-color:var(--color-textfield-border-pressed, #7D8483)}.c-checkbox__text{font-size:.875rem}.c-checkbox__indeterminate{width:12px;height:2px;border-radius:1px;background-color:#fff}@media (min-width: var(--tablet-size-viewport-width)){.c-checkbox{font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-checkbox__custom{border-radius:var(--tablet-size-border-radius-sm)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-checkbox{font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-checkbox__custom{border-radius:var(--widescreen-size-border-radius-sm)}}@media (min-width: var(--desktop-size-viewport-width)){.c-checkbox{font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-checkbox__custom{border-radius:var(--desktop-size-border-radius-sm)}}\n"] }]
|
|
254
|
+
}], propDecorators: { label: [{
|
|
255
|
+
type: Input
|
|
256
|
+
}], id: [{
|
|
257
|
+
type: Input
|
|
258
|
+
}], checked: [{
|
|
259
|
+
type: Input
|
|
260
|
+
}], disabled: [{
|
|
261
|
+
type: Input
|
|
262
|
+
}], error: [{
|
|
263
|
+
type: Input
|
|
264
|
+
}], indeterminate: [{
|
|
265
|
+
type: Input
|
|
266
|
+
}], changed: [{
|
|
267
|
+
type: Output
|
|
268
|
+
}] } });
|
|
269
|
+
|
|
270
|
+
class CheckboxGroupComponent {
|
|
271
|
+
legend = '';
|
|
272
|
+
name = '';
|
|
273
|
+
options = [];
|
|
274
|
+
selected = [];
|
|
275
|
+
parentLabel;
|
|
276
|
+
selectionChange = new EventEmitter();
|
|
277
|
+
allChildrenSelected = false;
|
|
278
|
+
someChildrenSelected = false;
|
|
279
|
+
onParentChange(event) {
|
|
280
|
+
console.log('Padre cambió', event);
|
|
281
|
+
}
|
|
282
|
+
isChecked(value) {
|
|
283
|
+
return this.selected.includes(value);
|
|
284
|
+
}
|
|
285
|
+
toggle(value) {
|
|
286
|
+
if (this.selected.includes(value)) {
|
|
287
|
+
this.selected = this.selected.filter(v => v !== value);
|
|
288
|
+
}
|
|
289
|
+
else {
|
|
290
|
+
this.selected.push(value);
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
get isParentIndeterminate() {
|
|
294
|
+
return (this.selected.length > 0 &&
|
|
295
|
+
this.selected.length < this.options.length);
|
|
296
|
+
}
|
|
297
|
+
get isParentChecked() {
|
|
298
|
+
return this.selected.length === this.options.length;
|
|
299
|
+
}
|
|
300
|
+
toggleParent() {
|
|
301
|
+
if (this.isParentChecked) {
|
|
302
|
+
this.selected = [];
|
|
303
|
+
}
|
|
304
|
+
else {
|
|
305
|
+
this.selected = this.options.map(o => o.value);
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
onChildChange(value, isChecked) {
|
|
309
|
+
if (isChecked) {
|
|
310
|
+
this.selected.push(value);
|
|
311
|
+
}
|
|
312
|
+
else {
|
|
313
|
+
this.selected = this.selected.filter(v => v !== value);
|
|
314
|
+
}
|
|
315
|
+
this.emitSelectionChange();
|
|
316
|
+
}
|
|
317
|
+
emitSelectionChange() {
|
|
318
|
+
this.selectionChange.emit(this.selected);
|
|
319
|
+
}
|
|
320
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
321
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CheckboxGroupComponent, isStandalone: true, selector: "lib-checkbox-group", inputs: { legend: "legend", name: "name", options: "options", selected: "selected", parentLabel: "parentLabel" }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<fieldset class=\"c-checkbox-group\">\n <legend class=\"c-checkbox-group__legend\">{{ legend }}</legend>\n \n <!-- Checkbox padre si existe -->\n <lib-checkbox\n [label]=\"parentLabel\"\n [checked]=\"allChildrenSelected\"\n [indeterminate]=\"someChildrenSelected\"\n (changed)=\"onParentChange($event)\"\n ></lib-checkbox>\n \n <!-- Lista de opciones -->\n <lib-checkbox\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [checked]=\"selected.includes(option.value)\"\n (changed)=\"onChildChange(option.value, $event)\"\n ></lib-checkbox>\n</fieldset>\n ", styles: [".c-checkbox-group{display:flex;flex-direction:column;gap:var(--mobile-space-container-gap-sm);border:0;padding:0}.c-checkbox-group__options{display:flex;flex-direction:column;gap:var(--mobile-space-container-gap-md);padding-left:6px}.c-checkbox-group__helper{display:flex;align-items:center;gap:var(--mobile-space-component-gap-sm);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-size);line-height:var(--mobile-typography-label-sm-line-height);letter-spacing:var(--mobile-typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}@media (min-width: var(--tablet-size-viewport-width)){.c-checkbox-group{gap:var(--tablet-space-container-gap-sm)}.c-checkbox-group__options{gap:var(--tablet-space-container-gap-md)}.c-checkbox-group__helper{gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-size);line-height:var(--tablet-typography-label-sm-line-height);letter-spacing:var(--tablet-typography-label-sm-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-checkbox-group{gap:var(--widescreen-space-container-gap-sm)}.c-checkbox-group__options{gap:var(--widescreen-space-container-gap-md)}.c-checkbox-group__helper{gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-size);line-height:var(--widescreen-typography-label-sm-line-height);letter-spacing:var(--widescreen-typography-label-sm-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-checkbox-group{gap:var(--desktop-space-container-gap-sm)}.c-checkbox-group__options{gap:var(--desktop-space-container-gap-md)}.c-checkbox-group__helper{gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-size);line-height:var(--desktop-typography-label-sm-line-height);letter-spacing:var(--desktop-typography-label-sm-letter-spacing)}}.c-checkbox-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate"], outputs: ["changed"] }] });
|
|
322
|
+
}
|
|
323
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
324
|
+
type: Component,
|
|
325
|
+
args: [{ selector: 'lib-checkbox-group', standalone: true, imports: [CommonModule, CheckboxComponent], template: "<fieldset class=\"c-checkbox-group\">\n <legend class=\"c-checkbox-group__legend\">{{ legend }}</legend>\n \n <!-- Checkbox padre si existe -->\n <lib-checkbox\n [label]=\"parentLabel\"\n [checked]=\"allChildrenSelected\"\n [indeterminate]=\"someChildrenSelected\"\n (changed)=\"onParentChange($event)\"\n ></lib-checkbox>\n \n <!-- Lista de opciones -->\n <lib-checkbox\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [checked]=\"selected.includes(option.value)\"\n (changed)=\"onChildChange(option.value, $event)\"\n ></lib-checkbox>\n</fieldset>\n ", styles: [".c-checkbox-group{display:flex;flex-direction:column;gap:var(--mobile-space-container-gap-sm);border:0;padding:0}.c-checkbox-group__options{display:flex;flex-direction:column;gap:var(--mobile-space-container-gap-md);padding-left:6px}.c-checkbox-group__helper{display:flex;align-items:center;gap:var(--mobile-space-component-gap-sm);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-size);line-height:var(--mobile-typography-label-sm-line-height);letter-spacing:var(--mobile-typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}@media (min-width: var(--tablet-size-viewport-width)){.c-checkbox-group{gap:var(--tablet-space-container-gap-sm)}.c-checkbox-group__options{gap:var(--tablet-space-container-gap-md)}.c-checkbox-group__helper{gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-size);line-height:var(--tablet-typography-label-sm-line-height);letter-spacing:var(--tablet-typography-label-sm-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-checkbox-group{gap:var(--widescreen-space-container-gap-sm)}.c-checkbox-group__options{gap:var(--widescreen-space-container-gap-md)}.c-checkbox-group__helper{gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-size);line-height:var(--widescreen-typography-label-sm-line-height);letter-spacing:var(--widescreen-typography-label-sm-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-checkbox-group{gap:var(--desktop-space-container-gap-sm)}.c-checkbox-group__options{gap:var(--desktop-space-container-gap-md)}.c-checkbox-group__helper{gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-size);line-height:var(--desktop-typography-label-sm-line-height);letter-spacing:var(--desktop-typography-label-sm-letter-spacing)}}.c-checkbox-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
326
|
+
}], propDecorators: { legend: [{
|
|
327
|
+
type: Input
|
|
328
|
+
}], name: [{
|
|
329
|
+
type: Input
|
|
330
|
+
}], options: [{
|
|
331
|
+
type: Input
|
|
332
|
+
}], selected: [{
|
|
333
|
+
type: Input
|
|
334
|
+
}], parentLabel: [{
|
|
335
|
+
type: Input
|
|
336
|
+
}], selectionChange: [{
|
|
337
|
+
type: Output
|
|
338
|
+
}] } });
|
|
339
|
+
|
|
340
|
+
class ChipsComponent {
|
|
341
|
+
options = [];
|
|
342
|
+
selectedValues = [];
|
|
343
|
+
toggle(value) {
|
|
344
|
+
const index = this.selectedValues.indexOf(value);
|
|
345
|
+
if (index > -1) {
|
|
346
|
+
this.selectedValues.splice(index, 1);
|
|
347
|
+
}
|
|
348
|
+
else {
|
|
349
|
+
this.selectedValues.push(value);
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
isChecked(value) {
|
|
353
|
+
return this.selectedValues.includes(value);
|
|
354
|
+
}
|
|
355
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
356
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ChipsComponent, isStandalone: true, selector: "lib-chips", inputs: { options: "options", selectedValues: "selectedValues" }, ngImport: i0, template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n <label\n *ngFor=\"let option of options\"\n class=\"c-chip__label\"\n >\n <input\n type=\"checkbox\"\n [value]=\"option.value\"\n [checked]=\"isChecked(option.value)\"\n (change)=\"toggle(option.value)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--mobile-space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;padding:var(--mobile-space-container-stack-sm) var(--mobile-space-container-stack-md);border:1px solid var(--color-action-primary-selected-border-default);border-radius:50px;color:var(--color-action-primary-content-default);cursor:pointer}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:focus{outline:2px solid var(--focus-outset)}.c-chip__label:pressed{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-background-disabled);color:var(--color-action-primary-content-disabled)}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--base-color-basic-white);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus{outline:2px solid var(--focus-outset)}.c-chip__label:has(input:checked):pressed{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{display:none}@media (min-width: var(--tablet-size-viewport-width)){.c-chip{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-chip{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-chip{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
357
|
+
}
|
|
358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
359
|
+
type: Component,
|
|
360
|
+
args: [{ selector: 'lib-chips', standalone: true, imports: [CommonModule], template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n <label\n *ngFor=\"let option of options\"\n class=\"c-chip__label\"\n >\n <input\n type=\"checkbox\"\n [value]=\"option.value\"\n [checked]=\"isChecked(option.value)\"\n (change)=\"toggle(option.value)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--mobile-space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-md-strong-weight);font-size:var(--mobile-typography-label-md-strong-size);line-height:var(--mobile-typography-label-md-strong-line-height);letter-spacing:var(--mobile-typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;padding:var(--mobile-space-container-stack-sm) var(--mobile-space-container-stack-md);border:1px solid var(--color-action-primary-selected-border-default);border-radius:50px;color:var(--color-action-primary-content-default);cursor:pointer}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:focus{outline:2px solid var(--focus-outset)}.c-chip__label:pressed{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-background-disabled);color:var(--color-action-primary-content-disabled)}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--base-color-basic-white);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus{outline:2px solid var(--focus-outset)}.c-chip__label:has(input:checked):pressed{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{display:none}@media (min-width: var(--tablet-size-viewport-width)){.c-chip{font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-md-strong-weight);font-size:var(--tablet-typography-label-md-strong-size);line-height:var(--tablet-typography-label-md-strong-line-height);letter-spacing:var(--tablet-typography-label-md-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-chip{font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-md-strong-weight);font-size:var(--widescreen-typography-label-md-strong-size);line-height:var(--widescreen-typography-label-md-strong-line-height);letter-spacing:var(--widescreen-typography-label-md-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-chip{font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-md-strong-weight);font-size:var(--desktop-typography-label-md-strong-size);line-height:var(--desktop-typography-label-md-strong-line-height);letter-spacing:var(--desktop-typography-label-md-strong-letter-spacing)}}\n"] }]
|
|
361
|
+
}], propDecorators: { options: [{
|
|
362
|
+
type: Input
|
|
363
|
+
}], selectedValues: [{
|
|
364
|
+
type: Input
|
|
365
|
+
}] } });
|
|
366
|
+
|
|
367
|
+
class DesignTokensComponent {
|
|
368
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DesignTokensComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
369
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: DesignTokensComponent, isStandalone: true, selector: "lib-design-tokens", ngImport: i0, template: "<p>DesignTokens works!</p>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
370
|
+
}
|
|
371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DesignTokensComponent, decorators: [{
|
|
372
|
+
type: Component,
|
|
373
|
+
args: [{ selector: 'lib-design-tokens', imports: [CommonModule], template: "<p>DesignTokens works!</p>\n" }]
|
|
374
|
+
}] });
|
|
375
|
+
|
|
376
|
+
class IconAlertComponent {
|
|
377
|
+
extraClass = '';
|
|
378
|
+
size = 'lg';
|
|
379
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
380
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconAlertComponent, isStandalone: true, selector: "lib-icon-alert", inputs: { extraClass: "extraClass", size: "size" }, ngImport: i0, template: "<svg [ngClass]=\"['o-svg','o-svg__alert','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"m18.5001 14.6946-6.832-11.86486c-.1708-.29068-.4145-.53171-.7071-.69917-.2925-.16747-.6238-.25557-.9609-.25557-.33711 0-.66836.0881-.96094.25557-.29257.16746-.5363.40849-.70702.69917L1.50011 14.6946c-.16427.2811-.25084.6009-.25084.9265 0 .3257.08657.6454.25084.9266.16854.2924.41185.5348.70497.7021.29311.1674.62548.2538.96299.2503H16.8321c.3373.0032.6693-.0833.9621-.2507.2929-.1673.5359-.4095.7043-.7017.1645-.281.2514-.6007.2517-.9263.0002-.3257-.0861-.6455-.2501-.9268Zm-1.0836 1.2273c-.0595.1016-.1451.1856-.2477.2432-.1027.0577-.2189.087-.3367.085H3.16807c-.11775.002-.23392-.0273-.33661-.085-.10269-.0576-.1882-.1416-.24776-.2432-.05395-.0913-.08241-.1955-.08241-.3015 0-.1061.02846-.2103.08241-.3016L9.41573 3.45396c.06076-.10112.14666-.18479.24933-.24288.10268-.05808.21864-.08861.33664-.08861.1179 0 .2339.03053.3366.08861.1026.05809.1885.14176.2493.24288l6.832 11.86484c.0535.0916.0814.1959.0809.302-.0006.1061-.0296.2101-.084.3011Zm-8.04139-4.6718V8.12505c0-.16576.06584-.32473.18305-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v3.12505c0 .1657-.0658.3247-.1831.4419-.1172.1172-.2761.1831-.4419.1831-.16576 0-.32473-.0659-.44194-.1831-.11721-.1172-.18305-.2762-.18305-.4419Zm1.56249 2.8125c0 .1854-.055.3666-.158.5208-.103.1542-.2494.2743-.4207.3453-.1713.0709-.35983.0895-.54169.0533-.18186-.0361-.34891-.1254-.48002-.2565s-.2204-.2982-.25657-.4801c-.03617-.1818-.01761-.3703.05335-.5416.07096-.1713.19112-.3177.34529-.4208.15417-.103.33543-.1579.52084-.1579.2486 0 .4871.0987.6629.2745.1758.1759.2746.4143.2746.663Z\" fill=\"#BA2F1E\"/>\n </svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}.o-svg__alert{display:inline-block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
381
|
+
}
|
|
382
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconAlertComponent, decorators: [{
|
|
383
|
+
type: Component,
|
|
384
|
+
args: [{ selector: 'lib-icon-alert', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__alert','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"m18.5001 14.6946-6.832-11.86486c-.1708-.29068-.4145-.53171-.7071-.69917-.2925-.16747-.6238-.25557-.9609-.25557-.33711 0-.66836.0881-.96094.25557-.29257.16746-.5363.40849-.70702.69917L1.50011 14.6946c-.16427.2811-.25084.6009-.25084.9265 0 .3257.08657.6454.25084.9266.16854.2924.41185.5348.70497.7021.29311.1674.62548.2538.96299.2503H16.8321c.3373.0032.6693-.0833.9621-.2507.2929-.1673.5359-.4095.7043-.7017.1645-.281.2514-.6007.2517-.9263.0002-.3257-.0861-.6455-.2501-.9268Zm-1.0836 1.2273c-.0595.1016-.1451.1856-.2477.2432-.1027.0577-.2189.087-.3367.085H3.16807c-.11775.002-.23392-.0273-.33661-.085-.10269-.0576-.1882-.1416-.24776-.2432-.05395-.0913-.08241-.1955-.08241-.3015 0-.1061.02846-.2103.08241-.3016L9.41573 3.45396c.06076-.10112.14666-.18479.24933-.24288.10268-.05808.21864-.08861.33664-.08861.1179 0 .2339.03053.3366.08861.1026.05809.1885.14176.2493.24288l6.832 11.86484c.0535.0916.0814.1959.0809.302-.0006.1061-.0296.2101-.084.3011Zm-8.04139-4.6718V8.12505c0-.16576.06584-.32473.18305-.44194.11721-.11721.27618-.18306.44194-.18306.1658 0 .3247.06585.4419.18306.1173.11721.1831.27618.1831.44194v3.12505c0 .1657-.0658.3247-.1831.4419-.1172.1172-.2761.1831-.4419.1831-.16576 0-.32473-.0659-.44194-.1831-.11721-.1172-.18305-.2762-.18305-.4419Zm1.56249 2.8125c0 .1854-.055.3666-.158.5208-.103.1542-.2494.2743-.4207.3453-.1713.0709-.35983.0895-.54169.0533-.18186-.0361-.34891-.1254-.48002-.2565s-.2204-.2982-.25657-.4801c-.03617-.1818-.01761-.3703.05335-.5416.07096-.1713.19112-.3177.34529-.4208.15417-.103.33543-.1579.52084-.1579.2486 0 .4871.0987.6629.2745.1758.1759.2746.4143.2746.663Z\" fill=\"#BA2F1E\"/>\n </svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}.o-svg__alert{display:inline-block}\n"] }]
|
|
385
|
+
}], propDecorators: { extraClass: [{
|
|
386
|
+
type: Input
|
|
387
|
+
}], size: [{
|
|
388
|
+
type: Input
|
|
389
|
+
}] } });
|
|
390
|
+
|
|
391
|
+
class IconEyeComponent {
|
|
392
|
+
variant = 'open';
|
|
393
|
+
extraClass = '';
|
|
394
|
+
size = 'lg';
|
|
395
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconEyeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
396
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconEyeComponent, isStandalone: true, selector: "lib-icon-eye", inputs: { variant: "variant", extraClass: "extraClass", size: "size" }, ngImport: i0, template: "<svg *ngIf=\"variant === 'open'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M19.3211 9.74688c-.0274-.06172-.6891-1.52969-2.1602-3.00079C15.2008 4.78594 12.725 3.75 9.99999 3.75c-2.725 0-5.20078 1.03594-7.16094 2.99609C1.36796 8.21719.703118 9.6875.678899 9.74688.643362 9.82681.625 9.91331.625 10.0008c0 .0875.018362.174.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c2.72501 0 5.20081-1.0359 7.16091-2.9953 1.4711-1.4711 2.1328-2.9383 2.1602-3 .0355-.0799.0539-.1664.0539-.2539 0-.08749-.0184-.17399-.0539-.25392ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977C3.0419 11.6927 2.43483 10.8836 1.95312 10c.48158-.88364 1.08867-1.69283 1.80234-2.40234C5.49452 5.87422 7.5953 5 9.99999 5c2.40471 0 4.50551.87422 6.24451 2.59766.715.70934 1.3234 1.51853 1.8063 2.40234-.5633 1.0516-3.0172 5-8.05081 5Zm0-8.75c-.74168 0-1.4667.21993-2.08339.63199-.61668.41205-1.09733.99772-1.38116 1.68295-.28382.68522-.35809 1.43926-.21339 2.16666.14469.7274.50184 1.3956 1.02629 1.9201.52445.5244 1.19263.8816 1.92006 1.0262.72743.1447 1.4814.0705 2.1667-.2134.6852-.2838 1.2708-.7644 1.6829-1.3811.4121-.6167.632-1.3417.632-2.0834-.001-.99424-.3965-1.94747-1.0995-2.65051-.703-.70304-1.6563-1.09846-2.65051-1.09949Zm0 6.25c-.49445 0-.9778-.1466-1.38892-.4213-.41113-.2747-.73156-.6652-.92078-1.122-.18922-.4568-.23872-.95947-.14226-1.44443.09646-.48495.33456-.93041.68419-1.28004.34964-.34963.79509-.58773 1.28005-.68419.48495-.09647.98763-.04696 1.44443.14226.4568.18922.8473.50965 1.122.92077.2747.41113.4213.89448.4213 1.38893 0 .663-.2634 1.2989-.7322 1.7678-.4689.4688-1.1048.7322-1.76781.7322Z\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"variant === 'close'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M4.21249 2.70468c-.05488-.06187-.1215-.11223-.196-.14816-.07449-.03594-.15538-.05673-.23796-.06117-.08259-.00444-.16524.00755-.24316.03528-.07791.02774-.14955.07066-.21076.12628-.06121.05563-.11077.12285-.1458.19776-.03504.07492-.05486.15605-.05831.23869-.00346.08263.00953.16513.03819.24271.02867.07758.07245.1487.1288.20923l1.50313 1.65391C1.95312 6.94062.732805 9.62499.678899 9.74687.643362 9.8268.625 9.9133.625 10.0008c0 .0874.018362.1739.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c1.40051.008 2.78681-.2804 4.06801-.8461l1.7187 1.8914c.0549.0619.1215.1122.196.1482.0745.0359.1554.0567.238.0611.0826.0045.1652-.0075.2431-.0352.0779-.0278.1496-.0707.2108-.1263.0612-.0557.1108-.1229.1458-.1978.035-.0749.0549-.156.0583-.2387.0035-.0826-.0095-.1651-.0382-.2427-.0287-.0776-.0724-.1487-.1288-.2092L4.21249 2.70468Zm3.69766 5.925 3.25545 3.58202c-.4902.2579-1.0522.3457-1.59777.2496-.54554-.0962-1.0437-.3707-1.41626-.7807-.37256-.4099-.59843-.932-.64212-1.4842-.0437-.5522.09725-1.10329.4007-1.56672ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977-.71382-.7094-1.32092-1.5186-1.80234-2.40231.3664-.68672 1.53593-2.60859 3.69922-3.85781l1.40625 1.54297c-.54443.69727-.82482 1.56456-.79162 2.44855.0332.884.37786 1.7278.97305 2.3823.59519.6545 1.40259 1.0775 2.2795 1.1942.87688.1167 1.76688-.0803 2.51248-.5563l1.1508 1.2656c-1.0156.3897-2.095.5865-3.18281.5805Zm.46871-7.45548c-.1628-.03108-.3067-.12558-.3998-.26272-.09322-.13713-.12811-.30567-.09703-.46853.03103-.16286.12563-.3067.26273-.39988.1371-.09318.3057-.12807.4685-.09699.7966.15443 1.5219.56222 2.0677 1.16257.5459.60034.8831 1.36105.9612 2.16868.0155.16503-.0353.32944-.1411.45705-.1058.1276-.2579.208-.4229.2234-.0196.0012-.0391.0012-.0586 0-.1562.0007-.307-.0572-.4227-.1621-.1157-.105-.1879-.24952-.2023-.40507-.0526-.53719-.2772-1.04306-.6404-1.44239-.3631-.39933-.8455-.67079-1.3753-.77402Zm8.85 2.71018c-.0328.0734-.8242 1.8258-2.6062 3.4219-.0609.0562-.1324.0998-.2103.1282-.0779.0284-.1607.041-.2435.0371-.0828-.004-.164-.0243-.2389-.0599-.0749-.0357-.1419-.0858-.1972-.1476-.0553-.0618-.0977-.1339-.1249-.2123-.0271-.0783-.0384-.1613-.0332-.244.0053-.0828.0269-.1637.0637-.238.0368-.0743.088-.1405.1507-.1948.8743-.7854 1.6087-1.7138 2.1719-2.74531-.4825-.88455-1.0909-1.69431-1.8063-2.4039-1.739-1.72188-3.8398-2.5961-6.24451-2.5961-.50667-.00062-1.01254.04041-1.5125.12266-.0813.01438-.16465.0125-.24522-.00551-.08057-.01802-.15678-.05182-.22422-.09946-.06743-.04763-.12476-.10816-.16867-.17808-.04391-.06992-.07354-.14784-.08716-.22927-.01362-.08143-.01098-.16476.00778-.24516.01877-.08041.05327-.1563.10153-.22329s.10932-.12375.17964-.16702c.07032-.04326.14852-.07216.23007-.08502.5681-.09381 1.14296-.14058 1.71875-.13985 2.72501 0 5.20081 1.03594 7.16091 2.9961 1.4711 1.47109 2.1328 2.93906 2.1602 3.00078.0355.07993.0539.16643.0539.25393 0 .0874-.0184.1739-.0539.2539h-.0024Z\" fill=\"#070707\"/>\n</svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}\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"] }] });
|
|
397
|
+
}
|
|
398
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconEyeComponent, decorators: [{
|
|
399
|
+
type: Component,
|
|
400
|
+
args: [{ selector: 'lib-icon-eye', imports: [CommonModule], template: "<svg *ngIf=\"variant === 'open'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M19.3211 9.74688c-.0274-.06172-.6891-1.52969-2.1602-3.00079C15.2008 4.78594 12.725 3.75 9.99999 3.75c-2.725 0-5.20078 1.03594-7.16094 2.99609C1.36796 8.21719.703118 9.6875.678899 9.74688.643362 9.82681.625 9.91331.625 10.0008c0 .0875.018362.174.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c2.72501 0 5.20081-1.0359 7.16091-2.9953 1.4711-1.4711 2.1328-2.9383 2.1602-3 .0355-.0799.0539-.1664.0539-.2539 0-.08749-.0184-.17399-.0539-.25392ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977C3.0419 11.6927 2.43483 10.8836 1.95312 10c.48158-.88364 1.08867-1.69283 1.80234-2.40234C5.49452 5.87422 7.5953 5 9.99999 5c2.40471 0 4.50551.87422 6.24451 2.59766.715.70934 1.3234 1.51853 1.8063 2.40234-.5633 1.0516-3.0172 5-8.05081 5Zm0-8.75c-.74168 0-1.4667.21993-2.08339.63199-.61668.41205-1.09733.99772-1.38116 1.68295-.28382.68522-.35809 1.43926-.21339 2.16666.14469.7274.50184 1.3956 1.02629 1.9201.52445.5244 1.19263.8816 1.92006 1.0262.72743.1447 1.4814.0705 2.1667-.2134.6852-.2838 1.2708-.7644 1.6829-1.3811.4121-.6167.632-1.3417.632-2.0834-.001-.99424-.3965-1.94747-1.0995-2.65051-.703-.70304-1.6563-1.09846-2.65051-1.09949Zm0 6.25c-.49445 0-.9778-.1466-1.38892-.4213-.41113-.2747-.73156-.6652-.92078-1.122-.18922-.4568-.23872-.95947-.14226-1.44443.09646-.48495.33456-.93041.68419-1.28004.34964-.34963.79509-.58773 1.28005-.68419.48495-.09647.98763-.04696 1.44443.14226.4568.18922.8473.50965 1.122.92077.2747.41113.4213.89448.4213 1.38893 0 .663-.2634 1.2989-.7322 1.7678-.4689.4688-1.1048.7322-1.76781.7322Z\" fill=\"#070707\"/>\n</svg>\n\n<svg *ngIf=\"variant === 'close'\" [ngClass]=\"['o-svg','o-svg__eye','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M4.21249 2.70468c-.05488-.06187-.1215-.11223-.196-.14816-.07449-.03594-.15538-.05673-.23796-.06117-.08259-.00444-.16524.00755-.24316.03528-.07791.02774-.14955.07066-.21076.12628-.06121.05563-.11077.12285-.1458.19776-.03504.07492-.05486.15605-.05831.23869-.00346.08263.00953.16513.03819.24271.02867.07758.07245.1487.1288.20923l1.50313 1.65391C1.95312 6.94062.732805 9.62499.678899 9.74687.643362 9.8268.625 9.9133.625 10.0008c0 .0874.018362.1739.053899.2539.027344.0617.689061 1.5289 2.160151 3C4.79921 15.2141 7.27499 16.25 9.99999 16.25c1.40051.008 2.78681-.2804 4.06801-.8461l1.7187 1.8914c.0549.0619.1215.1122.196.1482.0745.0359.1554.0567.238.0611.0826.0045.1652-.0075.2431-.0352.0779-.0278.1496-.0707.2108-.1263.0612-.0557.1108-.1229.1458-.1978.035-.0749.0549-.156.0583-.2387.0035-.0826-.0095-.1651-.0382-.2427-.0287-.0776-.0724-.1487-.1288-.2092L4.21249 2.70468Zm3.69766 5.925 3.25545 3.58202c-.4902.2579-1.0522.3457-1.59777.2496-.54554-.0962-1.0437-.3707-1.41626-.7807-.37256-.4099-.59843-.932-.64212-1.4842-.0437-.5522.09725-1.10329.4007-1.56672ZM9.99999 15c-2.40469 0-4.50547-.8742-6.24453-2.5977-.71382-.7094-1.32092-1.5186-1.80234-2.40231.3664-.68672 1.53593-2.60859 3.69922-3.85781l1.40625 1.54297c-.54443.69727-.82482 1.56456-.79162 2.44855.0332.884.37786 1.7278.97305 2.3823.59519.6545 1.40259 1.0775 2.2795 1.1942.87688.1167 1.76688-.0803 2.51248-.5563l1.1508 1.2656c-1.0156.3897-2.095.5865-3.18281.5805Zm.46871-7.45548c-.1628-.03108-.3067-.12558-.3998-.26272-.09322-.13713-.12811-.30567-.09703-.46853.03103-.16286.12563-.3067.26273-.39988.1371-.09318.3057-.12807.4685-.09699.7966.15443 1.5219.56222 2.0677 1.16257.5459.60034.8831 1.36105.9612 2.16868.0155.16503-.0353.32944-.1411.45705-.1058.1276-.2579.208-.4229.2234-.0196.0012-.0391.0012-.0586 0-.1562.0007-.307-.0572-.4227-.1621-.1157-.105-.1879-.24952-.2023-.40507-.0526-.53719-.2772-1.04306-.6404-1.44239-.3631-.39933-.8455-.67079-1.3753-.77402Zm8.85 2.71018c-.0328.0734-.8242 1.8258-2.6062 3.4219-.0609.0562-.1324.0998-.2103.1282-.0779.0284-.1607.041-.2435.0371-.0828-.004-.164-.0243-.2389-.0599-.0749-.0357-.1419-.0858-.1972-.1476-.0553-.0618-.0977-.1339-.1249-.2123-.0271-.0783-.0384-.1613-.0332-.244.0053-.0828.0269-.1637.0637-.238.0368-.0743.088-.1405.1507-.1948.8743-.7854 1.6087-1.7138 2.1719-2.74531-.4825-.88455-1.0909-1.69431-1.8063-2.4039-1.739-1.72188-3.8398-2.5961-6.24451-2.5961-.50667-.00062-1.01254.04041-1.5125.12266-.0813.01438-.16465.0125-.24522-.00551-.08057-.01802-.15678-.05182-.22422-.09946-.06743-.04763-.12476-.10816-.16867-.17808-.04391-.06992-.07354-.14784-.08716-.22927-.01362-.08143-.01098-.16476.00778-.24516.01877-.08041.05327-.1563.10153-.22329s.10932-.12375.17964-.16702c.07032-.04326.14852-.07216.23007-.08502.5681-.09381 1.14296-.14058 1.71875-.13985 2.72501 0 5.20081 1.03594 7.16091 2.9961 1.4711 1.47109 2.1328 2.93906 2.1602 3.00078.0355.07993.0539.16643.0539.25393 0 .0874-.0184.1739-.0539.2539h-.0024Z\" fill=\"#070707\"/>\n</svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}\n"] }]
|
|
401
|
+
}], propDecorators: { variant: [{
|
|
402
|
+
type: Input
|
|
403
|
+
}], extraClass: [{
|
|
404
|
+
type: Input
|
|
405
|
+
}], size: [{
|
|
406
|
+
type: Input
|
|
407
|
+
}] } });
|
|
408
|
+
|
|
409
|
+
class IconSuccessComponent {
|
|
410
|
+
extraClass = '';
|
|
411
|
+
size = 'lg';
|
|
412
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconSuccessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
413
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconSuccessComponent, isStandalone: true, selector: "lib-icon-success", inputs: { extraClass: "extraClass", size: "size" }, ngImport: i0, template: "<svg [ngClass]=\"['o-svg','o-svg__success','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M13.5672 7.68281c.0581.05805.1042.12698.1357.20285.0314.07588.0476.15721.0476.23934 0 .08213-.0162.16346-.0476.23934-.0315.07587-.0776.1448-.1357.20285L9.19219 12.9422c-.05804.0581-.12697.1042-.20285.1357-.07587.0314-.1572.0476-.23934.0476-.08213 0-.16346-.0162-.23933-.0476-.07588-.0315-.14481-.0776-.20285-.1357l-1.875-1.875c-.11728-.1173-.18316-.2763-.18316-.4422s.06588-.3249.18316-.4422c.11727-.1173.27633-.18315.44218-.18315.16586 0 .32492.06585.44219.18315L8.75 11.6164l3.9328-3.93359c.0581-.05811.127-.10421.2029-.13566.0758-.03145.1572-.04764.2393-.04764s.1635.01619.2393.04764c.0759.03145.1448.07755.2029.13566ZM18.125 10c0 1.607-.4765 3.1779-1.3693 4.514-.8928 1.3362-2.1617 2.3776-3.6464 2.9925-1.4846.615-3.11831.7759-4.6944.4624-1.5761-.3135-3.02384-1.0874-4.16014-2.2237-1.1363-1.1363-1.91013-2.584-2.22364-4.1601-.3135-1.5761-.1526-3.20975.46236-4.6944.61496-1.48465 1.65637-2.7536 2.99252-3.64639C6.82214 2.35152 8.39303 1.875 10 1.875c2.1542.00227 4.2195.85903 5.7427 2.38227C17.266 5.78051 18.1227 7.84581 18.125 10Zm-1.25 0c0-1.35975-.4032-2.68896-1.1586-3.81955-.7555-1.13058-1.8292-2.01177-3.0854-2.53212-1.2563-.52035-2.63862-.6565-3.97224-.39123-1.33362.26527-2.55863.92006-3.52012 1.88154-.96148.96149-1.61626 2.18649-1.88154 3.52011-.26527 1.33362-.12912 2.71595.39123 3.97215.52035 1.2563 1.40154 2.33 2.53213 3.0855C7.31105 16.4718 8.64026 16.875 10 16.875c1.8227-.0021 3.5702-.7271 4.8591-2.0159 1.2888-1.2889 2.0138-3.0364 2.0159-4.8591Z\" fill=\"#35785B\"/>\n</svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
414
|
+
}
|
|
415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconSuccessComponent, decorators: [{
|
|
416
|
+
type: Component,
|
|
417
|
+
args: [{ selector: 'lib-icon-success', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__success','o-svg--' + size,extraClass ? 'o-svg__alert--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\">\n <path d=\"M13.5672 7.68281c.0581.05805.1042.12698.1357.20285.0314.07588.0476.15721.0476.23934 0 .08213-.0162.16346-.0476.23934-.0315.07587-.0776.1448-.1357.20285L9.19219 12.9422c-.05804.0581-.12697.1042-.20285.1357-.07587.0314-.1572.0476-.23934.0476-.08213 0-.16346-.0162-.23933-.0476-.07588-.0315-.14481-.0776-.20285-.1357l-1.875-1.875c-.11728-.1173-.18316-.2763-.18316-.4422s.06588-.3249.18316-.4422c.11727-.1173.27633-.18315.44218-.18315.16586 0 .32492.06585.44219.18315L8.75 11.6164l3.9328-3.93359c.0581-.05811.127-.10421.2029-.13566.0758-.03145.1572-.04764.2393-.04764s.1635.01619.2393.04764c.0759.03145.1448.07755.2029.13566ZM18.125 10c0 1.607-.4765 3.1779-1.3693 4.514-.8928 1.3362-2.1617 2.3776-3.6464 2.9925-1.4846.615-3.11831.7759-4.6944.4624-1.5761-.3135-3.02384-1.0874-4.16014-2.2237-1.1363-1.1363-1.91013-2.584-2.22364-4.1601-.3135-1.5761-.1526-3.20975.46236-4.6944.61496-1.48465 1.65637-2.7536 2.99252-3.64639C6.82214 2.35152 8.39303 1.875 10 1.875c2.1542.00227 4.2195.85903 5.7427 2.38227C17.266 5.78051 18.1227 7.84581 18.125 10Zm-1.25 0c0-1.35975-.4032-2.68896-1.1586-3.81955-.7555-1.13058-1.8292-2.01177-3.0854-2.53212-1.2563-.52035-2.63862-.6565-3.97224-.39123-1.33362.26527-2.55863.92006-3.52012 1.88154-.96148.96149-1.61626 2.18649-1.88154 3.52011-.26527 1.33362-.12912 2.71595.39123 3.97215.52035 1.2563 1.40154 2.33 2.53213 3.0855C7.31105 16.4718 8.64026 16.875 10 16.875c1.8227-.0021 3.5702-.7271 4.8591-2.0159 1.2888-1.2889 2.0138-3.0364 2.0159-4.8591Z\" fill=\"#35785B\"/>\n</svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}\n"] }]
|
|
418
|
+
}], propDecorators: { extraClass: [{
|
|
419
|
+
type: Input
|
|
420
|
+
}], size: [{
|
|
421
|
+
type: Input
|
|
422
|
+
}] } });
|
|
423
|
+
|
|
424
|
+
class IconTestComponent {
|
|
425
|
+
extraClass = '';
|
|
426
|
+
get hostClasses() {
|
|
427
|
+
const base = ['o-svg', 'o-svg__test'];
|
|
428
|
+
if (this.extraClass) {
|
|
429
|
+
base.push(`o-svg--${this.extraClass}`);
|
|
430
|
+
}
|
|
431
|
+
return base.join(' ');
|
|
432
|
+
}
|
|
433
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconTestComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
434
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconTestComponent, isStandalone: true, selector: "lib-icon-test", inputs: { extraClass: "extraClass" }, host: { properties: { "class.o-svg": "true", "class.o-svg__test": "true", "class": "this.hostClasses" } }, ngImport: i0, template: "<svg fill=\"none\" [ngClass]=\"['o-svg','o-svg__test',extraClass ? 'o-svg__test--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <path d=\"M16.5 0h-15C1.10218 0 .720644.158035.43934.43934.158035.720644 0 1.10218 0 1.5v15c0 .3978.158035.7794.43934 1.0607C.720644 17.842 1.10218 18 1.5 18h15c.3978 0 .7794-.158 1.0607-.4393S18 16.8978 18 16.5v-15c0-.39782-.158-.779356-.4393-1.06066C17.2794.158035 16.8978 0 16.5 0Zm-15 16.5V2.56031L15.4397 16.5H1.5Zm1.06031-15H16.5v13.9406L2.56031 1.5Z\" fill=\"#217870\"/>\n</svg>", styles: [".o-svg__test--neutral path{fill:var(--color-action-neutral-content-default)}.o-svg__test--danger path{fill:var(--color-action-danger-border-default)}.o-svg__test--button-primary path{fill:#fff}.o-svg__test--disabled path{fill:var(--color-button-primary-content-disabled)}.o-svg__test--button-secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__test--button-tertiary path{fill:var(--color-button-secondary-content-default)}.o-svg__test--button-danger path{fill:#fff}.o-svg__test--button-inverse path{fill:var(--color-button-inverse-content-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
435
|
+
}
|
|
436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconTestComponent, decorators: [{
|
|
437
|
+
type: Component,
|
|
438
|
+
args: [{ selector: 'lib-icon-test', imports: [CommonModule], host: {
|
|
439
|
+
'[class.o-svg]': 'true',
|
|
440
|
+
'[class.o-svg__test]': 'true'
|
|
441
|
+
}, template: "<svg fill=\"none\" [ngClass]=\"['o-svg','o-svg__test',extraClass ? 'o-svg__test--' + extraClass : '']\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\">\n <path d=\"M16.5 0h-15C1.10218 0 .720644.158035.43934.43934.158035.720644 0 1.10218 0 1.5v15c0 .3978.158035.7794.43934 1.0607C.720644 17.842 1.10218 18 1.5 18h15c.3978 0 .7794-.158 1.0607-.4393S18 16.8978 18 16.5v-15c0-.39782-.158-.779356-.4393-1.06066C17.2794.158035 16.8978 0 16.5 0Zm-15 16.5V2.56031L15.4397 16.5H1.5Zm1.06031-15H16.5v13.9406L2.56031 1.5Z\" fill=\"#217870\"/>\n</svg>", styles: [".o-svg__test--neutral path{fill:var(--color-action-neutral-content-default)}.o-svg__test--danger path{fill:var(--color-action-danger-border-default)}.o-svg__test--button-primary path{fill:#fff}.o-svg__test--disabled path{fill:var(--color-button-primary-content-disabled)}.o-svg__test--button-secondary path{fill:var(--color-button-secondary-content-default)}.o-svg__test--button-tertiary path{fill:var(--color-button-secondary-content-default)}.o-svg__test--button-danger path{fill:#fff}.o-svg__test--button-inverse path{fill:var(--color-button-inverse-content-default)}\n"] }]
|
|
442
|
+
}], propDecorators: { extraClass: [{
|
|
443
|
+
type: Input
|
|
444
|
+
}], hostClasses: [{
|
|
445
|
+
type: HostBinding,
|
|
446
|
+
args: ['class']
|
|
447
|
+
}] } });
|
|
448
|
+
|
|
449
|
+
class IconThumbComponent {
|
|
450
|
+
extraClass = '';
|
|
451
|
+
size = 'lg';
|
|
452
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconThumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
453
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: IconThumbComponent, isStandalone: true, selector: "lib-icon-thumb", inputs: { extraClass: "extraClass", size: "size" }, ngImport: i0, template: "<svg [ngClass]=\"['o-svg','o-svg__thumb','o-svg--' + size,extraClass ? 'o-svg__thumb--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M19.5 3h-15c-.39782 0-.77936.15804-1.06066.43934C3.15804 3.72064 3 4.10218 3 4.5v15c0 .3978.15804.7794.43934 1.0607S4.10218 21 4.5 21h15c.3978 0 .7794-.158 1.0607-.4393S21 19.8978 21 19.5v-15c0-.39782-.158-.77936-.4393-1.06066C20.2794 3.15804 19.8978 3 19.5 3Zm-15 1.5h15v7.2544l-2.3147-2.31565c-.2813-.28109-.6626-.43899-1.0603-.43899-.3977 0-.779.1579-1.0603.43899L5.00344 19.5H4.5v-15Zm15 15H7.125l9-9 3.375 3.375V19.5ZM9 11.25c.44501 0 .88002-.132 1.25-.3792.37-.2472.6584-.5986.8287-1.00976.1703-.41114.2149-.86354.1281-1.29999-.0868-.43646-.3011-.83737-.6158-1.15204-.3147-.31467-.71559-.52896-1.15205-.61578-.43645-.08681-.88885-.04226-1.29999.12804-.41113.1703-.76253.45869-1.00977.8287C6.88196 8.11998 6.75 8.55499 6.75 9c0 .59674.23705 1.169.65901 1.591.42196.4219.99425.659 1.59099.659Zm0-3c.14834 0 .29334.04399.41668.1264.12333.08241.21946.19954.27623.33659.05677.13704.07162.28784.04268.43333-.02894.14548-.10037.27912-.20526.38401-.10489.10489-.23853.17632-.38401.20526-.14549.02894-.29629.01409-.43333-.04268-.13705-.05677-.25418-.1529-.33659-.27623C8.29399 9.29334 8.25 9.14834 8.25 9c0-.19891.07902-.38968.21967-.53033C8.61032 8.32902 8.80109 8.25 9 8.25Z\" fill=\"#535858\"/>\n</svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
454
|
+
}
|
|
455
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: IconThumbComponent, decorators: [{
|
|
456
|
+
type: Component,
|
|
457
|
+
args: [{ selector: 'lib-icon-thumb', imports: [CommonModule], template: "<svg [ngClass]=\"['o-svg','o-svg__thumb','o-svg--' + size,extraClass ? 'o-svg__thumb--' + extraClass : '']\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <path d=\"M19.5 3h-15c-.39782 0-.77936.15804-1.06066.43934C3.15804 3.72064 3 4.10218 3 4.5v15c0 .3978.15804.7794.43934 1.0607S4.10218 21 4.5 21h15c.3978 0 .7794-.158 1.0607-.4393S21 19.8978 21 19.5v-15c0-.39782-.158-.77936-.4393-1.06066C20.2794 3.15804 19.8978 3 19.5 3Zm-15 1.5h15v7.2544l-2.3147-2.31565c-.2813-.28109-.6626-.43899-1.0603-.43899-.3977 0-.779.1579-1.0603.43899L5.00344 19.5H4.5v-15Zm15 15H7.125l9-9 3.375 3.375V19.5ZM9 11.25c.44501 0 .88002-.132 1.25-.3792.37-.2472.6584-.5986.8287-1.00976.1703-.41114.2149-.86354.1281-1.29999-.0868-.43646-.3011-.83737-.6158-1.15204-.3147-.31467-.71559-.52896-1.15205-.61578-.43645-.08681-.88885-.04226-1.29999.12804-.41113.1703-.76253.45869-1.00977.8287C6.88196 8.11998 6.75 8.55499 6.75 9c0 .59674.23705 1.169.65901 1.591.42196.4219.99425.659 1.59099.659Zm0-3c.14834 0 .29334.04399.41668.1264.12333.08241.21946.19954.27623.33659.05677.13704.07162.28784.04268.43333-.02894.14548-.10037.27912-.20526.38401-.10489.10489-.23853.17632-.38401.20526-.14549.02894-.29629.01409-.43333-.04268-.13705-.05677-.25418-.1529-.33659-.27623C8.29399 9.29334 8.25 9.14834 8.25 9c0-.19891.07902-.38968.21967-.53033C8.61032 8.32902 8.80109 8.25 9 8.25Z\" fill=\"#535858\"/>\n</svg>", styles: [".o-svg{display:flex}.o-svg--lg{width:1.5rem;height:1.5rem}.o-svg--md{width:1.3rem;height:1.3rem}.o-svg--sm{width:1rem;height:1rem}.o-svg--xs{width:.9rem;height:.9rem}\n"] }]
|
|
458
|
+
}], propDecorators: { extraClass: [{
|
|
459
|
+
type: Input
|
|
460
|
+
}], size: [{
|
|
461
|
+
type: Input
|
|
462
|
+
}] } });
|
|
463
|
+
|
|
464
|
+
class InputLabelComponent {
|
|
465
|
+
text = '';
|
|
466
|
+
required = false;
|
|
467
|
+
md = false;
|
|
468
|
+
disabled = false;
|
|
469
|
+
for = '';
|
|
470
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
471
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputLabelComponent, isStandalone: true, selector: "lib-input-label", inputs: { text: "text", required: "required", md: "md", disabled: "disabled", for: "for" }, ngImport: i0, template: "<label [for]=\"for\" [ngClass]=\"{'c-input-label': !md,'c-input-label--md': md, 'c-input-label--disabled': disabled}\">\n {{ text }}\n <span *ngIf=\"!required\" class=\"c-input-label__optional\">(Opcional)</span>\n</label>", styles: [".c-input-label{display:flex;gap:var(--mobile-space-page-gap-sm);font-family:var(--mobile-typography-label-sm-default-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-default-size);line-height:var(--mobile-typography-label-sm-default-line-height);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing);color:var(--color-core-content-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-input-label{gap:var(--tablet-space-page-gap-sm);font-family:var(--tablet-typography-label-sm-default-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-default-size);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-input-label{gap:var(--widescreen-space-page-gap-sm);font-family:var(--widescreen-typography-label-sm-default-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-default-size);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-input-label{gap:var(--desktop-space-page-gap-sm);font-family:var(--desktop-typography-label-sm-default-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-default-size);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}.c-input-label--md{font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing)}@media (min-width: var(--tablet-size-viewport-width)){.c-input-label--md{font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-input-label--md{font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-input-label--md{font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}}.c-input-label__optional{color:var(--color-core-content-soft)}.c-input-label--disabled,.c-input-label--disabled__optional{color:var(--color-textfield-content-disabled)}\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"] }] });
|
|
472
|
+
}
|
|
473
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputLabelComponent, decorators: [{
|
|
474
|
+
type: Component,
|
|
475
|
+
args: [{ selector: 'lib-input-label', imports: [CommonModule], template: "<label [for]=\"for\" [ngClass]=\"{'c-input-label': !md,'c-input-label--md': md, 'c-input-label--disabled': disabled}\">\n {{ text }}\n <span *ngIf=\"!required\" class=\"c-input-label__optional\">(Opcional)</span>\n</label>", styles: [".c-input-label{display:flex;gap:var(--mobile-space-page-gap-sm);font-family:var(--mobile-typography-label-sm-default-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-default-size);line-height:var(--mobile-typography-label-sm-default-line-height);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing);color:var(--color-core-content-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-input-label{gap:var(--tablet-space-page-gap-sm);font-family:var(--tablet-typography-label-sm-default-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-default-size);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-input-label{gap:var(--widescreen-space-page-gap-sm);font-family:var(--widescreen-typography-label-sm-default-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-default-size);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-input-label{gap:var(--desktop-space-page-gap-sm);font-family:var(--desktop-typography-label-sm-default-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-default-size);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}.c-input-label--md{font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing)}@media (min-width: var(--tablet-size-viewport-width)){.c-input-label--md{font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-input-label--md{font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-input-label--md{font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}}.c-input-label__optional{color:var(--color-core-content-soft)}.c-input-label--disabled,.c-input-label--disabled__optional{color:var(--color-textfield-content-disabled)}\n"] }]
|
|
476
|
+
}], propDecorators: { text: [{
|
|
477
|
+
type: Input
|
|
478
|
+
}], required: [{
|
|
479
|
+
type: Input
|
|
480
|
+
}], md: [{
|
|
481
|
+
type: Input
|
|
482
|
+
}], disabled: [{
|
|
483
|
+
type: Input
|
|
484
|
+
}], for: [{
|
|
485
|
+
type: Input
|
|
486
|
+
}] } });
|
|
487
|
+
|
|
488
|
+
class PasswordInputComponent {
|
|
489
|
+
label = '';
|
|
490
|
+
value = '';
|
|
491
|
+
placeholder = '';
|
|
492
|
+
helperText = '';
|
|
493
|
+
alertText = '';
|
|
494
|
+
successText = '';
|
|
495
|
+
error = false;
|
|
496
|
+
success = false;
|
|
497
|
+
disabled = false;
|
|
498
|
+
readonly = false;
|
|
499
|
+
size = 'md';
|
|
500
|
+
showPassword = false;
|
|
501
|
+
get inputType() {
|
|
502
|
+
return this.showPassword ? 'text' : 'password';
|
|
503
|
+
}
|
|
504
|
+
get inputClass() {
|
|
505
|
+
return [
|
|
506
|
+
'c-text-input__input',
|
|
507
|
+
`c-text-input__input--${this.size}`,
|
|
508
|
+
this.error ? 'is-error' : '',
|
|
509
|
+
this.success ? 'is-success' : '',
|
|
510
|
+
this.disabled ? 'is-disabled' : '',
|
|
511
|
+
this.readonly ? 'is-readonly' : '',
|
|
512
|
+
].filter(Boolean);
|
|
513
|
+
}
|
|
514
|
+
get ariaDescribedBy() {
|
|
515
|
+
return this.helperText ? 'password-input-helper' : null;
|
|
516
|
+
}
|
|
517
|
+
togglePassword() {
|
|
518
|
+
this.showPassword = !this.showPassword;
|
|
519
|
+
}
|
|
520
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
521
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: PasswordInputComponent, isStandalone: true, selector: "lib-password-input", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", size: "size" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\"></lib-input-label>\n \n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n />\n <button\n type=\"button\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n [attr.aria-label]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n >\n <lib-icon-eye size=\"md\" [variant]=\"showPassword ? 'close' : 'open'\" />\n </button>\n </div>\n \n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n {{ helperText }}\n </span>\n \n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon-alert size=\"md\" />{{ alertText }}\n </span>\n \n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon-success size=\"md\" />{{ successText }}\n </span>\n </div>\n ", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--mobile-space-component-gap-sm, .25rem);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--mobile-size-component-border-radius, .5rem);border:var(--mobile-size-component-border-width, 1px) solid var(--color-textfield-border-default, #929A99);background:var(--color-textfield-background-default, #FFF);padding:var(--mobile-space-component-padding-sm, .5rem) var(--mobile-space-component-padding-lg, 1rem);align-items:center;gap:var(--mobile-space-component-gap-sm, .25rem);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--mobile-typography-label-md-default-family, Satoshi);font-size:var(--mobile-typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--mobile-typography-label-md-default-weight, 400);line-height:var(--mobile-typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing, 0rem)}.c-text-input__input--sm{padding:var(--mobile-space-component-padding-xs, .25rem) var(--mobile-space-component-padding-sm, .5rem)}.c-text-input__input--md{padding:var(--mobile-space-component-padding-xs, .25rem) var(---mobile-space-component-padding-md, .75rem)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-danger-default, #BA2F1E);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-success-default, #35785B);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper{color:var(--color-core-content-soft, #535858);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__input{padding-right:2.3rem}.c-text-input__toggle{position:absolute;top:50%;right:var(--mobile-space-component-padding-lg);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}@media (min-width: var(--tablet-size-viewport-width)){.c-text-input__input{border-radius:var(--tablet-size-component-border-radius);border-width:var(--tablet-size-component-border-width);padding:var(--tablet-space-component-padding-sm) var(--tablet-space-component-padding-lg);gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-default-family);font-size:var(--tablet-typography-label-md-default-size);font-weight:var(--tablet-typography-label-md-default-weight);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-sm)}.c-text-input__input--md{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-md)}.c-text-input__alert{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight, 400);line-height:var(--tablet-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-text-input__input{border-radius:var(--widescreen-size-component-border-radius);border-width:var(--widescreen-size-component-border-width);padding:var(--widescreen-space-component-padding-sm) var(--widescreen-space-component-padding-lg);gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-default-family);font-size:var(--widescreen-typography-label-md-default-size);font-weight:var(--widescreen-typography-label-md-default-weight);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-sm)}.c-text-input__input--md{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--widescreen-space-component-gap-sm, .25rem);font-family:var(--widescreen-typography-label-sm-default-family);font-size:var(--widescreen-typography-label-sm-default-size);font-weight:var(--widescreen-typography-label-sm-default-weight);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-text-input__input{border-radius:var(--desktop-size-component-border-radius);border-width:var(--desktop-size-component-border-width);padding:var(--desktop-space-component-padding-sm) var(--desktop-space-component-padding-lg);gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-default-family);font-size:var(--desktop-typography-label-md-default-size);font-weight:var(--desktop-typography-label-md-default-weight);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-sm)}.c-text-input__input--md{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--desktop-space-component-gap-sm, .25rem);font-family:var(--desktop-typography-label-sm-default-family);font-size:var(--desktop-typography-label-sm-default-size);font-weight:var(--desktop-typography-label-sm-default-weight);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconAlertComponent, selector: "lib-icon-alert", inputs: ["extraClass", "size"] }, { kind: "component", type: IconSuccessComponent, selector: "lib-icon-success", inputs: ["extraClass", "size"] }, { kind: "component", type: IconEyeComponent, selector: "lib-icon-eye", inputs: ["variant", "extraClass", "size"] }] });
|
|
522
|
+
}
|
|
523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
524
|
+
type: Component,
|
|
525
|
+
args: [{ selector: 'lib-password-input', standalone: true, imports: [
|
|
526
|
+
CommonModule,
|
|
527
|
+
InputLabelComponent,
|
|
528
|
+
IconAlertComponent,
|
|
529
|
+
IconSuccessComponent,
|
|
530
|
+
IconEyeComponent
|
|
531
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\"></lib-input-label>\n \n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n />\n <button\n type=\"button\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n [attr.aria-label]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n >\n <lib-icon-eye size=\"md\" [variant]=\"showPassword ? 'close' : 'open'\" />\n </button>\n </div>\n \n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n {{ helperText }}\n </span>\n \n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon-alert size=\"md\" />{{ alertText }}\n </span>\n \n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon-success size=\"md\" />{{ successText }}\n </span>\n </div>\n ", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--mobile-space-component-gap-sm, .25rem);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--mobile-size-component-border-radius, .5rem);border:var(--mobile-size-component-border-width, 1px) solid var(--color-textfield-border-default, #929A99);background:var(--color-textfield-background-default, #FFF);padding:var(--mobile-space-component-padding-sm, .5rem) var(--mobile-space-component-padding-lg, 1rem);align-items:center;gap:var(--mobile-space-component-gap-sm, .25rem);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--mobile-typography-label-md-default-family, Satoshi);font-size:var(--mobile-typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--mobile-typography-label-md-default-weight, 400);line-height:var(--mobile-typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing, 0rem)}.c-text-input__input--sm{padding:var(--mobile-space-component-padding-xs, .25rem) var(--mobile-space-component-padding-sm, .5rem)}.c-text-input__input--md{padding:var(--mobile-space-component-padding-xs, .25rem) var(---mobile-space-component-padding-md, .75rem)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-danger-default, #BA2F1E);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-success-default, #35785B);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper{color:var(--color-core-content-soft, #535858);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__input{padding-right:2.3rem}.c-text-input__toggle{position:absolute;top:50%;right:var(--mobile-space-component-padding-lg);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}@media (min-width: var(--tablet-size-viewport-width)){.c-text-input__input{border-radius:var(--tablet-size-component-border-radius);border-width:var(--tablet-size-component-border-width);padding:var(--tablet-space-component-padding-sm) var(--tablet-space-component-padding-lg);gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-default-family);font-size:var(--tablet-typography-label-md-default-size);font-weight:var(--tablet-typography-label-md-default-weight);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-sm)}.c-text-input__input--md{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-md)}.c-text-input__alert{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight, 400);line-height:var(--tablet-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-text-input__input{border-radius:var(--widescreen-size-component-border-radius);border-width:var(--widescreen-size-component-border-width);padding:var(--widescreen-space-component-padding-sm) var(--widescreen-space-component-padding-lg);gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-default-family);font-size:var(--widescreen-typography-label-md-default-size);font-weight:var(--widescreen-typography-label-md-default-weight);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-sm)}.c-text-input__input--md{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--widescreen-space-component-gap-sm, .25rem);font-family:var(--widescreen-typography-label-sm-default-family);font-size:var(--widescreen-typography-label-sm-default-size);font-weight:var(--widescreen-typography-label-sm-default-weight);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-text-input__input{border-radius:var(--desktop-size-component-border-radius);border-width:var(--desktop-size-component-border-width);padding:var(--desktop-space-component-padding-sm) var(--desktop-space-component-padding-lg);gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-default-family);font-size:var(--desktop-typography-label-md-default-size);font-weight:var(--desktop-typography-label-md-default-weight);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-sm)}.c-text-input__input--md{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--desktop-space-component-gap-sm, .25rem);font-family:var(--desktop-typography-label-sm-default-family);font-size:var(--desktop-typography-label-sm-default-size);font-weight:var(--desktop-typography-label-sm-default-weight);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}\n"] }]
|
|
532
|
+
}], propDecorators: { label: [{
|
|
533
|
+
type: Input
|
|
534
|
+
}], value: [{
|
|
535
|
+
type: Input
|
|
536
|
+
}], placeholder: [{
|
|
537
|
+
type: Input
|
|
538
|
+
}], helperText: [{
|
|
539
|
+
type: Input
|
|
540
|
+
}], alertText: [{
|
|
541
|
+
type: Input
|
|
542
|
+
}], successText: [{
|
|
543
|
+
type: Input
|
|
544
|
+
}], error: [{
|
|
545
|
+
type: Input
|
|
546
|
+
}], success: [{
|
|
547
|
+
type: Input
|
|
548
|
+
}], disabled: [{
|
|
549
|
+
type: Input
|
|
550
|
+
}], readonly: [{
|
|
551
|
+
type: Input
|
|
552
|
+
}], size: [{
|
|
553
|
+
type: Input
|
|
554
|
+
}] } });
|
|
555
|
+
|
|
556
|
+
class RadioComponent {
|
|
557
|
+
/** ID del input, útil para test o relacionarlo con label */
|
|
558
|
+
id;
|
|
559
|
+
/** Nombre del grupo */
|
|
560
|
+
name;
|
|
561
|
+
/** Valor del radio */
|
|
562
|
+
value;
|
|
563
|
+
/** Valor actualmente seleccionado */
|
|
564
|
+
model;
|
|
565
|
+
/** Etiqueta visible */
|
|
566
|
+
label;
|
|
567
|
+
/** Muestra el estado de error */
|
|
568
|
+
error = false;
|
|
569
|
+
checked = false;
|
|
570
|
+
/** Notifica al cambiar */
|
|
571
|
+
modelChange = new EventEmitter();
|
|
572
|
+
onChange() {
|
|
573
|
+
this.modelChange.emit(this.value);
|
|
574
|
+
}
|
|
575
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
576
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioComponent, isStandalone: true, selector: "lib-radio", inputs: { id: "id", name: "name", value: "value", model: "model", label: "label", error: "error", checked: "checked" }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"c-radio\">\n <label class=\"c-radio__label\" [for]=\"id || value\">\n <input\n type=\"radio\"\n class=\"c-radio__input\"\n [id]=\"id || value\"\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"value === model\"\n (change)=\"onChange()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === model ? 'true' : 'false'\"\n tabindex=\"{{ value === model ? '0' : '-1' }}\"\n checked=\"{{ value === model ? 'true' : 'false' }}\"\n />\n <span class=\"c-radio__custom\" [class.has-error]=\"error\" aria-hidden=\"true\"></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>", styles: [".c-radio{display:flex;align-items:center;font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-radio__input{position:absolute;opacity:0;pointer-events:none}.c-radio__label{display:flex;align-items:center;cursor:pointer;gap:var(--mobile-space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--mobile-size-border-radius-full, 100px);border:var(--mobile-size-border-width-md, 2px) solid var(--color-textfield-border-default, #929A99);background:var(--color-textfield-background-default, #FFF);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default, #217870);background:var(--color-action-primary-selected-background-default, #217870)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--mobile-size-border-radius-full, 100px);background:var(--color-action-primary-selected-content-default, #FFF)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover, #19625B)}.c-radio__input:checked+.c-radio__custom:focus{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:pressed{background-color:var(--color-textfield-border-pressed)}.c-radio__input:checked+.c-radio__custom:disabled{background-color:var(--color-action-primary-selected-background-disabled)}.c-radio__input:checked:disabled+.c-radio__custom{background-color:var(--color-textfield-content-disabled);border-color:var(--color-textfield-content-disabled)}.c-radio__input:disabled+.c-radio__custom{border-color:var(--color-textfield-content-disabled)}.c-radio__custom.has-error{border-color:var(--color-feedback-danger-surface-border)}.c-radio__input:checked+.c-radio__custom.has-error{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-radio__text{font-size:1rem;line-height:1.5;color:#000}.c-radio:hover__custom{border-color:var(--color-textfield-border-hover)}.c-radio:focus__custom{outline:2px solid var(--focus-outset)}.c-radio:pressed__custom{border-color:var(--color-textfield-border-pressed)}.c-radio:disabled{color:var(--color-textfield-content-disabled)}.c-radio:disabled__custom{border-color:var(--color-textfield-border-disabled)}@media (min-width: var(--tablet-size-viewport-width)){.c-radio{font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-radio__label{gap:var(--tablet-space-component-gap-sm)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-radio{font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-radio__label{gap:var(--widescreen-space-component-gap-sm)}}@media (min-width: var(--desktop-size-viewport-width)){.c-radio{font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-radio__label{gap:var(--desktop-space-component-gap-sm)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
577
|
+
}
|
|
578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioComponent, decorators: [{
|
|
579
|
+
type: Component,
|
|
580
|
+
args: [{ selector: 'lib-radio', standalone: true, imports: [CommonModule], template: "<div class=\"c-radio\">\n <label class=\"c-radio__label\" [for]=\"id || value\">\n <input\n type=\"radio\"\n class=\"c-radio__input\"\n [id]=\"id || value\"\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"value === model\"\n (change)=\"onChange()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === model ? 'true' : 'false'\"\n tabindex=\"{{ value === model ? '0' : '-1' }}\"\n checked=\"{{ value === model ? 'true' : 'false' }}\"\n />\n <span class=\"c-radio__custom\" [class.has-error]=\"error\" aria-hidden=\"true\"></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>", styles: [".c-radio{display:flex;align-items:center;font-family:var(--mobile-typography-label-md-default-family),sans-serif;font-weight:var(--mobile-typography-label-md-default-weight);font-size:var(--mobile-typography-label-md-default-size);line-height:var(--mobile-typography-label-md-default-line-height);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-radio__input{position:absolute;opacity:0;pointer-events:none}.c-radio__label{display:flex;align-items:center;cursor:pointer;gap:var(--mobile-space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--mobile-size-border-radius-full, 100px);border:var(--mobile-size-border-width-md, 2px) solid var(--color-textfield-border-default, #929A99);background:var(--color-textfield-background-default, #FFF);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default, #217870);background:var(--color-action-primary-selected-background-default, #217870)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--mobile-size-border-radius-full, 100px);background:var(--color-action-primary-selected-content-default, #FFF)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover, #19625B)}.c-radio__input:checked+.c-radio__custom:focus{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:pressed{background-color:var(--color-textfield-border-pressed)}.c-radio__input:checked+.c-radio__custom:disabled{background-color:var(--color-action-primary-selected-background-disabled)}.c-radio__input:checked:disabled+.c-radio__custom{background-color:var(--color-textfield-content-disabled);border-color:var(--color-textfield-content-disabled)}.c-radio__input:disabled+.c-radio__custom{border-color:var(--color-textfield-content-disabled)}.c-radio__custom.has-error{border-color:var(--color-feedback-danger-surface-border)}.c-radio__input:checked+.c-radio__custom.has-error{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-radio__text{font-size:1rem;line-height:1.5;color:#000}.c-radio:hover__custom{border-color:var(--color-textfield-border-hover)}.c-radio:focus__custom{outline:2px solid var(--focus-outset)}.c-radio:pressed__custom{border-color:var(--color-textfield-border-pressed)}.c-radio:disabled{color:var(--color-textfield-content-disabled)}.c-radio:disabled__custom{border-color:var(--color-textfield-border-disabled)}@media (min-width: var(--tablet-size-viewport-width)){.c-radio{font-family:var(--tablet-typography-label-md-default-family),sans-serif;font-weight:var(--tablet-typography-label-md-default-weight);font-size:var(--tablet-typography-label-md-default-size);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-radio__label{gap:var(--tablet-space-component-gap-sm)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-radio{font-family:var(--widescreen-typography-label-md-default-family),sans-serif;font-weight:var(--widescreen-typography-label-md-default-weight);font-size:var(--widescreen-typography-label-md-default-size);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-radio__label{gap:var(--widescreen-space-component-gap-sm)}}@media (min-width: var(--desktop-size-viewport-width)){.c-radio{font-family:var(--desktop-typography-label-md-default-family),sans-serif;font-weight:var(--desktop-typography-label-md-default-weight);font-size:var(--desktop-typography-label-md-default-size);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-radio__label{gap:var(--desktop-space-component-gap-sm)}}\n"] }]
|
|
581
|
+
}], propDecorators: { id: [{
|
|
582
|
+
type: Input
|
|
583
|
+
}], name: [{
|
|
584
|
+
type: Input
|
|
585
|
+
}], value: [{
|
|
586
|
+
type: Input
|
|
587
|
+
}], model: [{
|
|
588
|
+
type: Input
|
|
589
|
+
}], label: [{
|
|
590
|
+
type: Input
|
|
591
|
+
}], error: [{
|
|
592
|
+
type: Input
|
|
593
|
+
}], checked: [{
|
|
594
|
+
type: Input
|
|
595
|
+
}], modelChange: [{
|
|
596
|
+
type: Output
|
|
597
|
+
}] } });
|
|
598
|
+
|
|
599
|
+
class RadioGroupComponent {
|
|
600
|
+
label = '';
|
|
601
|
+
name = '';
|
|
602
|
+
options = [];
|
|
603
|
+
value = '';
|
|
604
|
+
error = false;
|
|
605
|
+
helperText = '';
|
|
606
|
+
required = false;
|
|
607
|
+
valueChange = new EventEmitter();
|
|
608
|
+
onChange(value) {
|
|
609
|
+
this.value = value;
|
|
610
|
+
this.valueChange.emit(value);
|
|
611
|
+
}
|
|
612
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
613
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioGroupComponent, isStandalone: true, selector: "lib-radio-group", inputs: { label: "label", name: "name", options: "options", value: "value", error: "error", helperText: "helperText", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label [text]=\"label\" [required]=\"required\" />\n \n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [checked]=\"option.value === value\"\n [error]=\"error\"\n (change)=\"onChange(option.value)\"\n />\n </div>\n <p *ngIf=\"helperText\" class=\"c-radio-group__helper\"><lib-icon-alert class=\"c-radio-group__icon\" size=\"md\"/>{{ helperText }}</p>\n</fieldset>\n", styles: [".c-radio-group{display:flex;flex-direction:column;gap:var(--mobile-space-container-gap-sm);border:0;padding:0}.c-radio-group__options{display:flex;flex-direction:column;gap:var(--mobile-space-container-gap-md);padding-left:6px}.c-radio-group__helper{display:flex;align-items:center;gap:var(--mobile-space-component-gap-sm);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-size);line-height:var(--mobile-typography-label-sm-line-height);letter-spacing:var(--mobile-typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}@media (min-width: var(--tablet-size-viewport-width)){.c-radio-group{gap:var(--tablet-space-container-gap-sm)}.c-radio-group__options{gap:var(--tablet-space-container-gap-md)}.c-radio-group__helper{gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-size);line-height:var(--tablet-typography-label-sm-line-height);letter-spacing:var(--tablet-typography-label-sm-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-radio-group{gap:var(--widescreen-space-container-gap-sm)}.c-radio-group__options{gap:var(--widescreen-space-container-gap-md)}.c-radio-group__helper{gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-size);line-height:var(--widescreen-typography-label-sm-line-height);letter-spacing:var(--widescreen-typography-label-sm-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-radio-group{gap:var(--desktop-space-container-gap-sm)}.c-radio-group__options{gap:var(--desktop-space-container-gap-md)}.c-radio-group__helper{gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-size);line-height:var(--desktop-typography-label-sm-line-height);letter-spacing:var(--desktop-typography-label-sm-letter-spacing)}}.c-radio-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\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: RadioComponent, selector: "lib-radio", inputs: ["id", "name", "value", "model", "label", "error", "checked"], outputs: ["modelChange"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconAlertComponent, selector: "lib-icon-alert", inputs: ["extraClass", "size"] }] });
|
|
614
|
+
}
|
|
615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
616
|
+
type: Component,
|
|
617
|
+
args: [{ selector: 'lib-radio-group', standalone: true, imports: [CommonModule, RadioComponent, InputLabelComponent, IconAlertComponent], template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label [text]=\"label\" [required]=\"required\" />\n \n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [checked]=\"option.value === value\"\n [error]=\"error\"\n (change)=\"onChange(option.value)\"\n />\n </div>\n <p *ngIf=\"helperText\" class=\"c-radio-group__helper\"><lib-icon-alert class=\"c-radio-group__icon\" size=\"md\"/>{{ helperText }}</p>\n</fieldset>\n", styles: [".c-radio-group{display:flex;flex-direction:column;gap:var(--mobile-space-container-gap-sm);border:0;padding:0}.c-radio-group__options{display:flex;flex-direction:column;gap:var(--mobile-space-container-gap-md);padding-left:6px}.c-radio-group__helper{display:flex;align-items:center;gap:var(--mobile-space-component-gap-sm);font-family:var(--mobile-typography-label-md-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-size);line-height:var(--mobile-typography-label-sm-line-height);letter-spacing:var(--mobile-typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}@media (min-width: var(--tablet-size-viewport-width)){.c-radio-group{gap:var(--tablet-space-container-gap-sm)}.c-radio-group__options{gap:var(--tablet-space-container-gap-md)}.c-radio-group__helper{gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-size);line-height:var(--tablet-typography-label-sm-line-height);letter-spacing:var(--tablet-typography-label-sm-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-radio-group{gap:var(--widescreen-space-container-gap-sm)}.c-radio-group__options{gap:var(--widescreen-space-container-gap-md)}.c-radio-group__helper{gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-size);line-height:var(--widescreen-typography-label-sm-line-height);letter-spacing:var(--widescreen-typography-label-sm-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-radio-group{gap:var(--desktop-space-container-gap-sm)}.c-radio-group__options{gap:var(--desktop-space-container-gap-md)}.c-radio-group__helper{gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-size);line-height:var(--desktop-typography-label-sm-line-height);letter-spacing:var(--desktop-typography-label-sm-letter-spacing)}}.c-radio-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
618
|
+
}], propDecorators: { label: [{
|
|
619
|
+
type: Input
|
|
620
|
+
}], name: [{
|
|
621
|
+
type: Input
|
|
622
|
+
}], options: [{
|
|
623
|
+
type: Input
|
|
624
|
+
}], value: [{
|
|
625
|
+
type: Input
|
|
626
|
+
}], error: [{
|
|
627
|
+
type: Input
|
|
628
|
+
}], helperText: [{
|
|
629
|
+
type: Input
|
|
630
|
+
}], required: [{
|
|
631
|
+
type: Input
|
|
632
|
+
}], valueChange: [{
|
|
633
|
+
type: Output
|
|
634
|
+
}] } });
|
|
635
|
+
|
|
636
|
+
class SegmentedControlComponent {
|
|
637
|
+
options = [];
|
|
638
|
+
selectedValue;
|
|
639
|
+
selectionChange = new EventEmitter();
|
|
640
|
+
fill = true;
|
|
641
|
+
/** Cuando el usuario hace click en un segmento */
|
|
642
|
+
onSelect(option) {
|
|
643
|
+
if (this.selectedValue !== option.value) {
|
|
644
|
+
this.selectedValue = option.value;
|
|
645
|
+
this.selectionChange.emit(this.selectedValue);
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
/** Marca si ésta opción está activa */
|
|
649
|
+
isSelected(option) {
|
|
650
|
+
return this.selectedValue === option.value;
|
|
651
|
+
}
|
|
652
|
+
/** Manejo simple de flechas izquierda/derecha */
|
|
653
|
+
onKeydown(event) {
|
|
654
|
+
const idx = this.options.findIndex(o => this.isSelected(o));
|
|
655
|
+
if (event.key === 'ArrowRight' && idx < this.options.length - 1) {
|
|
656
|
+
this.onSelect(this.options[idx + 1]);
|
|
657
|
+
event.preventDefault();
|
|
658
|
+
}
|
|
659
|
+
if (event.key === 'ArrowLeft' && idx > 0) {
|
|
660
|
+
this.onSelect(this.options[idx - 1]);
|
|
661
|
+
event.preventDefault();
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
665
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SegmentedControlComponent, isStandalone: true, selector: "lib-segmented-control", inputs: { options: "options", selectedValue: "selectedValue", fill: "fill" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div role=\"radiogroup\" [ngClass]=\"{'c-segmented-control': true,'c-segmented-control--fill': fill}\">\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n {{ option.label }}\n </label>\n</div>\n ", styles: ["@charset \"UTF-8\";.c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{position:relative;width:100%;padding:var(--mobile-space-component-padding-sm);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid var(--color-action-primary-border-default);text-align:center;font-family:var(--mobile-typography-label-sm-default-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-default-size);line-height:var(--mobile-typography-label-sm-default-line-height);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing);color:var(--color-action-primary-content-default)}.c-segmented-control__item:not(:last-child){border-right:none}.c-segmented-control__item:first-child{border-radius:12px 0 0 12px}.c-segmented-control__item:last-child{border-radius:0 12px 12px 0}.c-segmented-control__item:hover\\a0 {background-color:var(--color-action-primary-background-hover);color:var(--color-action-primary-content-hover)}.c-segmented-control__item:pressed{background-color:var(--color-action-primary-background-pressed);color:var(--color-core-content-default)}.c-segmented-control__item:selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item:focus{outline:2px solid var(--color-decorative-primary-default);font-weight:var(--mobile-typography-label-sm-strong-weight);color:var(--color-action-alternative-selected);z-index:1}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);font-family:var(--mobile-typography-label-sm-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-strong-weight);font-size:var(--mobile-typography-label-sm-strong-size);line-height:var(--mobile-typography-label-sm-strong-line-height);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing);color:var(--color-action-primary-selected-content-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-segmented-control__item{padding:var(--tablet-space-component-padding-sm);font-family:var(--tablet-typography-label-sm-default-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-default-size);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}.c-segmented-control__item[aria-checked=true]{font-family:var(--tablet-typography-label-sm-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-strong-weight);font-size:var(--tablet-typography-label-sm-strong-size);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-segmented-control__item{padding:var(--widescreen-space-component-padding-sm);font-family:var(--widescreen-typography-label-sm-default-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-default-size);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}.c-segmented-control__item[aria-checked=true]{font-family:var(--widescreen-typography-label-sm-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-strong-weight);font-size:var(--widescreen-typography-label-sm-strong-size);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-segmented-control__item{padding:var(--desktop-space-component-padding-sm);font-family:var(--desktop-typography-label-sm-default-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-default-size);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}.c-segmented-control__item[aria-checked=true]{font-family:var(--desktop-typography-label-sm-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-strong-weight);font-size:var(--desktop-typography-label-sm-strong-size);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
666
|
+
}
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
668
|
+
type: Component,
|
|
669
|
+
args: [{ selector: 'lib-segmented-control', imports: [CommonModule], template: "<div role=\"radiogroup\" [ngClass]=\"{'c-segmented-control': true,'c-segmented-control--fill': fill}\">\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n {{ option.label }}\n </label>\n</div>\n ", styles: ["@charset \"UTF-8\";.c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{position:relative;width:100%;padding:var(--mobile-space-component-padding-sm);cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid var(--color-action-primary-border-default);text-align:center;font-family:var(--mobile-typography-label-sm-default-family),sans-serif;font-weight:var(--mobile-typography-label-sm-default-weight);font-size:var(--mobile-typography-label-sm-default-size);line-height:var(--mobile-typography-label-sm-default-line-height);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing);color:var(--color-action-primary-content-default)}.c-segmented-control__item:not(:last-child){border-right:none}.c-segmented-control__item:first-child{border-radius:12px 0 0 12px}.c-segmented-control__item:last-child{border-radius:0 12px 12px 0}.c-segmented-control__item:hover\\a0 {background-color:var(--color-action-primary-background-hover);color:var(--color-action-primary-content-hover)}.c-segmented-control__item:pressed{background-color:var(--color-action-primary-background-pressed);color:var(--color-core-content-default)}.c-segmented-control__item:selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item:focus{outline:2px solid var(--color-decorative-primary-default);font-weight:var(--mobile-typography-label-sm-strong-weight);color:var(--color-action-alternative-selected);z-index:1}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);font-family:var(--mobile-typography-label-sm-strong-family),sans-serif;font-weight:var(--mobile-typography-label-sm-strong-weight);font-size:var(--mobile-typography-label-sm-strong-size);line-height:var(--mobile-typography-label-sm-strong-line-height);letter-spacing:var(--mobile-typography-label-sm-strong-letter-spacing);color:var(--color-action-primary-selected-content-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-segmented-control__item{padding:var(--tablet-space-component-padding-sm);font-family:var(--tablet-typography-label-sm-default-family),sans-serif;font-weight:var(--tablet-typography-label-sm-default-weight);font-size:var(--tablet-typography-label-sm-default-size);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}.c-segmented-control__item[aria-checked=true]{font-family:var(--tablet-typography-label-sm-strong-family),sans-serif;font-weight:var(--tablet-typography-label-sm-strong-weight);font-size:var(--tablet-typography-label-sm-strong-size);line-height:var(--tablet-typography-label-sm-strong-line-height);letter-spacing:var(--tablet-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-segmented-control__item{padding:var(--widescreen-space-component-padding-sm);font-family:var(--widescreen-typography-label-sm-default-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-default-weight);font-size:var(--widescreen-typography-label-sm-default-size);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}.c-segmented-control__item[aria-checked=true]{font-family:var(--widescreen-typography-label-sm-strong-family),sans-serif;font-weight:var(--widescreen-typography-label-sm-strong-weight);font-size:var(--widescreen-typography-label-sm-strong-size);line-height:var(--widescreen-typography-label-sm-strong-line-height);letter-spacing:var(--widescreen-typography-label-sm-strong-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-segmented-control__item{padding:var(--desktop-space-component-padding-sm);font-family:var(--desktop-typography-label-sm-default-family),sans-serif;font-weight:var(--desktop-typography-label-sm-default-weight);font-size:var(--desktop-typography-label-sm-default-size);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}.c-segmented-control__item[aria-checked=true]{font-family:var(--desktop-typography-label-sm-strong-family),sans-serif;font-weight:var(--desktop-typography-label-sm-strong-weight);font-size:var(--desktop-typography-label-sm-strong-size);line-height:var(--desktop-typography-label-sm-strong-line-height);letter-spacing:var(--desktop-typography-label-sm-strong-letter-spacing)}}\n"] }]
|
|
670
|
+
}], propDecorators: { options: [{
|
|
671
|
+
type: Input
|
|
672
|
+
}], selectedValue: [{
|
|
673
|
+
type: Input
|
|
674
|
+
}], selectionChange: [{
|
|
675
|
+
type: Output
|
|
676
|
+
}], fill: [{
|
|
677
|
+
type: Input
|
|
678
|
+
}], onKeydown: [{
|
|
679
|
+
type: HostListener,
|
|
680
|
+
args: ['keydown', ['$event']]
|
|
681
|
+
}] } });
|
|
682
|
+
|
|
683
|
+
class TextInputComponent {
|
|
684
|
+
label = '';
|
|
685
|
+
name = '';
|
|
686
|
+
value = '';
|
|
687
|
+
placeholder = '';
|
|
688
|
+
helperText = '';
|
|
689
|
+
error = false;
|
|
690
|
+
success = false;
|
|
691
|
+
successText = '';
|
|
692
|
+
alertText = '';
|
|
693
|
+
disabled = false;
|
|
694
|
+
readonly = false;
|
|
695
|
+
size = 'md';
|
|
696
|
+
get inputClass() {
|
|
697
|
+
return [
|
|
698
|
+
'c-text-input__input',
|
|
699
|
+
`c-text-input__input--${this.size}`,
|
|
700
|
+
this.error ? 'is-error' : this.success ? 'is-success' : 'is-default',
|
|
701
|
+
this.disabled ? 'is-disabled' : '',
|
|
702
|
+
this.readonly ? 'is-readonly' : '',
|
|
703
|
+
].filter(Boolean);
|
|
704
|
+
}
|
|
705
|
+
get helperClass() {
|
|
706
|
+
if (this.error)
|
|
707
|
+
return 'is-error';
|
|
708
|
+
if (this.success)
|
|
709
|
+
return 'is-success';
|
|
710
|
+
return 'is-default';
|
|
711
|
+
}
|
|
712
|
+
get ariaDescribedBy() {
|
|
713
|
+
return this.helperText ? 'text-input-helper' : null;
|
|
714
|
+
}
|
|
715
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
716
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", value: "value", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", size: "size" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [for]=\"name\" [text]=\"label\"></lib-input-label>\n\n <input\n type=\"text\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n />\n \n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\"><lib-icon-alert size=\"md\"/>{{ alertText }}</span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\"><lib-icon-success size=\"md\"/>{{ successText }}</span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--mobile-space-component-gap-sm, .25rem);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--mobile-size-component-border-radius, .5rem);border:var(--mobile-size-component-border-width, 1px) solid var(--color-textfield-border-default, #929A99);background:var(--color-textfield-background-default, #FFF);padding:var(--mobile-space-component-padding-sm, .5rem) var(--mobile-space-component-padding-lg, 1rem);align-items:center;gap:var(--mobile-space-component-gap-sm, .25rem);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--mobile-typography-label-md-default-family, Satoshi);font-size:var(--mobile-typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--mobile-typography-label-md-default-weight, 400);line-height:var(--mobile-typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing, 0rem)}.c-text-input__input--sm{padding:var(--mobile-space-component-padding-xs, .25rem) var(--mobile-space-component-padding-sm, .5rem)}.c-text-input__input--md{padding:var(--mobile-space-component-padding-xs, .25rem) var(---mobile-space-component-padding-md, .75rem)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-danger-default, #BA2F1E);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-success-default, #35785B);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper{color:var(--color-core-content-soft, #535858);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-text-input__input{border-radius:var(--tablet-size-component-border-radius);border-width:var(--tablet-size-component-border-width);padding:var(--tablet-space-component-padding-sm) var(--tablet-space-component-padding-lg);gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-default-family);font-size:var(--tablet-typography-label-md-default-size);font-weight:var(--tablet-typography-label-md-default-weight);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-sm)}.c-text-input__input--md{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-md)}.c-text-input__alert{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight, 400);line-height:var(--tablet-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-text-input__input{border-radius:var(--widescreen-size-component-border-radius);border-width:var(--widescreen-size-component-border-width);padding:var(--widescreen-space-component-padding-sm) var(--widescreen-space-component-padding-lg);gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-default-family);font-size:var(--widescreen-typography-label-md-default-size);font-weight:var(--widescreen-typography-label-md-default-weight);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-sm)}.c-text-input__input--md{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--widescreen-space-component-gap-sm, .25rem);font-family:var(--widescreen-typography-label-sm-default-family);font-size:var(--widescreen-typography-label-sm-default-size);font-weight:var(--widescreen-typography-label-sm-default-weight);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-text-input__input{border-radius:var(--desktop-size-component-border-radius);border-width:var(--desktop-size-component-border-width);padding:var(--desktop-space-component-padding-sm) var(--desktop-space-component-padding-lg);gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-default-family);font-size:var(--desktop-typography-label-md-default-size);font-weight:var(--desktop-typography-label-md-default-weight);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-sm)}.c-text-input__input--md{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-sm-default-family);font-size:var(--desktop-typography-label-sm-default-size);font-weight:var(--desktop-typography-label-sm-default-weight);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconSuccessComponent, selector: "lib-icon-success", inputs: ["extraClass", "size"] }, { kind: "component", type: IconAlertComponent, selector: "lib-icon-alert", inputs: ["extraClass", "size"] }] });
|
|
717
|
+
}
|
|
718
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
719
|
+
type: Component,
|
|
720
|
+
args: [{ selector: 'lib-text-input', standalone: true, imports: [CommonModule, InputLabelComponent, IconSuccessComponent, IconAlertComponent], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [for]=\"name\" [text]=\"label\"></lib-input-label>\n\n <input\n type=\"text\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"value\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n />\n \n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\"><lib-icon-alert size=\"md\"/>{{ alertText }}</span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\"><lib-icon-success size=\"md\"/>{{ successText }}</span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--mobile-space-component-gap-sm, .25rem);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--mobile-size-component-border-radius, .5rem);border:var(--mobile-size-component-border-width, 1px) solid var(--color-textfield-border-default, #929A99);background:var(--color-textfield-background-default, #FFF);padding:var(--mobile-space-component-padding-sm, .5rem) var(--mobile-space-component-padding-lg, 1rem);align-items:center;gap:var(--mobile-space-component-gap-sm, .25rem);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--mobile-typography-label-md-default-family, Satoshi);font-size:var(--mobile-typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--mobile-typography-label-md-default-weight, 400);line-height:var(--mobile-typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing, 0rem)}.c-text-input__input--sm{padding:var(--mobile-space-component-padding-xs, .25rem) var(--mobile-space-component-padding-sm, .5rem)}.c-text-input__input--md{padding:var(--mobile-space-component-padding-xs, .25rem) var(---mobile-space-component-padding-md, .75rem)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-danger-default, #BA2F1E);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-success-default, #35785B);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper{color:var(--color-core-content-soft, #535858);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-text-input__input{border-radius:var(--tablet-size-component-border-radius);border-width:var(--tablet-size-component-border-width);padding:var(--tablet-space-component-padding-sm) var(--tablet-space-component-padding-lg);gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-default-family);font-size:var(--tablet-typography-label-md-default-size);font-weight:var(--tablet-typography-label-md-default-weight);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-sm)}.c-text-input__input--md{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-md)}.c-text-input__alert{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight, 400);line-height:var(--tablet-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-text-input__input{border-radius:var(--widescreen-size-component-border-radius);border-width:var(--widescreen-size-component-border-width);padding:var(--widescreen-space-component-padding-sm) var(--widescreen-space-component-padding-lg);gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-default-family);font-size:var(--widescreen-typography-label-md-default-size);font-weight:var(--widescreen-typography-label-md-default-weight);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-sm)}.c-text-input__input--md{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--widescreen-space-component-gap-sm, .25rem);font-family:var(--widescreen-typography-label-sm-default-family);font-size:var(--widescreen-typography-label-sm-default-size);font-weight:var(--widescreen-typography-label-sm-default-weight);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-text-input__input{border-radius:var(--desktop-size-component-border-radius);border-width:var(--desktop-size-component-border-width);padding:var(--desktop-space-component-padding-sm) var(--desktop-space-component-padding-lg);gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-default-family);font-size:var(--desktop-typography-label-md-default-size);font-weight:var(--desktop-typography-label-md-default-weight);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-sm)}.c-text-input__input--md{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-sm-default-family);font-size:var(--desktop-typography-label-sm-default-size);font-weight:var(--desktop-typography-label-sm-default-weight);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}\n"] }]
|
|
721
|
+
}], propDecorators: { label: [{
|
|
722
|
+
type: Input
|
|
723
|
+
}], name: [{
|
|
724
|
+
type: Input
|
|
725
|
+
}], value: [{
|
|
726
|
+
type: Input
|
|
727
|
+
}], placeholder: [{
|
|
728
|
+
type: Input
|
|
729
|
+
}], helperText: [{
|
|
730
|
+
type: Input
|
|
731
|
+
}], error: [{
|
|
732
|
+
type: Input
|
|
733
|
+
}], success: [{
|
|
734
|
+
type: Input
|
|
735
|
+
}], successText: [{
|
|
736
|
+
type: Input
|
|
737
|
+
}], alertText: [{
|
|
738
|
+
type: Input
|
|
739
|
+
}], disabled: [{
|
|
740
|
+
type: Input
|
|
741
|
+
}], readonly: [{
|
|
742
|
+
type: Input
|
|
743
|
+
}], size: [{
|
|
744
|
+
type: Input
|
|
745
|
+
}] } });
|
|
746
|
+
|
|
747
|
+
class TextareaComponent {
|
|
748
|
+
label = '';
|
|
749
|
+
value = '';
|
|
750
|
+
placeholder = '';
|
|
751
|
+
helperText = '';
|
|
752
|
+
error = false;
|
|
753
|
+
success = false;
|
|
754
|
+
successText = '';
|
|
755
|
+
alertText = '';
|
|
756
|
+
disabled = false;
|
|
757
|
+
readonly = false;
|
|
758
|
+
size = 'md';
|
|
759
|
+
get inputClass() {
|
|
760
|
+
return [
|
|
761
|
+
'c-text-input__input',
|
|
762
|
+
`c-text-input__input--${this.size}`,
|
|
763
|
+
this.error ? 'is-error' : this.success ? 'is-success' : 'is-default',
|
|
764
|
+
this.disabled ? 'is-disabled' : '',
|
|
765
|
+
this.readonly ? 'is-readonly' : '',
|
|
766
|
+
].filter(Boolean);
|
|
767
|
+
}
|
|
768
|
+
get helperClass() {
|
|
769
|
+
if (this.error)
|
|
770
|
+
return 'is-error';
|
|
771
|
+
if (this.success)
|
|
772
|
+
return 'is-success';
|
|
773
|
+
return 'is-default';
|
|
774
|
+
}
|
|
775
|
+
get ariaDescribedBy() {
|
|
776
|
+
return this.helperText ? 'text-input-helper' : null;
|
|
777
|
+
}
|
|
778
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
779
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { label: "label", value: "value", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", size: "size" }, ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\"></lib-input-label>\n\n <textarea\n type=\"text\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n >{{ value }}</textarea>\n \n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\"><lib-icon-alert size=\"md\"/>{{ alertText }}</span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\"><lib-icon-success size=\"md\"/>{{ successText }}</span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--mobile-space-component-gap-sm, .25rem);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--mobile-size-component-border-radius, .5rem);border:var(--mobile-size-component-border-width, 1px) solid var(--color-textfield-border-default, #929A99);background:var(--color-textfield-background-default, #FFF);padding:var(--mobile-space-component-padding-sm, .5rem) var(--mobile-space-component-padding-lg, 1rem);align-items:center;gap:var(--mobile-space-component-gap-sm, .25rem);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--mobile-typography-label-md-default-family, Satoshi);font-size:var(--mobile-typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--mobile-typography-label-md-default-weight, 400);line-height:var(--mobile-typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing, 0rem)}.c-text-input__input--sm{padding:var(--mobile-space-component-padding-xs, .25rem) var(--mobile-space-component-padding-sm, .5rem)}.c-text-input__input--md{padding:var(--mobile-space-component-padding-xs, .25rem) var(---mobile-space-component-padding-md, .75rem)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-danger-default, #BA2F1E);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-success-default, #35785B);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper{color:var(--color-core-content-soft, #535858);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-text-input__input{border-radius:var(--tablet-size-component-border-radius);border-width:var(--tablet-size-component-border-width);padding:var(--tablet-space-component-padding-sm) var(--tablet-space-component-padding-lg);gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-default-family);font-size:var(--tablet-typography-label-md-default-size);font-weight:var(--tablet-typography-label-md-default-weight);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-sm)}.c-text-input__input--md{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-md)}.c-text-input__alert{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight, 400);line-height:var(--tablet-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-text-input__input{border-radius:var(--widescreen-size-component-border-radius);border-width:var(--widescreen-size-component-border-width);padding:var(--widescreen-space-component-padding-sm) var(--widescreen-space-component-padding-lg);gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-default-family);font-size:var(--widescreen-typography-label-md-default-size);font-weight:var(--widescreen-typography-label-md-default-weight);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-sm)}.c-text-input__input--md{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--widescreen-space-component-gap-sm, .25rem);font-family:var(--widescreen-typography-label-sm-default-family);font-size:var(--widescreen-typography-label-sm-default-size);font-weight:var(--widescreen-typography-label-sm-default-weight);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-text-input__input{border-radius:var(--desktop-size-component-border-radius);border-width:var(--desktop-size-component-border-width);padding:var(--desktop-space-component-padding-sm) var(--desktop-space-component-padding-lg);gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-default-family);font-size:var(--desktop-typography-label-md-default-size);font-weight:var(--desktop-typography-label-md-default-weight);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-sm)}.c-text-input__input--md{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--desktop-space-component-gap-sm, .25rem);font-family:var(--desktop-typography-label-sm-default-family);font-size:var(--desktop-typography-label-sm-default-size);font-weight:var(--desktop-typography-label-sm-default-weight);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconSuccessComponent, selector: "lib-icon-success", inputs: ["extraClass", "size"] }, { kind: "component", type: IconAlertComponent, selector: "lib-icon-alert", inputs: ["extraClass", "size"] }] });
|
|
780
|
+
}
|
|
781
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
782
|
+
type: Component,
|
|
783
|
+
args: [{ selector: 'lib-textarea', imports: [CommonModule, InputLabelComponent, IconSuccessComponent, IconAlertComponent], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\"></lib-input-label>\n\n <textarea\n type=\"text\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n >{{ value }}</textarea>\n \n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\"><lib-icon-alert size=\"md\"/>{{ alertText }}</span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\"><lib-icon-success size=\"md\"/>{{ successText }}</span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--mobile-space-component-gap-sm, .25rem);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--mobile-size-component-border-radius, .5rem);border:var(--mobile-size-component-border-width, 1px) solid var(--color-textfield-border-default, #929A99);background:var(--color-textfield-background-default, #FFF);padding:var(--mobile-space-component-padding-sm, .5rem) var(--mobile-space-component-padding-lg, 1rem);align-items:center;gap:var(--mobile-space-component-gap-sm, .25rem);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--mobile-typography-label-md-default-family, Satoshi);font-size:var(--mobile-typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--mobile-typography-label-md-default-weight, 400);line-height:var(--mobile-typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--mobile-typography-label-md-default-letter-spacing, 0rem)}.c-text-input__input--sm{padding:var(--mobile-space-component-padding-xs, .25rem) var(--mobile-space-component-padding-sm, .5rem)}.c-text-input__input--md{padding:var(--mobile-space-component-padding-xs, .25rem) var(---mobile-space-component-padding-md, .75rem)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-danger-default, #BA2F1E);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{display:flex;gap:var(--mobile-space-component-gap-sm, .25rem);color:var(--color-feedback-success-default, #35785B);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper{color:var(--color-core-content-soft, #535858);font-family:var(--mobile-typography-label-sm-default-family, Satoshi);font-size:var(--mobile-typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--mobile-typography-label-sm-default-weight, 400);line-height:var(--mobile-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--mobile-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}@media (min-width: var(--tablet-size-viewport-width)){.c-text-input__input{border-radius:var(--tablet-size-component-border-radius);border-width:var(--tablet-size-component-border-width);padding:var(--tablet-space-component-padding-sm) var(--tablet-space-component-padding-lg);gap:var(--tablet-space-component-gap-sm);font-family:var(--tablet-typography-label-md-default-family);font-size:var(--tablet-typography-label-md-default-size);font-weight:var(--tablet-typography-label-md-default-weight);line-height:var(--tablet-typography-label-md-default-line-height);letter-spacing:var(--tablet-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-sm)}.c-text-input__input--md{padding:var(--tablet-space-component-padding-xs) var(--tablet-space-component-padding-md)}.c-text-input__alert{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight, 400);line-height:var(--tablet-typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing, 0rem)}.c-text-input__success{gap:var(--tablet-space-component-gap-sm, .25rem);font-family:var(--tablet-typography-label-sm-default-family);font-size:var(--tablet-typography-label-sm-default-size);font-weight:var(--tablet-typography-label-sm-default-weight);line-height:var(--tablet-typography-label-sm-default-line-height);letter-spacing:var(--tablet-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-text-input__input{border-radius:var(--widescreen-size-component-border-radius);border-width:var(--widescreen-size-component-border-width);padding:var(--widescreen-space-component-padding-sm) var(--widescreen-space-component-padding-lg);gap:var(--widescreen-space-component-gap-sm);font-family:var(--widescreen-typography-label-md-default-family);font-size:var(--widescreen-typography-label-md-default-size);font-weight:var(--widescreen-typography-label-md-default-weight);line-height:var(--widescreen-typography-label-md-default-line-height);letter-spacing:var(--widescreen-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-sm)}.c-text-input__input--md{padding:var(--widescreen-space-component-padding-xs) var(--widescreen-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--widescreen-space-component-gap-sm, .25rem);font-family:var(--widescreen-typography-label-sm-default-family);font-size:var(--widescreen-typography-label-sm-default-size);font-weight:var(--widescreen-typography-label-sm-default-weight);line-height:var(--widescreen-typography-label-sm-default-line-height);letter-spacing:var(--widescreen-typography-label-sm-default-letter-spacing)}}@media (min-width: var(--desktop-size-viewport-width)){.c-text-input__input{border-radius:var(--desktop-size-component-border-radius);border-width:var(--desktop-size-component-border-width);padding:var(--desktop-space-component-padding-sm) var(--desktop-space-component-padding-lg);gap:var(--desktop-space-component-gap-sm);font-family:var(--desktop-typography-label-md-default-family);font-size:var(--desktop-typography-label-md-default-size);font-weight:var(--desktop-typography-label-md-default-weight);line-height:var(--desktop-typography-label-md-default-line-height);letter-spacing:var(--desktop-typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-sm)}.c-text-input__input--md{padding:var(--desktop-space-component-padding-xs) var(--desktop-space-component-padding-md)}.c-text-input__alert,.c-text-input__success{gap:var(--desktop-space-component-gap-sm, .25rem);font-family:var(--desktop-typography-label-sm-default-family);font-size:var(--desktop-typography-label-sm-default-size);font-weight:var(--desktop-typography-label-sm-default-weight);line-height:var(--desktop-typography-label-sm-default-line-height);letter-spacing:var(--desktop-typography-label-sm-default-letter-spacing)}}\n"] }]
|
|
784
|
+
}], propDecorators: { label: [{
|
|
785
|
+
type: Input
|
|
786
|
+
}], value: [{
|
|
787
|
+
type: Input
|
|
788
|
+
}], placeholder: [{
|
|
789
|
+
type: Input
|
|
790
|
+
}], helperText: [{
|
|
791
|
+
type: Input
|
|
792
|
+
}], error: [{
|
|
793
|
+
type: Input
|
|
794
|
+
}], success: [{
|
|
795
|
+
type: Input
|
|
796
|
+
}], successText: [{
|
|
797
|
+
type: Input
|
|
798
|
+
}], alertText: [{
|
|
799
|
+
type: Input
|
|
800
|
+
}], disabled: [{
|
|
801
|
+
type: Input
|
|
802
|
+
}], readonly: [{
|
|
803
|
+
type: Input
|
|
804
|
+
}], size: [{
|
|
805
|
+
type: Input
|
|
806
|
+
}] } });
|
|
807
|
+
|
|
808
|
+
class ThumbnailComponent {
|
|
809
|
+
size = 'xl';
|
|
810
|
+
src = '';
|
|
811
|
+
alt = '';
|
|
812
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThumbnailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
813
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ThumbnailComponent, isStandalone: true, selector: "lib-thumbnail", inputs: { size: "size", src: "src", alt: "alt" }, ngImport: i0, template: "<figure [ngClass]=\"['c-thumbnail','c-thumbnail__' + size, !src ? 'c-thumbnail--no-img' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-thumbnail__img\" />\n <lib-icon-thumb *ngIf=\"!src\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n</figure>\n", styles: [".c-thumbnail{display:flex;align-items:center;justify-content:center;border-radius:var(--mobile-size-border-radius-md);overflow:hidden}.c-thumbnail__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-thumbnail--no-img{border:1px solid var(--color-core-border-soft);background:var(--color-core-background-default)}.c-thumbnail__xl{width:5rem;height:5rem}.c-thumbnail__lg{width:3.75rem;height:3.75rem}.c-thumbnail__md{width:2.5rem;height:2.5rem}.c-thumbnail__sm{width:1.5rem;height:1.5rem;border-radius:var(--mobile-size-border-radius-sm)}@media (min-width: var(--tablet-size-viewport-width)){.c-thumbnail{border-radius:var(--tablet-size-border-radius-md)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-thumbnail{border-radius:var(--widescreen-size-border-radius-md)}}@media (min-width: var(--desktop-size-viewport-width)){.c-thumbnail{border-radius:var(--desktop-size-border-radius-md)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconThumbComponent, selector: "lib-icon-thumb", inputs: ["extraClass", "size"] }] });
|
|
814
|
+
}
|
|
815
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ThumbnailComponent, decorators: [{
|
|
816
|
+
type: Component,
|
|
817
|
+
args: [{ selector: 'lib-thumbnail', imports: [CommonModule, IconThumbComponent], template: "<figure [ngClass]=\"['c-thumbnail','c-thumbnail__' + size, !src ? 'c-thumbnail--no-img' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-thumbnail__img\" />\n <lib-icon-thumb *ngIf=\"!src\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n</figure>\n", styles: [".c-thumbnail{display:flex;align-items:center;justify-content:center;border-radius:var(--mobile-size-border-radius-md);overflow:hidden}.c-thumbnail__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-thumbnail--no-img{border:1px solid var(--color-core-border-soft);background:var(--color-core-background-default)}.c-thumbnail__xl{width:5rem;height:5rem}.c-thumbnail__lg{width:3.75rem;height:3.75rem}.c-thumbnail__md{width:2.5rem;height:2.5rem}.c-thumbnail__sm{width:1.5rem;height:1.5rem;border-radius:var(--mobile-size-border-radius-sm)}@media (min-width: var(--tablet-size-viewport-width)){.c-thumbnail{border-radius:var(--tablet-size-border-radius-md)}}@media (min-width: var(--widescreen-size-viewport-width)){.c-thumbnail{border-radius:var(--widescreen-size-border-radius-md)}}@media (min-width: var(--desktop-size-viewport-width)){.c-thumbnail{border-radius:var(--desktop-size-border-radius-md)}}\n"] }]
|
|
818
|
+
}], propDecorators: { size: [{
|
|
819
|
+
type: Input
|
|
820
|
+
}], src: [{
|
|
821
|
+
type: Input
|
|
822
|
+
}], alt: [{
|
|
823
|
+
type: Input
|
|
824
|
+
}] } });
|
|
825
|
+
|
|
826
|
+
let nextId = 0;
|
|
827
|
+
class TooltipComponent {
|
|
828
|
+
text = '';
|
|
829
|
+
position = 'top';
|
|
830
|
+
triggerId = `tooltip-trigger-${++nextId}`;
|
|
831
|
+
tooltipId = `tooltip-${this.triggerId}`;
|
|
832
|
+
visible = false;
|
|
833
|
+
show() {
|
|
834
|
+
this.visible = true;
|
|
835
|
+
}
|
|
836
|
+
hide() {
|
|
837
|
+
this.visible = false;
|
|
838
|
+
}
|
|
839
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
840
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TooltipComponent, isStandalone: true, selector: "lib-tooltip", inputs: { text: "text", position: "position", triggerId: "triggerId" }, ngImport: i0, template: "<div [class]=\"['c-tooltip', 'c-tooltip--' + position]\" [attr.id]=\"triggerId\">\n <ng-content></ng-content>\n \n <div\n *ngIf=\"visible\"\n class=\"c-tooltip__text\"\n [attr.role]=\"'tooltip'\"\n [attr.id]=\"tooltipId\"\n [class]=\"position\"\n >\n {{ text }}\n </div>\n </div>\n ", styles: [".c-tooltip{position:absolute;z-index:100;background:var(--color-core-background-default);color:var(--color-core-content-default);border-radius:var(--mobile-size-component-border-radius);padding:var(--mobile-space-component-padding-xs) var(--mobile-space-component-padding-sm);font-size:var(--mobile-typography-label-sm-default-size)}.c-tooltip--bottom{bottom:100%;left:50%;transform:translate(-50%) translateY(-.5rem)}.c-tooltip--left{left:100%;top:50%;transform:translate(.5rem) translateY(-50%)}.c-tooltip--top{top:100%;left:50%;transform:translate(-50%) translateY(.5rem)}.c-tooltip--right{right:100%;top:50%;transform:translate(-.5rem) translateY(-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
841
|
+
}
|
|
842
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
843
|
+
type: Component,
|
|
844
|
+
args: [{ selector: 'lib-tooltip', standalone: true, imports: [CommonModule], template: "<div [class]=\"['c-tooltip', 'c-tooltip--' + position]\" [attr.id]=\"triggerId\">\n <ng-content></ng-content>\n \n <div\n *ngIf=\"visible\"\n class=\"c-tooltip__text\"\n [attr.role]=\"'tooltip'\"\n [attr.id]=\"tooltipId\"\n [class]=\"position\"\n >\n {{ text }}\n </div>\n </div>\n ", styles: [".c-tooltip{position:absolute;z-index:100;background:var(--color-core-background-default);color:var(--color-core-content-default);border-radius:var(--mobile-size-component-border-radius);padding:var(--mobile-space-component-padding-xs) var(--mobile-space-component-padding-sm);font-size:var(--mobile-typography-label-sm-default-size)}.c-tooltip--bottom{bottom:100%;left:50%;transform:translate(-50%) translateY(-.5rem)}.c-tooltip--left{left:100%;top:50%;transform:translate(.5rem) translateY(-50%)}.c-tooltip--top{top:100%;left:50%;transform:translate(-50%) translateY(.5rem)}.c-tooltip--right{right:100%;top:50%;transform:translate(-.5rem) translateY(-50%)}\n"] }]
|
|
845
|
+
}], propDecorators: { text: [{
|
|
846
|
+
type: Input
|
|
847
|
+
}], position: [{
|
|
848
|
+
type: Input
|
|
849
|
+
}], triggerId: [{
|
|
850
|
+
type: Input
|
|
851
|
+
}] } });
|
|
852
|
+
|
|
853
|
+
/**
|
|
854
|
+
* Generated bundle index. Do not edit.
|
|
855
|
+
*/
|
|
856
|
+
|
|
857
|
+
export { AvatarComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, IconAlertComponent, IconEyeComponent, IconSpinnerComponent, IconSuccessComponent, IconTestComponent, IconThumbComponent, IconUserComponent, InputLabelComponent, LinkComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TooltipComponent };
|
|
858
|
+
//# sourceMappingURL=crowdfarming-oliva-ds.mjs.map
|