@crowdfarming/oliva-ds 1.8.0 → 1.9.0-rc.1
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 +42 -42
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/fonts/figtree/figtree-latin-400-normal.ttf +0 -0
- package/fonts/figtree/figtree-latin-400-normal.woff +0 -0
- package/fonts/figtree/figtree-latin-400-normal.woff2 +0 -0
- package/fonts/figtree/figtree-latin-500-normal.ttf +0 -0
- package/fonts/figtree/figtree-latin-500-normal.woff +0 -0
- package/fonts/figtree/figtree-latin-500-normal.woff2 +0 -0
- package/fonts/figtree/figtree-latin-600-normal.ttf +0 -0
- package/fonts/figtree/figtree-latin-600-normal.woff +0 -0
- package/fonts/figtree/figtree-latin-600-normal.woff2 +0 -0
- package/fonts/figtree/figtree-latin-700-normal.ttf +0 -0
- package/fonts/figtree/figtree-latin-700-normal.woff +0 -0
- package/fonts/figtree/figtree-latin-700-normal.woff2 +0 -0
- package/fonts/figtree/figtree.css +44 -0
- package/fonts/fira/fira-sans-condensed-latin-400-normal.ttf +0 -0
- package/fonts/fira/fira-sans-condensed-latin-400-normal.woff +0 -0
- package/fonts/fira/fira-sans-condensed-latin-400-normal.woff2 +0 -0
- package/fonts/fira/fira-sans-condensed-latin-500-normal.ttf +0 -0
- package/fonts/fira/fira-sans-condensed-latin-500-normal.woff +0 -0
- package/fonts/fira/fira-sans-condensed-latin-500-normal.woff2 +0 -0
- package/fonts/fira/fira-sans-condensed-latin-600-normal.ttf +0 -0
- package/fonts/fira/fira-sans-condensed-latin-600-normal.woff +0 -0
- package/fonts/fira/fira-sans-condensed-latin-600-normal.woff2 +0 -0
- package/fonts/fira/fira-sans-condensed-latin-700-normal.ttf +0 -0
- package/fonts/fira/fira-sans-condensed-latin-700-normal.woff +0 -0
- package/fonts/fira/fira-sans-condensed-latin-700-normal.woff2 +0 -0
- package/fonts/fira/fira.css +45 -0
- package/fonts/satoshi/Satoshi-Black.eot +0 -0
- package/fonts/satoshi/Satoshi-Black.ttf +0 -0
- package/fonts/satoshi/Satoshi-Black.woff +0 -0
- package/fonts/satoshi/Satoshi-Black.woff2 +0 -0
- package/fonts/satoshi/Satoshi-Bold.eot +0 -0
- package/fonts/satoshi/Satoshi-Bold.ttf +0 -0
- package/fonts/satoshi/Satoshi-Bold.woff +0 -0
- package/fonts/satoshi/Satoshi-Bold.woff2 +0 -0
- package/fonts/satoshi/Satoshi-Light.eot +0 -0
- package/fonts/satoshi/Satoshi-Light.ttf +0 -0
- package/fonts/satoshi/Satoshi-Light.woff +0 -0
- package/fonts/satoshi/Satoshi-Light.woff2 +0 -0
- package/fonts/satoshi/Satoshi-Medium.eot +0 -0
- package/fonts/satoshi/Satoshi-Medium.ttf +0 -0
- package/fonts/satoshi/Satoshi-Medium.woff +0 -0
- package/fonts/satoshi/Satoshi-Medium.woff2 +0 -0
- package/fonts/satoshi/Satoshi-Regular.eot +0 -0
- package/fonts/satoshi/Satoshi-Regular.ttf +0 -0
- package/fonts/satoshi/Satoshi-Regular.woff +0 -0
- package/fonts/satoshi/Satoshi-Regular.woff2 +0 -0
- package/fonts/satoshi/Satoshi-Variable.eot +0 -0
- package/fonts/satoshi/Satoshi-Variable.ttf +0 -0
- package/fonts/satoshi/Satoshi-Variable.woff +0 -0
- package/fonts/satoshi/Satoshi-Variable.woff2 +0 -0
- package/fonts/satoshi/satoshi.css +85 -0
- package/fonts/souvenir/SouvenirStd-Bold.eot +0 -0
- package/fonts/souvenir/SouvenirStd-Bold.ttf +0 -0
- package/fonts/souvenir/SouvenirStd-Bold.woff +0 -0
- package/fonts/souvenir/SouvenirStd-Bold.woff2 +0 -0
- package/fonts/souvenir/SouvenirStd-Demi.eot +0 -0
- package/fonts/souvenir/SouvenirStd-Demi.ttf +0 -0
- package/fonts/souvenir/SouvenirStd-Demi.woff +0 -0
- package/fonts/souvenir/SouvenirStd-Demi.woff2 +0 -0
- package/fonts/souvenir/SouvenirStd-Light.eot +0 -0
- package/fonts/souvenir/SouvenirStd-Light.ttf +0 -0
- package/fonts/souvenir/SouvenirStd-Light.woff +0 -0
- package/fonts/souvenir/SouvenirStd-Light.woff2 +0 -0
- package/fonts/souvenir/SouvenirStd-Medium.eot +0 -0
- package/fonts/souvenir/SouvenirStd-Medium.ttf +0 -0
- package/fonts/souvenir/SouvenirStd-Medium.woff +0 -0
- package/fonts/souvenir/SouvenirStd-Medium.woff2 +0 -0
- package/fonts/souvenir/souvenir.css +59 -0
- package/package.json +3 -2
- package/themes/crowdfarming.css +8 -12
- package/themes/farmeneur.css +8 -13
|
@@ -48,11 +48,11 @@ class AccordionComponent {
|
|
|
48
48
|
this.toggled.emit(this.expanded);
|
|
49
49
|
}
|
|
50
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate" }, outputs: { expandedChange: "expandedChange", toggled: "toggled" }, ngImport: i0, template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <ng-container *ngIf=\"showSlot\">\n <ng-content></ng-content>\n </ng-container>\n <div class=\"c-accordion__text\" *ngIf=\"!showSlot && showText\">\n {{ text }}\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:1px solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus{box-shadow:
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate" }, outputs: { expandedChange: "expandedChange", toggled: "toggled" }, ngImport: i0, template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <ng-container *ngIf=\"showSlot\">\n <ng-content></ng-content>\n </ng-container>\n <div class=\"c-accordion__text\" *ngIf=\"!showSlot && showText\">\n {{ text }}\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:1px solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:pressed{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
52
52
|
}
|
|
53
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
|
-
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <ng-container *ngIf=\"showSlot\">\n <ng-content></ng-content>\n </ng-container>\n <div class=\"c-accordion__text\" *ngIf=\"!showSlot && showText\">\n {{ text }}\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:1px solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus{box-shadow:
|
|
55
|
+
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <ng-container *ngIf=\"showSlot\">\n <ng-content></ng-content>\n </ng-container>\n <div class=\"c-accordion__text\" *ngIf=\"!showSlot && showText\">\n {{ text }}\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:1px solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-accordion__header:pressed{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}\n"] }]
|
|
56
56
|
}], propDecorators: { id: [{
|
|
57
57
|
type: Input
|
|
58
58
|
}], expanded: [{
|
|
@@ -104,11 +104,11 @@ class ButtonIconComponent {
|
|
|
104
104
|
return null;
|
|
105
105
|
}
|
|
106
106
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
107
|
-
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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-md);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--size-button-border-width) solid var(--color-button-primary-
|
|
107
|
+
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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-md);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button-icon:hover{background-color:var(--color-button-primary-background-hover);border:var(--size-button-border-width) solid var(--color-button-primary-border-hover)}.c-button-icon:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button-icon:active{background-color:var(--color-button-primary-background-pressed);border:var(--size-button-border-width) solid var(--color-button-primary-border-pressed)}.c-button-icon:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-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(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm)}.c-button-icon--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--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(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-2xs) var(--space-component-padding-2xs)}.c-button-icon--xs .c-button-icon__icon,.c-button-icon--xs .c-button-icon__loading{width:16px;height:16px}.c-button-icon--secondary{background-color:transparent;border:var(--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:active{background-color:var(--color-button-secondary-background-pressed)}.c-button-icon--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button-icon--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button-icon--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--tertiary:active{background-color:var(--color-button-secondary-background-pressed)}.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(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button-icon--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button-icon--danger:active{background-color:var(--color-button-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button-icon--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button-icon--inverse{background-color:var(--color-button-inverse-background-default);border:var(--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(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button-icon--inverse:active{background-color:var(--color-button-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button-icon--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-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: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
108
108
|
}
|
|
109
109
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, decorators: [{
|
|
110
110
|
type: Component,
|
|
111
|
-
args: [{ selector: 'lib-button-icon', imports: [CommonModule, IconComponent], 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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-md);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--size-button-border-width) solid var(--color-button-primary-
|
|
111
|
+
args: [{ selector: 'lib-button-icon', imports: [CommonModule, IconComponent], 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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-md);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button-icon:hover{background-color:var(--color-button-primary-background-hover);border:var(--size-button-border-width) solid var(--color-button-primary-border-hover)}.c-button-icon:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button-icon:active{background-color:var(--color-button-primary-background-pressed);border:var(--size-button-border-width) solid var(--color-button-primary-border-pressed)}.c-button-icon:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-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(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm)}.c-button-icon--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--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(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-2xs) var(--space-component-padding-2xs)}.c-button-icon--xs .c-button-icon__icon,.c-button-icon--xs .c-button-icon__loading{width:16px;height:16px}.c-button-icon--secondary{background-color:transparent;border:var(--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:active{background-color:var(--color-button-secondary-background-pressed)}.c-button-icon--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button-icon--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button-icon--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button-icon--tertiary:active{background-color:var(--color-button-secondary-background-pressed)}.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(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button-icon--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button-icon--danger:active{background-color:var(--color-button-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button-icon--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button-icon--inverse{background-color:var(--color-button-inverse-background-default);border:var(--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(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button-icon--inverse:active{background-color:var(--color-button-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button-icon--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-disabled)}\n"] }]
|
|
112
112
|
}], propDecorators: { ariaLabel: [{
|
|
113
113
|
type: Input
|
|
114
114
|
}], disabled: [{
|
|
@@ -234,11 +234,11 @@ class ButtonComponent {
|
|
|
234
234
|
return null;
|
|
235
235
|
}
|
|
236
236
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
237
|
-
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", fullWidth: "fullWidth" }, 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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-
|
|
237
|
+
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", fullWidth: "fullWidth" }, 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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button:hover{background-color:var(--color-button-primary-background-hover);border:var(--size-button-border-width) solid var(--color-button-primary-border-hover)}.c-button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button:active{background-color:var(--color-button-primary-background-pressed);border:var(--size-button-border-width) solid var(--color-button-primary-border-pressed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--secondary{background-color:transparent;border:var(--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:active{background-color:var(--color-button-secondary-background-pressed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--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(--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:active{background-color:var(--color-button-secondary-background-pressed)}.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(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button--danger:active{background-color:var(--color-button-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--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(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:active{background-color:var(--color-button-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-disabled)}.c-button--full-width{width:100%;justify-content:center}\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: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
238
238
|
}
|
|
239
239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
240
240
|
type: Component,
|
|
241
|
-
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule, IconComponent], 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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-
|
|
241
|
+
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule, IconComponent], 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 icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></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(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-background-default);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button:hover{background-color:var(--color-button-primary-background-hover);border:var(--size-button-border-width) solid var(--color-button-primary-border-hover)}.c-button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button:active{background-color:var(--color-button-primary-background-pressed);border:var(--size-button-border-width) solid var(--color-button-primary-border-pressed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--secondary{background-color:transparent;border:var(--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:active{background-color:var(--color-button-secondary-background-pressed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--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(--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:active{background-color:var(--color-button-secondary-background-pressed)}.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(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button--danger:active{background-color:var(--color-button-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--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(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:active{background-color:var(--color-button-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-disabled)}.c-button--full-width{width:100%;justify-content:center}\n"] }]
|
|
242
242
|
}], propDecorators: { text: [{
|
|
243
243
|
type: Input
|
|
244
244
|
}], ariaLabel: [{
|
|
@@ -297,11 +297,11 @@ class LinkComponent {
|
|
|
297
297
|
return this.weight !== 'regular' ? `c-link--${this.weight}` : '';
|
|
298
298
|
}
|
|
299
299
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
300
|
-
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", weight: "weight" }, queries: [{ propertyName: "iconBeforeContent", first: true, predicate: ["iconBefore"], descendants: true, read: ElementRef }, { propertyName: "iconAfterContent", first: true, predicate: ["iconAfter"], descendants: true, read: ElementRef }], ngImport: i0, template: "<a\n [ngClass]=\"[\n 'c-link',\n variantClass,\n sizeClass,\n weightClass,\n disabled ? 'c-link--disabled' : ''\n ]\"\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=\"hasIconBefore\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconBefore]\"></ng-content\n ></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=\"hasIconAfter\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconAfter]\"></ng-content\n ></span>\n </ng-container>\n</a>\n", 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(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-action-primary-content-default);text-decoration:none}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.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{
|
|
300
|
+
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", weight: "weight" }, queries: [{ propertyName: "iconBeforeContent", first: true, predicate: ["iconBefore"], descendants: true, read: ElementRef }, { propertyName: "iconAfterContent", first: true, predicate: ["iconAfter"], descendants: true, read: ElementRef }], ngImport: i0, template: "<a\n [ngClass]=\"[\n 'c-link',\n variantClass,\n sizeClass,\n weightClass,\n disabled ? 'c-link--disabled' : ''\n ]\"\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=\"hasIconBefore\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconBefore]\"></ng-content\n ></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=\"hasIconAfter\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconAfter]\"></ng-content\n ></span>\n </ng-container>\n</a>\n", 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(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-action-primary-content-default);text-decoration:none}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.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-visible{box-shadow:var(--focus-outset);outline:none}.c-link:active{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"] }] });
|
|
301
301
|
}
|
|
302
302
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, decorators: [{
|
|
303
303
|
type: Component,
|
|
304
|
-
args: [{ selector: 'lib-link', standalone: true, imports: [CommonModule], template: "<a\n [ngClass]=\"[\n 'c-link',\n variantClass,\n sizeClass,\n weightClass,\n disabled ? 'c-link--disabled' : ''\n ]\"\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=\"hasIconBefore\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconBefore]\"></ng-content\n ></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=\"hasIconAfter\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconAfter]\"></ng-content\n ></span>\n </ng-container>\n</a>\n", 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(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-action-primary-content-default);text-decoration:none}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.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{
|
|
304
|
+
args: [{ selector: 'lib-link', standalone: true, imports: [CommonModule], template: "<a\n [ngClass]=\"[\n 'c-link',\n variantClass,\n sizeClass,\n weightClass,\n disabled ? 'c-link--disabled' : ''\n ]\"\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=\"hasIconBefore\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconBefore]\"></ng-content\n ></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=\"hasIconAfter\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconAfter]\"></ng-content\n ></span>\n </ng-container>\n</a>\n", 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(--space-component-gap-xs);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-action-primary-content-default);text-decoration:none}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.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-visible{box-shadow:var(--focus-outset);outline:none}.c-link:active{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"] }]
|
|
305
305
|
}], propDecorators: { text: [{
|
|
306
306
|
type: Input
|
|
307
307
|
}], loadingText: [{
|
|
@@ -548,11 +548,11 @@ class ChipsComponent {
|
|
|
548
548
|
return this.selectedValues.includes(value);
|
|
549
549
|
}
|
|
550
550
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
551
|
-
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(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;padding:var(--space-
|
|
551
|
+
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(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:1px solid var(--color-action-primary-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-visible{outline:2px solid var(--focus-outset)}.c-chip__label:active{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(--color-button-primary-content-default);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-visible{outline:2px solid var(--focus-outset)}.c-chip__label:has(input:checked):active{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
552
552
|
}
|
|
553
553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
554
554
|
type: Component,
|
|
555
|
-
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(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;padding:var(--space-
|
|
555
|
+
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(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-block;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:1px solid var(--color-action-primary-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-visible{outline:2px solid var(--focus-outset)}.c-chip__label:active{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(--color-button-primary-content-default);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-visible{outline:2px solid var(--focus-outset)}.c-chip__label:has(input:checked):active{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{display:none}\n"] }]
|
|
556
556
|
}], propDecorators: { options: [{
|
|
557
557
|
type: Input
|
|
558
558
|
}], selectedValues: [{
|
|
@@ -629,7 +629,7 @@ class InputDateComponent {
|
|
|
629
629
|
useExisting: forwardRef(() => InputDateComponent),
|
|
630
630
|
multi: true,
|
|
631
631
|
},
|
|
632
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"toggleCalendar()\"\n >\n <lib-icon icon=\"calendar\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
632
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"toggleCalendar()\"\n >\n <lib-icon icon=\"calendar\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
633
633
|
}
|
|
634
634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
635
635
|
type: Component,
|
|
@@ -646,7 +646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
646
646
|
useExisting: forwardRef(() => InputDateComponent),
|
|
647
647
|
multi: true,
|
|
648
648
|
},
|
|
649
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"toggleCalendar()\"\n >\n <lib-icon icon=\"calendar\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
649
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"toggleCalendar()\"\n >\n <lib-icon icon=\"calendar\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"] }]
|
|
650
650
|
}], propDecorators: { label: [{
|
|
651
651
|
type: Input
|
|
652
652
|
}], placeholder: [{
|
|
@@ -745,7 +745,7 @@ class InputNumberComponent {
|
|
|
745
745
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
746
746
|
multi: true,
|
|
747
747
|
},
|
|
748
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\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 [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__less\"\n (click)=\"downNumber()\"\n >\n <lib-icon icon=\"less\" size=\"md\" iconBefore />\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__up\"\n (click)=\"upNumber()\"\n >\n <lib-icon icon=\"plus\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
748
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\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 [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__less\"\n (click)=\"downNumber()\"\n >\n <lib-icon icon=\"less\" size=\"md\" iconBefore />\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__up\"\n (click)=\"upNumber()\"\n >\n <lib-icon icon=\"plus\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) 2rem var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
749
749
|
}
|
|
750
750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
751
751
|
type: Component,
|
|
@@ -762,7 +762,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
762
762
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
763
763
|
multi: true,
|
|
764
764
|
},
|
|
765
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\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 [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__less\"\n (click)=\"downNumber()\"\n >\n <lib-icon icon=\"less\" size=\"md\" iconBefore />\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__up\"\n (click)=\"upNumber()\"\n >\n <lib-icon icon=\"plus\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
765
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\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 [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__less\"\n (click)=\"downNumber()\"\n >\n <lib-icon icon=\"less\" size=\"md\" iconBefore />\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__up\"\n (click)=\"upNumber()\"\n >\n <lib-icon icon=\"plus\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) 2rem var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
766
766
|
}], propDecorators: { label: [{
|
|
767
767
|
type: Input
|
|
768
768
|
}], placeholder: [{
|
|
@@ -910,7 +910,7 @@ class InputPaymentComponent {
|
|
|
910
910
|
useExisting: forwardRef(() => InputPaymentComponent),
|
|
911
911
|
multi: true,
|
|
912
912
|
},
|
|
913
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\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 [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n [icon]=\"disabled ? 'card-disabled' : 'card'\"\n size=\"md\"\n ></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
913
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\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 [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n [icon]=\"disabled ? 'card-disabled' : 'card'\"\n size=\"md\"\n ></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__wrapper:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__mini:focus-visible{outline:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
914
914
|
}
|
|
915
915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputPaymentComponent, decorators: [{
|
|
916
916
|
type: Component,
|
|
@@ -926,7 +926,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
926
926
|
useExisting: forwardRef(() => InputPaymentComponent),
|
|
927
927
|
multi: true,
|
|
928
928
|
},
|
|
929
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\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 [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n [icon]=\"disabled ? 'card-disabled' : 'card'\"\n size=\"md\"\n ></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
929
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\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 [required]=\"required\"\n [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n [icon]=\"disabled ? 'card-disabled' : 'card'\"\n size=\"md\"\n ></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__wrapper:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__mini:focus-visible{outline:none}\n"] }]
|
|
930
930
|
}], propDecorators: { label: [{
|
|
931
931
|
type: Input
|
|
932
932
|
}], placeholder: [{
|
|
@@ -1019,7 +1019,7 @@ class InputSearchComponent {
|
|
|
1019
1019
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
1020
1020
|
multi: true,
|
|
1021
1021
|
},
|
|
1022
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\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 [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon icon=\"search\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
1022
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\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 [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon icon=\"search\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
1023
1023
|
}
|
|
1024
1024
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
1025
1025
|
type: Component,
|
|
@@ -1035,7 +1035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1035
1035
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
1036
1036
|
multi: true,
|
|
1037
1037
|
},
|
|
1038
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\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 [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon icon=\"search\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
1038
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\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 [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon icon=\"search\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"] }]
|
|
1039
1039
|
}], propDecorators: { label: [{
|
|
1040
1040
|
type: Input
|
|
1041
1041
|
}], placeholder: [{
|
|
@@ -1146,7 +1146,7 @@ class InputUploadComponent {
|
|
|
1146
1146
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
1147
1147
|
multi: true,
|
|
1148
1148
|
},
|
|
1149
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"fileInput.click()\"\n >\n <lib-icon icon=\"upload\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
1149
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"fileInput.click()\"\n >\n <lib-icon icon=\"upload\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
1150
1150
|
}
|
|
1151
1151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputUploadComponent, decorators: [{
|
|
1152
1152
|
type: Component,
|
|
@@ -1163,7 +1163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1163
1163
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
1164
1164
|
multi: true,
|
|
1165
1165
|
},
|
|
1166
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"fileInput.click()\"\n >\n <lib-icon icon=\"upload\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
1166
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"fileInput.click()\"\n >\n <lib-icon icon=\"upload\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"] }]
|
|
1167
1167
|
}], propDecorators: { label: [{
|
|
1168
1168
|
type: Input
|
|
1169
1169
|
}], placeholder: [{
|
|
@@ -1252,11 +1252,11 @@ class PaginationComponent {
|
|
|
1252
1252
|
}
|
|
1253
1253
|
}
|
|
1254
1254
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1255
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: PaginationComponent, isStandalone: true, selector: "lib-pagination", inputs: { totalPages: "totalPages", currentPage: "currentPage", size: "size" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<nav\n class=\"c-pagination\"\n [class.c-pagination--sm]=\"size==='sm'\"\n [class.c-pagination--md]=\"size==='md'\"\n role=\"navigation\"\n aria-label=\"Paginaci\u00F3n\"\n>\n <ul class=\"c-pagination__list\" role=\"list\">\n <li class=\"c-pagination__item\">\n <button\n class=\"c-pagination__link c-pagination__prev\"\n (click)=\"prev()\"\n [disabled]=\"currentPage===1\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <lib-icon icon=\"arrow\" variant=\"left\" size=\"lg\" iconBefore />\n </button>\n </li>\n\n <li\n *ngFor=\"let p of pages\"\n class=\"c-pagination__item\"\n [class.c-pagination__item--active]=\"p===currentPage\"\n >\n <button\n *ngIf=\"p!=='ellipsis'; else dotTpl\"\n class=\"c-pagination__link\"\n (click)=\"select(p)\"\n [attr.aria-current]=\"p===currentPage? 'page': null\"\n >\n {{ p }}\n </button>\n <ng-template #dotTpl>\n <span class=\"c-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n </ng-template>\n </li>\n\n <li class=\"c-pagination__item\">\n <button\n class=\"c-pagination__link c-pagination__next\"\n (click)=\"next()\"\n [disabled]=\"currentPage===totalPages\"\n aria-label=\"P\u00E1gina siguiente\"\n >\n <lib-icon icon=\"arrow\" variant=\"right\" size=\"lg\" iconBefore />\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".c-pagination__list{display:flex;list-style:none;padding:0;margin:0;display:inline-flex;justify-content:center;align-items:center}.c-pagination__item{display:flex;width:2.5rem;height:2.5rem;flex-direction:column;justify-content:center;align-items:center}.c-pagination__item--active .c-pagination__link{position:relative;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem);cursor:default}.c-pagination__item--active .c-pagination__link:before{content:\"\";position:absolute;width:1.125rem;height:.125rem;background:var(--color-action-primary-selected-background-default, #217870);bottom:0;left:0;right:0;margin:0 auto}.c-pagination__link{background:none;border:none;cursor:pointer;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem)}.c-pagination__link:hover:not(:disabled){background:var(--color-feedback-neutral-surface-background, #
|
|
1255
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: PaginationComponent, isStandalone: true, selector: "lib-pagination", inputs: { totalPages: "totalPages", currentPage: "currentPage", size: "size" }, outputs: { pageChange: "pageChange" }, usesOnChanges: true, ngImport: i0, template: "<nav\n class=\"c-pagination\"\n [class.c-pagination--sm]=\"size==='sm'\"\n [class.c-pagination--md]=\"size==='md'\"\n role=\"navigation\"\n aria-label=\"Paginaci\u00F3n\"\n>\n <ul class=\"c-pagination__list\" role=\"list\">\n <li class=\"c-pagination__item\">\n <button\n class=\"c-pagination__link c-pagination__prev\"\n (click)=\"prev()\"\n [disabled]=\"currentPage===1\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <lib-icon icon=\"arrow\" variant=\"left\" size=\"lg\" iconBefore />\n </button>\n </li>\n\n <li\n *ngFor=\"let p of pages\"\n class=\"c-pagination__item\"\n [class.c-pagination__item--active]=\"p===currentPage\"\n >\n <button\n *ngIf=\"p!=='ellipsis'; else dotTpl\"\n class=\"c-pagination__link\"\n (click)=\"select(p)\"\n [attr.aria-current]=\"p===currentPage? 'page': null\"\n >\n {{ p }}\n </button>\n <ng-template #dotTpl>\n <span class=\"c-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n </ng-template>\n </li>\n\n <li class=\"c-pagination__item\">\n <button\n class=\"c-pagination__link c-pagination__next\"\n (click)=\"next()\"\n [disabled]=\"currentPage===totalPages\"\n aria-label=\"P\u00E1gina siguiente\"\n >\n <lib-icon icon=\"arrow\" variant=\"right\" size=\"lg\" iconBefore />\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".c-pagination__list{display:flex;list-style:none;padding:0;margin:0;display:inline-flex;justify-content:center;align-items:center}.c-pagination__item{display:flex;width:2.5rem;height:2.5rem;flex-direction:column;justify-content:center;align-items:center}.c-pagination__item:focus-visible{box-shadow:var(--focus-outset)}.c-pagination__item--active .c-pagination__link{position:relative;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem);cursor:default}.c-pagination__item--active .c-pagination__link:before{content:\"\";position:absolute;width:1.125rem;height:.125rem;background:var(--color-action-primary-selected-background-default, #217870);bottom:0;left:0;right:0;margin:0 auto}.c-pagination__item--active:focus-visible{box-shadow:var(--focus-outset)}.c-pagination__link{background:none;border:none;cursor:pointer;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem)}.c-pagination__link:hover:not(:disabled){background:var(--color-feedback-neutral-surface-background, #dee7e6)}.c-pagination__link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-pagination__link:disabled{cursor:not-allowed;opacity:.5}.c-pagination__ellipsis{display:inline-block;padding:0 .5rem;color:var(--color-textfield-content-placeholder, #676d6c)}.c-pagination__prev,.c-pagination__next{font-weight:700}\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: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
1256
1256
|
}
|
|
1257
1257
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
1258
1258
|
type: Component,
|
|
1259
|
-
args: [{ selector: 'lib-pagination', standalone: true, imports: [CommonModule, IconComponent], template: "<nav\n class=\"c-pagination\"\n [class.c-pagination--sm]=\"size==='sm'\"\n [class.c-pagination--md]=\"size==='md'\"\n role=\"navigation\"\n aria-label=\"Paginaci\u00F3n\"\n>\n <ul class=\"c-pagination__list\" role=\"list\">\n <li class=\"c-pagination__item\">\n <button\n class=\"c-pagination__link c-pagination__prev\"\n (click)=\"prev()\"\n [disabled]=\"currentPage===1\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <lib-icon icon=\"arrow\" variant=\"left\" size=\"lg\" iconBefore />\n </button>\n </li>\n\n <li\n *ngFor=\"let p of pages\"\n class=\"c-pagination__item\"\n [class.c-pagination__item--active]=\"p===currentPage\"\n >\n <button\n *ngIf=\"p!=='ellipsis'; else dotTpl\"\n class=\"c-pagination__link\"\n (click)=\"select(p)\"\n [attr.aria-current]=\"p===currentPage? 'page': null\"\n >\n {{ p }}\n </button>\n <ng-template #dotTpl>\n <span class=\"c-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n </ng-template>\n </li>\n\n <li class=\"c-pagination__item\">\n <button\n class=\"c-pagination__link c-pagination__next\"\n (click)=\"next()\"\n [disabled]=\"currentPage===totalPages\"\n aria-label=\"P\u00E1gina siguiente\"\n >\n <lib-icon icon=\"arrow\" variant=\"right\" size=\"lg\" iconBefore />\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".c-pagination__list{display:flex;list-style:none;padding:0;margin:0;display:inline-flex;justify-content:center;align-items:center}.c-pagination__item{display:flex;width:2.5rem;height:2.5rem;flex-direction:column;justify-content:center;align-items:center}.c-pagination__item--active .c-pagination__link{position:relative;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem);cursor:default}.c-pagination__item--active .c-pagination__link:before{content:\"\";position:absolute;width:1.125rem;height:.125rem;background:var(--color-action-primary-selected-background-default, #217870);bottom:0;left:0;right:0;margin:0 auto}.c-pagination__link{background:none;border:none;cursor:pointer;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem)}.c-pagination__link:hover:not(:disabled){background:var(--color-feedback-neutral-surface-background, #
|
|
1259
|
+
args: [{ selector: 'lib-pagination', standalone: true, imports: [CommonModule, IconComponent], template: "<nav\n class=\"c-pagination\"\n [class.c-pagination--sm]=\"size==='sm'\"\n [class.c-pagination--md]=\"size==='md'\"\n role=\"navigation\"\n aria-label=\"Paginaci\u00F3n\"\n>\n <ul class=\"c-pagination__list\" role=\"list\">\n <li class=\"c-pagination__item\">\n <button\n class=\"c-pagination__link c-pagination__prev\"\n (click)=\"prev()\"\n [disabled]=\"currentPage===1\"\n aria-label=\"P\u00E1gina anterior\"\n >\n <lib-icon icon=\"arrow\" variant=\"left\" size=\"lg\" iconBefore />\n </button>\n </li>\n\n <li\n *ngFor=\"let p of pages\"\n class=\"c-pagination__item\"\n [class.c-pagination__item--active]=\"p===currentPage\"\n >\n <button\n *ngIf=\"p!=='ellipsis'; else dotTpl\"\n class=\"c-pagination__link\"\n (click)=\"select(p)\"\n [attr.aria-current]=\"p===currentPage? 'page': null\"\n >\n {{ p }}\n </button>\n <ng-template #dotTpl>\n <span class=\"c-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n </ng-template>\n </li>\n\n <li class=\"c-pagination__item\">\n <button\n class=\"c-pagination__link c-pagination__next\"\n (click)=\"next()\"\n [disabled]=\"currentPage===totalPages\"\n aria-label=\"P\u00E1gina siguiente\"\n >\n <lib-icon icon=\"arrow\" variant=\"right\" size=\"lg\" iconBefore />\n </button>\n </li>\n </ul>\n</nav>\n", styles: [".c-pagination__list{display:flex;list-style:none;padding:0;margin:0;display:inline-flex;justify-content:center;align-items:center}.c-pagination__item{display:flex;width:2.5rem;height:2.5rem;flex-direction:column;justify-content:center;align-items:center}.c-pagination__item:focus-visible{box-shadow:var(--focus-outset)}.c-pagination__item--active .c-pagination__link{position:relative;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem);cursor:default}.c-pagination__item--active .c-pagination__link:before{content:\"\";position:absolute;width:1.125rem;height:.125rem;background:var(--color-action-primary-selected-background-default, #217870);bottom:0;left:0;right:0;margin:0 auto}.c-pagination__item--active:focus-visible{box-shadow:var(--focus-outset)}.c-pagination__link{background:none;border:none;cursor:pointer;color:var(--color-button-neutral-content-default, #070707);text-align:center;font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem)}.c-pagination__link:hover:not(:disabled){background:var(--color-feedback-neutral-surface-background, #dee7e6)}.c-pagination__link:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-pagination__link:disabled{cursor:not-allowed;opacity:.5}.c-pagination__ellipsis{display:inline-block;padding:0 .5rem;color:var(--color-textfield-content-placeholder, #676d6c)}.c-pagination__prev,.c-pagination__next{font-weight:700}\n"] }]
|
|
1260
1260
|
}], propDecorators: { totalPages: [{
|
|
1261
1261
|
type: Input
|
|
1262
1262
|
}], currentPage: [{
|
|
@@ -1332,7 +1332,7 @@ class PasswordInputComponent {
|
|
|
1332
1332
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
1333
1333
|
multi: true,
|
|
1334
1334
|
},
|
|
1335
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n ></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 [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n >\n <lib-icon\n icon=\"eye\"\n size=\"md\"\n iconBefore\n [variant]=\"showPassword ? 'close' : 'open'\"\n />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
1335
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n ></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 [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n >\n <lib-icon\n icon=\"eye\"\n size=\"md\"\n iconBefore\n [variant]=\"showPassword ? 'close' : 'open'\"\n />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
1336
1336
|
}
|
|
1337
1337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
1338
1338
|
type: Component,
|
|
@@ -1349,7 +1349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1349
1349
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
1350
1350
|
multi: true,
|
|
1351
1351
|
},
|
|
1352
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n ></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 [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n >\n <lib-icon\n icon=\"eye\"\n size=\"md\"\n iconBefore\n [variant]=\"showPassword ? 'close' : 'open'\"\n />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
1352
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n ></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 [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n >\n <lib-icon\n icon=\"eye\"\n size=\"md\"\n iconBefore\n [variant]=\"showPassword ? 'close' : 'open'\"\n />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\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(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"] }]
|
|
1353
1353
|
}], propDecorators: { label: [{
|
|
1354
1354
|
type: Input
|
|
1355
1355
|
}], placeholder: [{
|
|
@@ -1416,7 +1416,7 @@ class RadioComponent {
|
|
|
1416
1416
|
useExisting: forwardRef(() => RadioComponent),
|
|
1417
1417
|
multi: true
|
|
1418
1418
|
}
|
|
1419
|
-
], 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 === _value\"\n (change)=\"onInputChange()\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === _value ? 'true' : 'false'\"\n [attr.tabindex]=\"value === _value ? '0' : '-1'\"\n [disabled]=\"disabled\"\n />\n <span\n class=\"c-radio__custom\"\n [class.has-error]=\"error\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>\n", styles: [".c-radio{display:flex;align-items:center;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--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(--space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--size-border-radius-full);border:var(--size-border-width-md) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default);background:var(--color-action-primary-selected-background-default)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--size-border-radius-full);background:var(--color-action-primary-selected-content-default)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover)}.c-radio__input:checked+.c-radio__custom:focus{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:
|
|
1419
|
+
], 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 === _value\"\n (change)=\"onInputChange()\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === _value ? 'true' : 'false'\"\n [attr.tabindex]=\"value === _value ? '0' : '-1'\"\n [disabled]=\"disabled\"\n />\n <span\n class=\"c-radio__custom\"\n [class.has-error]=\"error\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>\n", styles: [".c-radio{display:flex;align-items:center;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--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(--space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--size-border-radius-full);border:var(--size-border-width-md) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default);background:var(--color-action-primary-selected-background-default)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--size-border-radius-full);background:var(--color-action-primary-selected-content-default)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover)}.c-radio__input:checked+.c-radio__custom:focus-visible{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:active{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-visible__custom{outline:2px solid var(--focus-outset)}.c-radio:active__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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1420
1420
|
}
|
|
1421
1421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioComponent, decorators: [{
|
|
1422
1422
|
type: Component,
|
|
@@ -1426,7 +1426,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1426
1426
|
useExisting: forwardRef(() => RadioComponent),
|
|
1427
1427
|
multi: true
|
|
1428
1428
|
}
|
|
1429
|
-
], 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 === _value\"\n (change)=\"onInputChange()\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === _value ? 'true' : 'false'\"\n [attr.tabindex]=\"value === _value ? '0' : '-1'\"\n [disabled]=\"disabled\"\n />\n <span\n class=\"c-radio__custom\"\n [class.has-error]=\"error\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>\n", styles: [".c-radio{display:flex;align-items:center;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--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(--space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--size-border-radius-full);border:var(--size-border-width-md) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default);background:var(--color-action-primary-selected-background-default)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--size-border-radius-full);background:var(--color-action-primary-selected-content-default)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover)}.c-radio__input:checked+.c-radio__custom:focus{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:
|
|
1429
|
+
], 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 === _value\"\n (change)=\"onInputChange()\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === _value ? 'true' : 'false'\"\n [attr.tabindex]=\"value === _value ? '0' : '-1'\"\n [disabled]=\"disabled\"\n />\n <span\n class=\"c-radio__custom\"\n [class.has-error]=\"error\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>\n", styles: [".c-radio{display:flex;align-items:center;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--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(--space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--size-border-radius-full);border:var(--size-border-width-md) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default);background:var(--color-action-primary-selected-background-default)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--size-border-radius-full);background:var(--color-action-primary-selected-content-default)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover)}.c-radio__input:checked+.c-radio__custom:focus-visible{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:active{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-visible__custom{outline:2px solid var(--focus-outset)}.c-radio:active__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)}\n"] }]
|
|
1430
1430
|
}], propDecorators: { id: [{
|
|
1431
1431
|
type: Input
|
|
1432
1432
|
}], name: [{
|
|
@@ -1509,11 +1509,11 @@ class SegmentedControlComponent {
|
|
|
1509
1509
|
}
|
|
1510
1510
|
}
|
|
1511
1511
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1512
|
-
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(--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(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--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:
|
|
1512
|
+
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(--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(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--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:active{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-visible{border:1px solid var(--color-decorative-primary-default);outline:none}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-action-primary-selected-content-default)}\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"] }] });
|
|
1513
1513
|
}
|
|
1514
1514
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
1515
1515
|
type: Component,
|
|
1516
|
-
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(--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(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--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:
|
|
1516
|
+
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(--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(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--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:active{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-visible{border:1px solid var(--color-decorative-primary-default);outline:none}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-action-primary-selected-content-default)}\n"] }]
|
|
1517
1517
|
}], propDecorators: { options: [{
|
|
1518
1518
|
type: Input
|
|
1519
1519
|
}], selectedValue: [{
|
|
@@ -1694,7 +1694,7 @@ class SelectComponent {
|
|
|
1694
1694
|
useExisting: forwardRef(() => SelectComponent),
|
|
1695
1695
|
multi: true,
|
|
1696
1696
|
},
|
|
1697
|
-
], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectionContainer"], descendants: true, static: true }, { propertyName: "badgeElems", predicate: ["badgeElem"], descendants: true }], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--multiple]=\"multiple\"\n [class.c-select--full-width]=\"fullWidth\"\n>\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth"], outputs: ["emitValue"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate"], outputs: ["changed"] }] });
|
|
1697
|
+
], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectionContainer"], descendants: true, static: true }, { propertyName: "badgeElems", predicate: ["badgeElem"], descendants: true }], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--multiple]=\"multiple\"\n [class.c-select--full-width]=\"fullWidth\"\n>\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth"], outputs: ["emitValue"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate"], outputs: ["changed"] }] });
|
|
1698
1698
|
}
|
|
1699
1699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1700
1700
|
type: Component,
|
|
@@ -1713,7 +1713,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1713
1713
|
useExisting: forwardRef(() => SelectComponent),
|
|
1714
1714
|
multi: true,
|
|
1715
1715
|
},
|
|
1716
|
-
], template: "<div\n class=\"c-select\"\n [class.c-select--multiple]=\"multiple\"\n [class.c-select--full-width]=\"fullWidth\"\n>\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\n"] }]
|
|
1716
|
+
], template: "<div\n class=\"c-select\"\n [class.c-select--multiple]=\"multiple\"\n [class.c-select--full-width]=\"fullWidth\"\n>\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus-visible{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\n"] }]
|
|
1717
1717
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
|
|
1718
1718
|
type: Input
|
|
1719
1719
|
}], multiple: [{
|
|
@@ -1775,11 +1775,11 @@ class SocialLoginComponent {
|
|
|
1775
1775
|
return c.filter(Boolean).join(' ');
|
|
1776
1776
|
}
|
|
1777
1777
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SocialLoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1778
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SocialLoginComponent, isStandalone: true, selector: "lib-social-login", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"text()\"\n>\n <!-- Square variant: centered icon only -->\n @if (variant() === 'square') {\n <div class=\"c-social-login__icon-container\">\n <lib-icon [icon]=\"provider()\" size=\"lg\"> </lib-icon>\n </div>\n }\n\n <!-- Text variant: icon + text -->\n @if (variant() === 'text') {\n <div class=\"c-social-login__content\">\n <lib-icon [icon]=\"provider()\" size=\"lg\"> </lib-icon>\n <span class=\"c-social-login__text\">{{ text() }}</span>\n </div>\n }\n</button>\n", styles: [".c-social-login{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);border-radius:var(--size-button-border-radius);background-color:var(--color-button-neutral-background-default);color:var(--color-core-content-default)}.c-social-login:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-social-login:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-action-neutral-content-pressed)}.c-social-login:focus{outline:2px solid var(--color-effect-focus-color);outline-offset:2px;border-color:var(--color-action-neutral-border-default)}.c-social-login:disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed;opacity:.24}.c-social-login--text{padding-inline:var(--space-component-padding-xl);gap:var(--space-component-gap-md)}.c-social-login--text .c-social-login__content{display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-md);width:100%}.c-social-login--square{width:48px}.c-social-login--square .c-social-login__icon-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
1778
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SocialLoginComponent, isStandalone: true, selector: "lib-social-login", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"text()\"\n>\n <!-- Square variant: centered icon only -->\n @if (variant() === 'square') {\n <div class=\"c-social-login__icon-container\">\n <lib-icon [icon]=\"provider()\" size=\"lg\"> </lib-icon>\n </div>\n }\n\n <!-- Text variant: icon + text -->\n @if (variant() === 'text') {\n <div class=\"c-social-login__content\">\n <lib-icon [icon]=\"provider()\" size=\"lg\"> </lib-icon>\n <span class=\"c-social-login__text\">{{ text() }}</span>\n </div>\n }\n</button>\n", styles: [".c-social-login{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);border-radius:var(--size-button-border-radius);background-color:var(--color-button-neutral-background-default);color:var(--color-core-content-default)}.c-social-login:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-social-login:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-action-neutral-content-pressed)}.c-social-login:focus-visible{outline:2px solid var(--color-effect-focus-color);outline-offset:2px;border-color:var(--color-action-neutral-border-default)}.c-social-login:disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed;opacity:.24}.c-social-login--text{padding-inline:var(--space-component-padding-xl);gap:var(--space-component-gap-md)}.c-social-login--text .c-social-login__content{display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-md);width:100%}.c-social-login--square{width:48px}.c-social-login--square .c-social-login__icon-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
1779
1779
|
}
|
|
1780
1780
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SocialLoginComponent, decorators: [{
|
|
1781
1781
|
type: Component,
|
|
1782
|
-
args: [{ selector: 'lib-social-login', imports: [CommonModule, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"text()\"\n>\n <!-- Square variant: centered icon only -->\n @if (variant() === 'square') {\n <div class=\"c-social-login__icon-container\">\n <lib-icon [icon]=\"provider()\" size=\"lg\"> </lib-icon>\n </div>\n }\n\n <!-- Text variant: icon + text -->\n @if (variant() === 'text') {\n <div class=\"c-social-login__content\">\n <lib-icon [icon]=\"provider()\" size=\"lg\"> </lib-icon>\n <span class=\"c-social-login__text\">{{ text() }}</span>\n </div>\n }\n</button>\n", styles: [".c-social-login{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);border-radius:var(--size-button-border-radius);background-color:var(--color-button-neutral-background-default);color:var(--color-core-content-default)}.c-social-login:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-social-login:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-action-neutral-content-pressed)}.c-social-login:focus{outline:2px solid var(--color-effect-focus-color);outline-offset:2px;border-color:var(--color-action-neutral-border-default)}.c-social-login:disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed;opacity:.24}.c-social-login--text{padding-inline:var(--space-component-padding-xl);gap:var(--space-component-gap-md)}.c-social-login--text .c-social-login__content{display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-md);width:100%}.c-social-login--square{width:48px}.c-social-login--square .c-social-login__icon-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
|
|
1782
|
+
args: [{ selector: 'lib-social-login', imports: [CommonModule, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"text()\"\n>\n <!-- Square variant: centered icon only -->\n @if (variant() === 'square') {\n <div class=\"c-social-login__icon-container\">\n <lib-icon [icon]=\"provider()\" size=\"lg\"> </lib-icon>\n </div>\n }\n\n <!-- Text variant: icon + text -->\n @if (variant() === 'text') {\n <div class=\"c-social-login__content\">\n <lib-icon [icon]=\"provider()\" size=\"lg\"> </lib-icon>\n <span class=\"c-social-login__text\">{{ text() }}</span>\n </div>\n }\n</button>\n", styles: [".c-social-login{display:flex;align-items:center;justify-content:center;width:100%;height:48px;cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);border-radius:var(--size-button-border-radius);background-color:var(--color-button-neutral-background-default);color:var(--color-core-content-default)}.c-social-login:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-social-login:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-action-neutral-content-pressed)}.c-social-login:focus-visible{outline:2px solid var(--color-effect-focus-color);outline-offset:2px;border-color:var(--color-action-neutral-border-default)}.c-social-login:disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed;opacity:.24}.c-social-login--text{padding-inline:var(--space-component-padding-xl);gap:var(--space-component-gap-md)}.c-social-login--text .c-social-login__content{display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-md);width:100%}.c-social-login--square{width:48px}.c-social-login--square .c-social-login__icon-container{display:flex;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
|
|
1783
1783
|
}] });
|
|
1784
1784
|
|
|
1785
1785
|
class SwitchComponent {
|
|
@@ -1796,11 +1796,11 @@ class SwitchComponent {
|
|
|
1796
1796
|
this.checkedChange.emit(this.checked);
|
|
1797
1797
|
}
|
|
1798
1798
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1799
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SwitchComponent, isStandalone: true, selector: "lib-switch", inputs: { checked: "checked", disabled: "disabled", label: "label", required: "required" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked\"\n [class.c-switch--disabled]=\"disabled\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [disabled]=\"disabled\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:2rem;height:1rem;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929A99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7D8483)}.c-switch__track:focus{box-shadow:
|
|
1799
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SwitchComponent, isStandalone: true, selector: "lib-switch", inputs: { checked: "checked", disabled: "disabled", label: "label", required: "required" }, outputs: { checkedChange: "checkedChange" }, ngImport: i0, template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked\"\n [class.c-switch--disabled]=\"disabled\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [disabled]=\"disabled\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:2rem;height:1rem;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929A99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7D8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:.125rem;left:.125rem;width:.75rem;height:.75rem;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625B)}.c-switch--checked .c-switch__thumb{transform:translate(1rem)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }] });
|
|
1800
1800
|
}
|
|
1801
1801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SwitchComponent, decorators: [{
|
|
1802
1802
|
type: Component,
|
|
1803
|
-
args: [{ selector: 'lib-switch', standalone: true, imports: [CommonModule, FormsModule, InputLabelComponent], template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked\"\n [class.c-switch--disabled]=\"disabled\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [disabled]=\"disabled\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:2rem;height:1rem;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929A99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7D8483)}.c-switch__track:focus{box-shadow:
|
|
1803
|
+
args: [{ selector: 'lib-switch', standalone: true, imports: [CommonModule, FormsModule, InputLabelComponent], template: "<div\n class=\"c-switch\"\n [class.c-switch--checked]=\"checked\"\n [class.c-switch--disabled]=\"disabled\"\n>\n <button\n type=\"button\"\n class=\"c-switch__track\"\n role=\"switch\"\n [attr.aria-checked]=\"checked\"\n [disabled]=\"disabled\"\n (click)=\"onToggle()\"\n [attr.aria-label]=\"label\"\n >\n <span class=\"c-switch__thumb\"></span>\n </button>\n\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n</div>\n", styles: [".c-switch{display:flex;width:19.5rem;min-width:2.75rem;align-items:center;gap:var(--space-component-gap-md)}.c-switch__track{position:relative;width:2rem;height:1rem;border:none;cursor:pointer;transition:background .2s;display:flex;padding:var(--space-component-padding-xs, .25rem) var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-xs, .25rem) var(--space-component-padding-xs, .25rem);align-items:center;gap:.5rem;border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-unchecked-background-default, #929A99)}.c-switch__track:hover{background:var(--color-switch-unchecked-background-hover, #7D8483)}.c-switch__track:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-switch__thumb{position:absolute;top:.125rem;left:.125rem;width:.75rem;height:.75rem;background:#fff;border-radius:50%;transition:transform .2s}.c-switch--checked .c-switch__track{border-radius:var(--size-border-radius-full, 6.25rem);background:var(--color-switch-checked-background-default, #217870)}.c-switch--checked .c-switch__track:hover{background:var(--color-switch-checked-background-hover, #19625B)}.c-switch--checked .c-switch__thumb{transform:translate(1rem)}.c-switch--disabled{cursor:not-allowed}.c-switch--disabled .c-switch__track{background:var(--color-switch-unchecked-background-disabled, rgba(0, 0, 0, .08))}\n"] }]
|
|
1804
1804
|
}], propDecorators: { checked: [{
|
|
1805
1805
|
type: Input
|
|
1806
1806
|
}], disabled: [{
|
|
@@ -1827,11 +1827,11 @@ class TabsComponent {
|
|
|
1827
1827
|
this.valueChange.emit(value);
|
|
1828
1828
|
}
|
|
1829
1829
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TabsComponent, isStandalone: true, selector: "lib-tabs", inputs: { options: "options" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul class=\"c-tabs\" role=\"tablist\">\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue\"\n role=\"tab\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"onClick($event, option.value)\"\n *ngFor=\"let option of options\"\n >\n {{ option.label }}\n </li>\n</ul>", styles: [".c-tabs{width:100%;display:flex;align-items:flex-start;border-bottom:1px solid var(--color-core-border-soft);margin:0;padding:0;list-style:none}.c-tabs__tab{color:var(--color-action-neutral-content-default);text-align:center;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);padding:var(--space-component-padding-sm) var(--space-component-padding-md);background:var(--color-action-primary-background-default);gap:var(--space-component-gap-sm);cursor:pointer;margin:0;list-style:none}.c-tabs__tab:hover{color:var(--color-core-content-hover);background:var(--color-action-neutral-background-hover)}.c-tabs__tab:
|
|
1830
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TabsComponent, isStandalone: true, selector: "lib-tabs", inputs: { options: "options" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<ul class=\"c-tabs\" role=\"tablist\">\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue\"\n role=\"tab\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"onClick($event, option.value)\"\n *ngFor=\"let option of options\"\n >\n {{ option.label }}\n </li>\n</ul>", styles: [".c-tabs{width:100%;display:flex;align-items:flex-start;border-bottom:1px solid var(--color-core-border-soft);margin:0;padding:0;list-style:none}.c-tabs__tab{color:var(--color-action-neutral-content-default);text-align:center;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);padding:var(--space-component-padding-sm) var(--space-component-padding-md);background:var(--color-action-primary-background-default);gap:var(--space-component-gap-sm);cursor:pointer;margin:0;list-style:none}.c-tabs__tab:hover{color:var(--color-core-content-hover);background:var(--color-action-neutral-background-hover)}.c-tabs__tab:active{color:var(--color-core-content-pressed);background-color:var(--color-core-background-pressed)}.c-tabs__tab :focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tabs__tab--selected{position:relative;color:var(--color-core-content-default);background:var(--color-action-primary-background-default)}.c-tabs__tab--selected:before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:.125rem;background:var(--color-action-primary-selected-background-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
|
|
1831
1831
|
}
|
|
1832
1832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabsComponent, decorators: [{
|
|
1833
1833
|
type: Component,
|
|
1834
|
-
args: [{ selector: 'lib-tabs', imports: [CommonModule], template: "<ul class=\"c-tabs\" role=\"tablist\">\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue\"\n role=\"tab\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"onClick($event, option.value)\"\n *ngFor=\"let option of options\"\n >\n {{ option.label }}\n </li>\n</ul>", styles: [".c-tabs{width:100%;display:flex;align-items:flex-start;border-bottom:1px solid var(--color-core-border-soft);margin:0;padding:0;list-style:none}.c-tabs__tab{color:var(--color-action-neutral-content-default);text-align:center;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);padding:var(--space-component-padding-sm) var(--space-component-padding-md);background:var(--color-action-primary-background-default);gap:var(--space-component-gap-sm);cursor:pointer;margin:0;list-style:none}.c-tabs__tab:hover{color:var(--color-core-content-hover);background:var(--color-action-neutral-background-hover)}.c-tabs__tab:
|
|
1834
|
+
args: [{ selector: 'lib-tabs', imports: [CommonModule], template: "<ul class=\"c-tabs\" role=\"tablist\">\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue\"\n role=\"tab\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"onClick($event, option.value)\"\n *ngFor=\"let option of options\"\n >\n {{ option.label }}\n </li>\n</ul>", styles: [".c-tabs{width:100%;display:flex;align-items:flex-start;border-bottom:1px solid var(--color-core-border-soft);margin:0;padding:0;list-style:none}.c-tabs__tab{color:var(--color-action-neutral-content-default);text-align:center;font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);padding:var(--space-component-padding-sm) var(--space-component-padding-md);background:var(--color-action-primary-background-default);gap:var(--space-component-gap-sm);cursor:pointer;margin:0;list-style:none}.c-tabs__tab:hover{color:var(--color-core-content-hover);background:var(--color-action-neutral-background-hover)}.c-tabs__tab:active{color:var(--color-core-content-pressed);background-color:var(--color-core-background-pressed)}.c-tabs__tab :focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tabs__tab--selected{position:relative;color:var(--color-core-content-default);background:var(--color-action-primary-background-default)}.c-tabs__tab--selected:before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:.125rem;background:var(--color-action-primary-selected-background-default)}\n"] }]
|
|
1835
1835
|
}], propDecorators: { options: [{
|
|
1836
1836
|
type: Input
|
|
1837
1837
|
}], valueChange: [{
|
|
@@ -1937,7 +1937,7 @@ class TextInputComponent {
|
|
|
1937
1937
|
useExisting: forwardRef(() => TextInputComponent),
|
|
1938
1938
|
multi: true,
|
|
1939
1939
|
},
|
|
1940
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\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\">\n <lib-icon icon=\"alert\" size=\"md\"></lib-icon>{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon icon=\"success\" size=\"md\"></lib-icon>{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
1940
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\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\">\n <lib-icon icon=\"alert\" size=\"md\"></lib-icon>{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon icon=\"success\" size=\"md\"></lib-icon>{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
1941
1941
|
}
|
|
1942
1942
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1943
1943
|
type: Component,
|
|
@@ -1952,7 +1952,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1952
1952
|
useExisting: forwardRef(() => TextInputComponent),
|
|
1953
1953
|
multi: true,
|
|
1954
1954
|
},
|
|
1955
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\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\">\n <lib-icon icon=\"alert\" size=\"md\"></lib-icon>{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon icon=\"success\" size=\"md\"></lib-icon>{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
1955
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\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\">\n <lib-icon icon=\"alert\" size=\"md\"></lib-icon>{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon icon=\"success\" size=\"md\"></lib-icon>{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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)}\n"] }]
|
|
1956
1956
|
}], propDecorators: { label: [{
|
|
1957
1957
|
type: Input
|
|
1958
1958
|
}], name: [{
|
|
@@ -2043,7 +2043,7 @@ class TextareaComponent {
|
|
|
2043
2043
|
useExisting: forwardRef(() => TextareaComponent),
|
|
2044
2044
|
multi: true,
|
|
2045
2045
|
},
|
|
2046
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\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 [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
2046
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\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 [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
2047
2047
|
}
|
|
2048
2048
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
2049
2049
|
type: Component,
|
|
@@ -2059,7 +2059,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2059
2059
|
useExisting: forwardRef(() => TextareaComponent),
|
|
2060
2060
|
multi: true,
|
|
2061
2061
|
},
|
|
2062
|
-
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\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 [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-
|
|
2062
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\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 [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-md) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.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(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.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)}\n"] }]
|
|
2063
2063
|
}], propDecorators: { label: [{
|
|
2064
2064
|
type: Input
|
|
2065
2065
|
}], placeholder: [{
|
|
@@ -2123,11 +2123,11 @@ class TileComponent {
|
|
|
2123
2123
|
this.valueExport.emit(this.value);
|
|
2124
2124
|
}
|
|
2125
2125
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2126
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", name: "name", value: "value", disabled: "disabled" }, outputs: { valueExport: "valueExport" }, ngImport: i0, template: "<div class=\"c-tile\" [class.c-tile--selected]=\"value\" [class.c-tile--neutral]=\"variant === 'neutral'\" [class.c-tile--disabled]=\"disabled\" tabindex=\"0\" role=\"button\" (click)=\"onClick()\" (keyup.enter)=\"onClick()\">\n <div class=\"c-tile__wrapper\">\n <p class=\"c-tile__title\">{{ title }}</p>\n <lib-radio *ngIf=\"variant === 'radio'\" [name]=\"name\" label=\"\" [disabled]=\"disabled\" [value]=\"value ? 'true' : ''\" class=\"c-tile__check\"></lib-radio>\n <lib-checkbox *ngIf=\"variant === 'checkbox'\" label=\"\" [disabled]=\"disabled\" [checked]=\"value\" class=\"c-tile__check\"></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["id", "name", "value", "label", "error", "disabled"], outputs: ["modelChange"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate"], outputs: ["changed"] }] });
|
|
2126
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", name: "name", value: "value", disabled: "disabled" }, outputs: { valueExport: "valueExport" }, ngImport: i0, template: "<div class=\"c-tile\" [class.c-tile--selected]=\"value\" [class.c-tile--neutral]=\"variant === 'neutral'\" [class.c-tile--disabled]=\"disabled\" tabindex=\"0\" role=\"button\" (click)=\"onClick()\" (keyup.enter)=\"onClick()\">\n <div class=\"c-tile__wrapper\">\n <p class=\"c-tile__title\">{{ title }}</p>\n <lib-radio *ngIf=\"variant === 'radio'\" [name]=\"name\" label=\"\" [disabled]=\"disabled\" [value]=\"value ? 'true' : ''\" class=\"c-tile__check\"></lib-radio>\n <lib-checkbox *ngIf=\"variant === 'checkbox'\" label=\"\" [disabled]=\"disabled\" [checked]=\"value\" class=\"c-tile__check\"></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus-visible .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["id", "name", "value", "label", "error", "disabled"], outputs: ["modelChange"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate"], outputs: ["changed"] }] });
|
|
2127
2127
|
}
|
|
2128
2128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, decorators: [{
|
|
2129
2129
|
type: Component,
|
|
2130
|
-
args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div class=\"c-tile\" [class.c-tile--selected]=\"value\" [class.c-tile--neutral]=\"variant === 'neutral'\" [class.c-tile--disabled]=\"disabled\" tabindex=\"0\" role=\"button\" (click)=\"onClick()\" (keyup.enter)=\"onClick()\">\n <div class=\"c-tile__wrapper\">\n <p class=\"c-tile__title\">{{ title }}</p>\n <lib-radio *ngIf=\"variant === 'radio'\" [name]=\"name\" label=\"\" [disabled]=\"disabled\" [value]=\"value ? 'true' : ''\" class=\"c-tile__check\"></lib-radio>\n <lib-checkbox *ngIf=\"variant === 'checkbox'\" label=\"\" [disabled]=\"disabled\" [checked]=\"value\" class=\"c-tile__check\"></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"] }]
|
|
2130
|
+
args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], template: "<div class=\"c-tile\" [class.c-tile--selected]=\"value\" [class.c-tile--neutral]=\"variant === 'neutral'\" [class.c-tile--disabled]=\"disabled\" tabindex=\"0\" role=\"button\" (click)=\"onClick()\" (keyup.enter)=\"onClick()\">\n <div class=\"c-tile__wrapper\">\n <p class=\"c-tile__title\">{{ title }}</p>\n <lib-radio *ngIf=\"variant === 'radio'\" [name]=\"name\" label=\"\" [disabled]=\"disabled\" [value]=\"value ? 'true' : ''\" class=\"c-tile__check\"></lib-radio>\n <lib-checkbox *ngIf=\"variant === 'checkbox'\" label=\"\" [disabled]=\"disabled\" [checked]=\"value\" class=\"c-tile__check\"></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>", styles: [".c-tile{display:flex;width:18rem;padding:var(--space-page-padding-sm) var(--space-container-padding-sm);flex-direction:column;align-items:flex-start;gap:var(--space-container-gap-sm);border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);cursor:pointer}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--disabled,.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;width:100%;height:100%;justify-content:space-between;align-items:center}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #EDFDFA)}.c-tile--neutral:focus-visible{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile:focus-visible .c-tile__check{box-shadow:0 0 0 2px var(--color-effect-focus-contrast),0 0 0 4px var(--color-effect-focus-color)}.c-tile__title{margin:0;color:var(--color-tile-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tile__check{display:flex;align-items:center;justify-content:center}\n"] }]
|
|
2131
2131
|
}], propDecorators: { variant: [{
|
|
2132
2132
|
type: Input
|
|
2133
2133
|
}], title: [{
|