@crowdfarming/oliva-ds 1.9.0 → 1.10.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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, ElementRef, ContentChild, forwardRef, ViewChild, HostListener, ViewChildren
|
|
2
|
+
import { Input, Component, EventEmitter, Output, input, output, ElementRef, ContentChild, forwardRef, ViewChild, HostListener, ViewChildren } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
@@ -161,6 +161,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
161
161
|
type: Input
|
|
162
162
|
}] } });
|
|
163
163
|
|
|
164
|
+
class ArrowsComponent {
|
|
165
|
+
fullWidth = input(false);
|
|
166
|
+
variant = input('default');
|
|
167
|
+
leftDisabled = input(false);
|
|
168
|
+
rightDisabled = input(false);
|
|
169
|
+
leftClick = output();
|
|
170
|
+
rightClick = output();
|
|
171
|
+
get classes() {
|
|
172
|
+
const c = [
|
|
173
|
+
'c-arrows',
|
|
174
|
+
this.fullWidth() ? 'c-arrows--full-width' : '',
|
|
175
|
+
`c-arrows--${this.variant()}`,
|
|
176
|
+
];
|
|
177
|
+
return c.filter(Boolean).join(' ');
|
|
178
|
+
}
|
|
179
|
+
onLeftClick() {
|
|
180
|
+
if (!this.leftDisabled()) {
|
|
181
|
+
this.leftClick.emit();
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
onRightClick() {
|
|
185
|
+
if (!this.rightDisabled()) {
|
|
186
|
+
this.rightClick.emit();
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ArrowsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ArrowsComponent, isStandalone: true, selector: "lib-arrows", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, leftDisabled: { classPropertyName: "leftDisabled", publicName: "leftDisabled", isSignal: true, isRequired: false, transformFunction: null }, rightDisabled: { classPropertyName: "rightDisabled", publicName: "rightDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { leftClick: "leftClick", rightClick: "rightClick" }, ngImport: i0, template: "<div [ngClass]=\"classes\">\n <button\n [disabled]=\"leftDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--left\"\n aria-label=\"Previous\"\n (click)=\"onLeftClick()\"\n >\n <lib-icon icon=\"arrow\" variant=\"left\" [size]=\"'sm'\"></lib-icon>\n </button>\n\n <button\n [disabled]=\"rightDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--right\"\n aria-label=\"Next\"\n (click)=\"onRightClick()\"\n >\n <lib-icon icon=\"arrow\" variant=\"right\" [size]=\"'sm'\"></lib-icon>\n </button>\n</div>\n", styles: [".c-arrows{display:flex;align-items:center;gap:var(--space-component-gap-lg)}.c-arrows__button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--size-border-radius-full);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);background-color:var(--color-button-neutral-background-default);cursor:pointer;padding:var(--space-component-padding-sm)}.c-arrows__button ::ng-deep lib-icon svg path{fill:var(--color-action-neutral-content-default)}.c-arrows__button:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover)}.c-arrows__button:hover ::ng-deep lib-icon svg path{fill:var(--color-action-neutral-content-hover)}.c-arrows__button:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-action-neutral-border-pressed)}.c-arrows__button:active ::ng-deep lib-icon svg path{fill:var(--color-action-neutral-content-pressed)}.c-arrows__button:disabled{opacity:.32;background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-action-neutral-border-disabled);cursor:not-allowed}.c-arrows__button:disabled ::ng-deep lib-icon svg path{fill:var(--color-action-neutral-content-disabled)}.c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--floating .c-arrows__button{box-shadow:var(--elevation-floating);background-color:var(--color-button-neutral-floating-background-default);border:none}.c-arrows--floating .c-arrows__button:hover{background-color:var(--color-button-neutral-floating-background-hover)}.c-arrows--floating .c-arrows__button:active{background-color:var(--color-button-neutral-floating-background-pressed)}.c-arrows--floating .c-arrows__button:disabled{background-color:var(--color-button-neutral-floating-background-disabled)}.c-arrows--floating .c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--full-width{width:100%;justify-content:space-between}\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"] }] });
|
|
191
|
+
}
|
|
192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ArrowsComponent, decorators: [{
|
|
193
|
+
type: Component,
|
|
194
|
+
args: [{ selector: 'lib-arrows', imports: [CommonModule, IconComponent], template: "<div [ngClass]=\"classes\">\n <button\n [disabled]=\"leftDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--left\"\n aria-label=\"Previous\"\n (click)=\"onLeftClick()\"\n >\n <lib-icon icon=\"arrow\" variant=\"left\" [size]=\"'sm'\"></lib-icon>\n </button>\n\n <button\n [disabled]=\"rightDisabled()\"\n type=\"button\"\n class=\"c-arrows__button c-arrows__button--right\"\n aria-label=\"Next\"\n (click)=\"onRightClick()\"\n >\n <lib-icon icon=\"arrow\" variant=\"right\" [size]=\"'sm'\"></lib-icon>\n </button>\n</div>\n", styles: [".c-arrows{display:flex;align-items:center;gap:var(--space-component-gap-lg)}.c-arrows__button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--size-border-radius-full);border:var(--size-button-border-width) solid var(--color-action-neutral-border-default);background-color:var(--color-button-neutral-background-default);cursor:pointer;padding:var(--space-component-padding-sm)}.c-arrows__button ::ng-deep lib-icon svg path{fill:var(--color-action-neutral-content-default)}.c-arrows__button:hover{background-color:var(--color-button-neutral-background-hover);border-color:var(--color-action-neutral-border-hover)}.c-arrows__button:hover ::ng-deep lib-icon svg path{fill:var(--color-action-neutral-content-hover)}.c-arrows__button:active{background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-action-neutral-border-pressed)}.c-arrows__button:active ::ng-deep lib-icon svg path{fill:var(--color-action-neutral-content-pressed)}.c-arrows__button:disabled{opacity:.32;background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-action-neutral-border-disabled);cursor:not-allowed}.c-arrows__button:disabled ::ng-deep lib-icon svg path{fill:var(--color-action-neutral-content-disabled)}.c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--floating .c-arrows__button{box-shadow:var(--elevation-floating);background-color:var(--color-button-neutral-floating-background-default);border:none}.c-arrows--floating .c-arrows__button:hover{background-color:var(--color-button-neutral-floating-background-hover)}.c-arrows--floating .c-arrows__button:active{background-color:var(--color-button-neutral-floating-background-pressed)}.c-arrows--floating .c-arrows__button:disabled{background-color:var(--color-button-neutral-floating-background-disabled)}.c-arrows--floating .c-arrows__button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-arrows--full-width{width:100%;justify-content:space-between}\n"] }]
|
|
195
|
+
}] });
|
|
196
|
+
|
|
164
197
|
class AvatarComponent {
|
|
165
198
|
size = 'lg';
|
|
166
199
|
initial = '';
|
|
@@ -234,11 +267,11 @@ class ButtonComponent {
|
|
|
234
267
|
return null;
|
|
235
268
|
}
|
|
236
269
|
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-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:
|
|
270
|
+
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);cursor:not-allowed}.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:var(--color-button-secondary-background-default);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);cursor:not-allowed}.c-button--tertiary{background-color:var(--color-button-tertiary-background-default);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:var(--color-button-tertiary-background-disabled);border:0;color:var(--color-button-secondary-content-disabled);cursor:not-allowed}.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);cursor:not-allowed}.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);cursor:not-allowed}.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
271
|
}
|
|
239
272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
240
273
|
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-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:
|
|
274
|
+
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);cursor:not-allowed}.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:var(--color-button-secondary-background-default);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);cursor:not-allowed}.c-button--tertiary{background-color:var(--color-button-tertiary-background-default);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:var(--color-button-tertiary-background-disabled);border:0;color:var(--color-button-secondary-content-disabled);cursor:not-allowed}.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);cursor:not-allowed}.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);cursor:not-allowed}.c-button--full-width{width:100%;justify-content:center}\n"] }]
|
|
242
275
|
}], propDecorators: { text: [{
|
|
243
276
|
type: Input
|
|
244
277
|
}], ariaLabel: [{
|
|
@@ -2216,5 +2249,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2216
2249
|
* Generated bundle index. Do not edit.
|
|
2217
2250
|
*/
|
|
2218
2251
|
|
|
2219
|
-
export { AccordionComponent, AlertComponent, AvatarComponent, BadgeComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkComponent, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SocialLoginComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent };
|
|
2252
|
+
export { AccordionComponent, AlertComponent, ArrowsComponent, AvatarComponent, BadgeComponent, ButtonComponent, ButtonIconComponent, ButtonSetComponent, CheckboxComponent, CheckboxGroupComponent, ChipsComponent, DesignTokensComponent, HelperTextComponent, IconComponent, InputDateComponent, InputLabelComponent, InputNumberComponent, InputPaymentComponent, InputSearchComponent, InputUploadComponent, LinkComponent, PaginationComponent, PasswordInputComponent, RadioComponent, RadioGroupComponent, SegmentedControlComponent, SelectComponent, SocialLoginComponent, SwitchComponent, TabsComponent, TagComponent, TextInputComponent, TextareaComponent, ThumbnailComponent, TileComponent, ToastComponent, TooltipComponent };
|
|
2220
2253
|
//# sourceMappingURL=crowdfarming-oliva-ds.mjs.map
|