@crowdfarming/oliva-ds 1.94.0 → 1.95.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.
|
@@ -2719,6 +2719,7 @@ class ButtonIconComponent {
|
|
|
2719
2719
|
iconName = input('placeholder-regular');
|
|
2720
2720
|
disabled = input(false);
|
|
2721
2721
|
loading = input(false);
|
|
2722
|
+
rounded = input(false);
|
|
2722
2723
|
skeletonActive = input(false);
|
|
2723
2724
|
clicked = output();
|
|
2724
2725
|
handleClick() {
|
|
@@ -2734,6 +2735,7 @@ class ButtonIconComponent {
|
|
|
2734
2735
|
this.skeletonActive() ? 'c-button-icon--skeleton-active' : '',
|
|
2735
2736
|
this.loading() ? 'c-button-icon--loading' : '',
|
|
2736
2737
|
this.disabled() ? 'c-button-icon--disabled' : '',
|
|
2738
|
+
this.rounded() ? 'c-button-icon--rounded' : '',
|
|
2737
2739
|
];
|
|
2738
2740
|
return c.filter(Boolean).join(' ');
|
|
2739
2741
|
});
|
|
@@ -2792,11 +2794,11 @@ class ButtonIconComponent {
|
|
|
2792
2794
|
}
|
|
2793
2795
|
});
|
|
2794
2796
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2795
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonIconComponent, isStandalone: true, selector: "lib-button-icon", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n @if (!skeletonActive()) { @if (loading()) {\n <span class=\"c-button-icon__spinner\">\n <lib-spinner [size]=\"spinnerSize()\" [color]=\"iconColor()\"></lib-spinner>\n </span>\n } @else {\n <span class=\"c-button-icon__icon\">\n <lib-icon\n [name]=\"iconName()\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n } }\n</button>\n", styles: [".c-button-icon{display:flex;align-items:center;justify-content:center;height:48px;width:48px;cursor:pointer;line-height:var(--typography-label-md-strong-line-height);padding:0;border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button-icon--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress}.c-button-icon--loading{cursor:progress}.c-button-icon__icon{display:contents}.c-button-icon--md{height:40px;width:40px}.c-button-icon--sm{height:32px;width:32px}.c-button-icon--xs{line-height:var(--typography-label-sm-strong-line-height);height:24px;width:24px}.c-button-icon:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button-icon--primary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);cursor:not-allowed}.c-button-icon--secondary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);cursor:not-allowed}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);cursor:not-allowed}.c-button-icon--neutral:not(.c-button-icon--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed}.c-button-icon--inverse:not(.c-button-icon--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
2797
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonIconComponent, isStandalone: true, selector: "lib-button-icon", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n @if (!skeletonActive()) { @if (loading()) {\n <span class=\"c-button-icon__spinner\">\n <lib-spinner [size]=\"spinnerSize()\" [color]=\"iconColor()\"></lib-spinner>\n </span>\n } @else {\n <span class=\"c-button-icon__icon\">\n <lib-icon\n [name]=\"iconName()\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n } }\n</button>\n", styles: [".c-button-icon{display:flex;align-items:center;justify-content:center;height:48px;width:48px;cursor:pointer;line-height:var(--typography-label-md-strong-line-height);padding:0;border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button-icon--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress}.c-button-icon--loading{cursor:progress}.c-button-icon__icon{display:contents}.c-button-icon--md{height:40px;width:40px}.c-button-icon--sm{height:32px;width:32px}.c-button-icon--xs{line-height:var(--typography-label-sm-strong-line-height);height:24px;width:24px}.c-button-icon:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button-icon--primary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);cursor:not-allowed}.c-button-icon--secondary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);cursor:not-allowed}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);cursor:not-allowed}.c-button-icon--neutral:not(.c-button-icon--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed}.c-button-icon--rounded{border-radius:var(--size-border-radius-full)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
2796
2798
|
}
|
|
2797
2799
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, decorators: [{
|
|
2798
2800
|
type: Component,
|
|
2799
|
-
args: [{ selector: 'lib-button-icon', imports: [IconComponent, NgClass, SpinnerComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n @if (!skeletonActive()) { @if (loading()) {\n <span class=\"c-button-icon__spinner\">\n <lib-spinner [size]=\"spinnerSize()\" [color]=\"iconColor()\"></lib-spinner>\n </span>\n } @else {\n <span class=\"c-button-icon__icon\">\n <lib-icon\n [name]=\"iconName()\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n } }\n</button>\n", styles: [".c-button-icon{display:flex;align-items:center;justify-content:center;height:48px;width:48px;cursor:pointer;line-height:var(--typography-label-md-strong-line-height);padding:0;border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button-icon--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress}.c-button-icon--loading{cursor:progress}.c-button-icon__icon{display:contents}.c-button-icon--md{height:40px;width:40px}.c-button-icon--sm{height:32px;width:32px}.c-button-icon--xs{line-height:var(--typography-label-sm-strong-line-height);height:24px;width:24px}.c-button-icon:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button-icon--primary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);cursor:not-allowed}.c-button-icon--secondary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);cursor:not-allowed}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);cursor:not-allowed}.c-button-icon--neutral:not(.c-button-icon--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed}.c-button-icon--inverse:not(.c-button-icon--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);cursor:not-allowed}\n"] }]
|
|
2801
|
+
args: [{ selector: 'lib-button-icon', imports: [IconComponent, NgClass, SpinnerComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n @if (!skeletonActive()) { @if (loading()) {\n <span class=\"c-button-icon__spinner\">\n <lib-spinner [size]=\"spinnerSize()\" [color]=\"iconColor()\"></lib-spinner>\n </span>\n } @else {\n <span class=\"c-button-icon__icon\">\n <lib-icon\n [name]=\"iconName()\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n } }\n</button>\n", styles: [".c-button-icon{display:flex;align-items:center;justify-content:center;height:48px;width:48px;cursor:pointer;line-height:var(--typography-label-md-strong-line-height);padding:0;border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button-icon--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress}.c-button-icon--loading{cursor:progress}.c-button-icon__icon{display:contents}.c-button-icon--md{height:40px;width:40px}.c-button-icon--sm{height:32px;width:32px}.c-button-icon--xs{line-height:var(--typography-label-sm-strong-line-height);height:24px;width:24px}.c-button-icon:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button-icon--primary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed)}.c-button-icon--primary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);cursor:not-allowed}.c-button-icon--secondary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed)}.c-button-icon--secondary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);cursor:not-allowed}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed)}.c-button-icon--tertiary:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);cursor:not-allowed}.c-button-icon--neutral:not(.c-button-icon--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed)}.c-button-icon--neutral:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);cursor:not-allowed}.c-button-icon--rounded{border-radius:var(--size-border-radius-full)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):hover:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):active:not(.c-button-icon--loading):not(.c-button-icon--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed)}.c-button-icon--inverse:not(.c-button-icon--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);cursor:not-allowed}\n"] }]
|
|
2800
2802
|
}] });
|
|
2801
2803
|
|
|
2802
2804
|
class AlertComponent {
|
|
@@ -2846,7 +2848,7 @@ class AlertComponent {
|
|
|
2846
2848
|
}
|
|
2847
2849
|
}
|
|
2848
2850
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2849
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visibility) {\n<div\n role=\"alert\"\n [ngClass]=\"[\n 'c-alert',\n variant() ? 'c-alert--' + variant() : '',\n extraClass() ? extraClass() : '',\n closeActive ? 'c-alert--hide' : '',\n !title() ? 'c-alert--no-title' : '',\n !text() ? 'c-alert--no-text' : ''\n ]\"\n>\n @if (showIcon()) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n\n <div class=\"c-alert__content\">\n @if (title()) {\n <p class=\"c-alert__title\">{{ title() }}</p>\n } @if (text()) {\n <p class=\"c-alert__text\">{{ text() }}</p>\n }\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n\n @if (removable()) {\n <lib-button-icon\n ariaLabel=\"Close alert\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n />\n }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-sm);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);display:flex;align-items:flex-start;gap:var(--space-component-gap-md)}.c-alert--danger{border-color:var(--color-feedback-danger-default);background:var(--color-feedback-danger-subtle)}.c-alert--success{border-color:var(--color-feedback-success-default);background:var(--color-feedback-success-subtle)}.c-alert--warning{border-color:var(--color-feedback-warning-default);background:var(--color-feedback-warning-subtle)}.c-alert--info{border-color:var(--color-feedback-info-default);background:var(--color-feedback-info-subtle)}.c-alert--neutral{border-color:var(--color-feedback-neutral-default);background:var(--color-feedback-neutral-subtle)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-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);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-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);margin:0 0 auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
2851
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visibility) {\n<div\n role=\"alert\"\n [ngClass]=\"[\n 'c-alert',\n variant() ? 'c-alert--' + variant() : '',\n extraClass() ? extraClass() : '',\n closeActive ? 'c-alert--hide' : '',\n !title() ? 'c-alert--no-title' : '',\n !text() ? 'c-alert--no-text' : ''\n ]\"\n>\n @if (showIcon()) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n\n <div class=\"c-alert__content\">\n @if (title()) {\n <p class=\"c-alert__title\">{{ title() }}</p>\n } @if (text()) {\n <p class=\"c-alert__text\">{{ text() }}</p>\n }\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n\n @if (removable()) {\n <lib-button-icon\n ariaLabel=\"Close alert\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n />\n }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-sm);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);display:flex;align-items:flex-start;gap:var(--space-component-gap-md)}.c-alert--danger{border-color:var(--color-feedback-danger-default);background:var(--color-feedback-danger-subtle)}.c-alert--success{border-color:var(--color-feedback-success-default);background:var(--color-feedback-success-subtle)}.c-alert--warning{border-color:var(--color-feedback-warning-default);background:var(--color-feedback-warning-subtle)}.c-alert--info{border-color:var(--color-feedback-info-default);background:var(--color-feedback-info-subtle)}.c-alert--neutral{border-color:var(--color-feedback-neutral-default);background:var(--color-feedback-neutral-subtle)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-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);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-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);margin:0 0 auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }] });
|
|
2850
2852
|
}
|
|
2851
2853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, decorators: [{
|
|
2852
2854
|
type: Component,
|
|
@@ -3041,6 +3043,7 @@ class ButtonComponent {
|
|
|
3041
3043
|
size = input('lg');
|
|
3042
3044
|
loadingText = input('');
|
|
3043
3045
|
fullWidth = input(false);
|
|
3046
|
+
rounded = input(false);
|
|
3044
3047
|
iconBefore = input();
|
|
3045
3048
|
iconAfter = input();
|
|
3046
3049
|
type = input('button');
|
|
@@ -3059,6 +3062,7 @@ class ButtonComponent {
|
|
|
3059
3062
|
this.loading() ? 'c-button--loading' : '',
|
|
3060
3063
|
this.disabled() ? 'c-button--disabled' : '',
|
|
3061
3064
|
this.fullWidth() ? 'c-button--full-width' : '',
|
|
3065
|
+
this.rounded() ? 'c-button--rounded' : '',
|
|
3062
3066
|
];
|
|
3063
3067
|
return c.filter(Boolean).join(' ');
|
|
3064
3068
|
});
|
|
@@ -3116,11 +3120,11 @@ class ButtonComponent {
|
|
|
3116
3120
|
}
|
|
3117
3121
|
});
|
|
3118
3122
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3119
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconBefore: { classPropertyName: "iconBefore", publicName: "iconBefore", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n [type]=\"type()\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"loading() || skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n <!-- Icon before -->\n @if (iconBefore() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n }\n\n <!-- Text -->\n @if (text() && !loading() && !skeletonActive()) {\n <span class=\"c-button__text\">{{ text() }}</span>\n } @if (loading() && !skeletonActive()) {\n <span class=\"c-button__loading-container\">\n <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n @if (loadingText()) {\n <span class=\"c-button__text\">{{ loadingText() }}</span>\n }\n </span>\n }\n\n <!-- Icon after -->\n @if (iconAfter() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconAfter\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [":host{display:inline-block}.c-button{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--space-component-gap-md);cursor:pointer;height:48px;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);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress;height:48px;width:120px}.c-button--skeleton-active.c-button--md{height:40px;width:100px}.c-button--skeleton-active.c-button--sm{height:32px;width:80px}.c-button--skeleton-active.c-button--xs{height:28px;width:60px}.c-button--skeleton-active.c-button--full-width{width:100%}.c-button--loading{cursor:progress;justify-content:center}.c-button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button:disabled{cursor:not-allowed}.c-button__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.c-button__loading{width:24px;height:24px}.c-button__loading-container{display:inline-flex;align-items:center;gap:var(--space-component-gap-md);justify-content:center}.c-button--md{height:40px;color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{height:32px;color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{height:28px;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);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--primary:not(.c-button--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default);color:var(--color-button-primary-content-default)}.c-button--primary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover);color:var(--color-button-primary-content-hover)}.c-button--primary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed);color:var(--color-button-primary-content-pressed)}.c-button--primary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button--secondary:not(.c-button--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover);color:var(--color-button-secondary-content-hover)}.c-button--secondary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed);color:var(--color-button-secondary-content-pressed)}.c-button--secondary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary:not(.c-button--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default);color:var(--color-button-tertiary-content-default)}.c-button--tertiary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover);color:var(--color-button-tertiary-content-hover)}.c-button--tertiary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed);color:var(--color-button-tertiary-content-pressed)}.c-button--tertiary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);color:var(--color-button-tertiary-content-disabled)}.c-button--neutral:not(.c-button--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default);color:var(--color-button-neutral-content-default)}.c-button--neutral:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-button--neutral:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-button-neutral-content-pressed)}.c-button--neutral:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);color:var(--color-button-neutral-content-disabled)}.c-button--danger:not(.c-button--skeleton-active){background-color:var(--color-button-danger-background-default);border-color:var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-hover);border-color:var(--color-button-danger-border-hover);color:var(--color-button-danger-content-hover)}.c-button--danger:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-pressed);border-color:var(--color-button-danger-border-pressed);color:var(--color-button-danger-content-pressed)}.c-button--danger:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-danger-background-disabled);border-color:var(--color-button-danger-border-disabled);color:var(--color-button-danger-content-disabled)}.c-button--inverse:not(.c-button--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-hover)}.c-button--inverse:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed);color:var(--color-button-inverse-content-pressed)}.c-button--inverse:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);color:var(--color-button-inverse-content-disabled)}.c-button--full-width{width:100%;justify-content:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
3123
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, iconBefore: { classPropertyName: "iconBefore", publicName: "iconBefore", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n [type]=\"type()\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"loading() || skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n <!-- Icon before -->\n @if (iconBefore() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n }\n\n <!-- Text -->\n @if (text() && !loading() && !skeletonActive()) {\n <span class=\"c-button__text\">{{ text() }}</span>\n } @if (loading() && !skeletonActive()) {\n <span class=\"c-button__loading-container\">\n <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n @if (loadingText()) {\n <span class=\"c-button__text\">{{ loadingText() }}</span>\n }\n </span>\n }\n\n <!-- Icon after -->\n @if (iconAfter() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconAfter\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [":host{display:inline-block}.c-button{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--space-component-gap-md);cursor:pointer;height:48px;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);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress;height:48px;width:120px}.c-button--skeleton-active.c-button--md{height:40px;width:100px}.c-button--skeleton-active.c-button--sm{height:32px;width:80px}.c-button--skeleton-active.c-button--xs{height:28px;width:60px}.c-button--skeleton-active.c-button--full-width{width:100%}.c-button--loading{cursor:progress;justify-content:center}.c-button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button:disabled{cursor:not-allowed}.c-button__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.c-button__loading{width:24px;height:24px}.c-button__loading-container{display:inline-flex;align-items:center;gap:var(--space-component-gap-md);justify-content:center}.c-button--md{height:40px;color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{height:32px;color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{height:28px;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);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--primary:not(.c-button--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default);color:var(--color-button-primary-content-default)}.c-button--primary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover);color:var(--color-button-primary-content-hover)}.c-button--primary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed);color:var(--color-button-primary-content-pressed)}.c-button--primary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button--secondary:not(.c-button--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover);color:var(--color-button-secondary-content-hover)}.c-button--secondary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed);color:var(--color-button-secondary-content-pressed)}.c-button--secondary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary:not(.c-button--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default);color:var(--color-button-tertiary-content-default)}.c-button--tertiary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover);color:var(--color-button-tertiary-content-hover)}.c-button--tertiary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed);color:var(--color-button-tertiary-content-pressed)}.c-button--tertiary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);color:var(--color-button-tertiary-content-disabled)}.c-button--neutral:not(.c-button--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default);color:var(--color-button-neutral-content-default)}.c-button--neutral:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-button--neutral:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-button-neutral-content-pressed)}.c-button--neutral:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);color:var(--color-button-neutral-content-disabled)}.c-button--danger:not(.c-button--skeleton-active){background-color:var(--color-button-danger-background-default);border-color:var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-hover);border-color:var(--color-button-danger-border-hover);color:var(--color-button-danger-content-hover)}.c-button--danger:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-pressed);border-color:var(--color-button-danger-border-pressed);color:var(--color-button-danger-content-pressed)}.c-button--danger:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-danger-background-disabled);border-color:var(--color-button-danger-border-disabled);color:var(--color-button-danger-content-disabled)}.c-button--inverse:not(.c-button--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-hover)}.c-button--inverse:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed);color:var(--color-button-inverse-content-pressed)}.c-button--inverse:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);color:var(--color-button-inverse-content-disabled)}.c-button--full-width{width:100%;justify-content:center}.c-button--rounded{border-radius:var(--size-border-radius-full)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
3120
3124
|
}
|
|
3121
3125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
3122
3126
|
type: Component,
|
|
3123
|
-
args: [{ selector: 'lib-button', imports: [NgClass, IconComponent, SpinnerComponent], template: "<button\n [type]=\"type()\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"loading() || skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n <!-- Icon before -->\n @if (iconBefore() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n }\n\n <!-- Text -->\n @if (text() && !loading() && !skeletonActive()) {\n <span class=\"c-button__text\">{{ text() }}</span>\n } @if (loading() && !skeletonActive()) {\n <span class=\"c-button__loading-container\">\n <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n @if (loadingText()) {\n <span class=\"c-button__text\">{{ loadingText() }}</span>\n }\n </span>\n }\n\n <!-- Icon after -->\n @if (iconAfter() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconAfter\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [":host{display:inline-block}.c-button{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--space-component-gap-md);cursor:pointer;height:48px;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);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress;height:48px;width:120px}.c-button--skeleton-active.c-button--md{height:40px;width:100px}.c-button--skeleton-active.c-button--sm{height:32px;width:80px}.c-button--skeleton-active.c-button--xs{height:28px;width:60px}.c-button--skeleton-active.c-button--full-width{width:100%}.c-button--loading{cursor:progress;justify-content:center}.c-button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button:disabled{cursor:not-allowed}.c-button__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.c-button__loading{width:24px;height:24px}.c-button__loading-container{display:inline-flex;align-items:center;gap:var(--space-component-gap-md);justify-content:center}.c-button--md{height:40px;color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{height:32px;color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{height:28px;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);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--primary:not(.c-button--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default);color:var(--color-button-primary-content-default)}.c-button--primary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover);color:var(--color-button-primary-content-hover)}.c-button--primary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed);color:var(--color-button-primary-content-pressed)}.c-button--primary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button--secondary:not(.c-button--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover);color:var(--color-button-secondary-content-hover)}.c-button--secondary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed);color:var(--color-button-secondary-content-pressed)}.c-button--secondary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary:not(.c-button--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default);color:var(--color-button-tertiary-content-default)}.c-button--tertiary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover);color:var(--color-button-tertiary-content-hover)}.c-button--tertiary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed);color:var(--color-button-tertiary-content-pressed)}.c-button--tertiary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);color:var(--color-button-tertiary-content-disabled)}.c-button--neutral:not(.c-button--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default);color:var(--color-button-neutral-content-default)}.c-button--neutral:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-button--neutral:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-button-neutral-content-pressed)}.c-button--neutral:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);color:var(--color-button-neutral-content-disabled)}.c-button--danger:not(.c-button--skeleton-active){background-color:var(--color-button-danger-background-default);border-color:var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-hover);border-color:var(--color-button-danger-border-hover);color:var(--color-button-danger-content-hover)}.c-button--danger:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-pressed);border-color:var(--color-button-danger-border-pressed);color:var(--color-button-danger-content-pressed)}.c-button--danger:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-danger-background-disabled);border-color:var(--color-button-danger-border-disabled);color:var(--color-button-danger-content-disabled)}.c-button--inverse:not(.c-button--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-hover)}.c-button--inverse:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed);color:var(--color-button-inverse-content-pressed)}.c-button--inverse:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);color:var(--color-button-inverse-content-disabled)}.c-button--full-width{width:100%;justify-content:center}\n"] }]
|
|
3127
|
+
args: [{ selector: 'lib-button', imports: [NgClass, IconComponent, SpinnerComponent], template: "<button\n [type]=\"type()\"\n [ngClass]=\"classes()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"computedAriaLabel()\"\n [attr.aria-busy]=\"loading() || skeletonActive() ? 'true' : null\"\n (click)=\"handleClick()\"\n>\n <!-- Icon before -->\n @if (iconBefore() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconBefore()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconBefore\n ></lib-icon>\n </span>\n }\n\n <!-- Text -->\n @if (text() && !loading() && !skeletonActive()) {\n <span class=\"c-button__text\">{{ text() }}</span>\n } @if (loading() && !skeletonActive()) {\n <span class=\"c-button__loading-container\">\n <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n @if (loadingText()) {\n <span class=\"c-button__text\">{{ loadingText() }}</span>\n }\n </span>\n }\n\n <!-- Icon after -->\n @if (iconAfter() && !loading() && !skeletonActive()) {\n <span class=\"c-button__icon\">\n <lib-icon\n [name]=\"iconAfter()!\"\n [size]=\"iconSize()\"\n [color]=\"iconColor()\"\n iconAfter\n ></lib-icon>\n </span>\n }\n</button>\n", styles: [":host{display:inline-block}.c-button{display:inline-flex;align-items:center;box-sizing:border-box;gap:var(--space-component-gap-md);cursor:pointer;height:48px;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);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);border:var(--size-button-border-width) solid var(--color-button-primary-border-default)}.c-button--skeleton-active{background-color:var(--color-effect-skeleton-soft);border-color:var(--color-button-primary-border-disabled);cursor:progress;height:48px;width:120px}.c-button--skeleton-active.c-button--md{height:40px;width:100px}.c-button--skeleton-active.c-button--sm{height:32px;width:80px}.c-button--skeleton-active.c-button--xs{height:28px;width:60px}.c-button--skeleton-active.c-button--full-width{width:100%}.c-button--loading{cursor:progress;justify-content:center}.c-button:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-button:disabled{cursor:not-allowed}.c-button__icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.c-button__loading{width:24px;height:24px}.c-button__loading-container{display:inline-flex;align-items:center;gap:var(--space-component-gap-md);justify-content:center}.c-button--md{height:40px;color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{height:32px;color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{height:28px;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);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--primary:not(.c-button--skeleton-active){background-color:var(--color-button-primary-background-default);border-color:var(--color-button-primary-border-default);color:var(--color-button-primary-content-default)}.c-button--primary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-hover);border-color:var(--color-button-primary-border-hover);color:var(--color-button-primary-content-hover)}.c-button--primary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-primary-background-pressed);border-color:var(--color-button-primary-border-pressed);color:var(--color-button-primary-content-pressed)}.c-button--primary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-primary-background-disabled);border-color:var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button--secondary:not(.c-button--skeleton-active){background-color:var(--color-button-secondary-background-default);border-color:var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-hover);border-color:var(--color-button-secondary-border-hover);color:var(--color-button-secondary-content-hover)}.c-button--secondary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-secondary-background-pressed);border-color:var(--color-button-secondary-border-pressed);color:var(--color-button-secondary-content-pressed)}.c-button--secondary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-secondary-background-disabled);border-color:var(--color-button-secondary-border-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary:not(.c-button--skeleton-active){background-color:var(--color-button-tertiary-background-default);border-color:var(--color-button-tertiary-border-default);color:var(--color-button-tertiary-content-default)}.c-button--tertiary:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-hover);border-color:var(--color-button-tertiary-border-hover);color:var(--color-button-tertiary-content-hover)}.c-button--tertiary:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-tertiary-background-pressed);border-color:var(--color-button-tertiary-border-pressed);color:var(--color-button-tertiary-content-pressed)}.c-button--tertiary:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-tertiary-background-disabled);border-color:var(--color-button-tertiary-border-disabled);color:var(--color-button-tertiary-content-disabled)}.c-button--neutral:not(.c-button--skeleton-active){background-color:var(--color-button-neutral-background-default);border-color:var(--color-button-neutral-border-default);color:var(--color-button-neutral-content-default)}.c-button--neutral:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-hover);border-color:var(--color-button-neutral-border-hover);color:var(--color-button-neutral-content-hover)}.c-button--neutral:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-neutral-background-pressed);border-color:var(--color-button-neutral-border-pressed);color:var(--color-button-neutral-content-pressed)}.c-button--neutral:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-neutral-background-disabled);border-color:var(--color-button-neutral-border-disabled);color:var(--color-button-neutral-content-disabled)}.c-button--danger:not(.c-button--skeleton-active){background-color:var(--color-button-danger-background-default);border-color:var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-hover);border-color:var(--color-button-danger-border-hover);color:var(--color-button-danger-content-hover)}.c-button--danger:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-danger-background-pressed);border-color:var(--color-button-danger-border-pressed);color:var(--color-button-danger-content-pressed)}.c-button--danger:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-danger-background-disabled);border-color:var(--color-button-danger-border-disabled);color:var(--color-button-danger-content-disabled)}.c-button--inverse:not(.c-button--skeleton-active){background-color:var(--color-button-inverse-background-default);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:not(.c-button--skeleton-active):hover:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-hover);border-color:var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-hover)}.c-button--inverse:not(.c-button--skeleton-active):active:not(.c-button--loading):not(.c-button--disabled){background-color:var(--color-button-inverse-background-pressed);border-color:var(--color-button-inverse-border-pressed);color:var(--color-button-inverse-content-pressed)}.c-button--inverse:not(.c-button--skeleton-active):disabled{background-color:var(--color-button-inverse-background-disabled);border-color:var(--color-button-inverse-border-disabled);color:var(--color-button-inverse-content-disabled)}.c-button--full-width{width:100%;justify-content:center}.c-button--rounded{border-radius:var(--size-border-radius-full)}\n"] }]
|
|
3124
3128
|
}] });
|
|
3125
3129
|
|
|
3126
3130
|
class ButtonSetComponent {
|
|
@@ -3144,7 +3148,7 @@ class ButtonSetComponent {
|
|
|
3144
3148
|
this.tertiaryClick.emit();
|
|
3145
3149
|
}
|
|
3146
3150
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3147
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ButtonSetComponent, isStandalone: true, selector: "lib-button-set", inputs: { primaryText: { classPropertyName: "primaryText", publicName: "primaryText", isSignal: true, isRequired: true, transformFunction: null }, secondaryText: { classPropertyName: "secondaryText", publicName: "secondaryText", isSignal: true, isRequired: true, transformFunction: null }, tertiaryText: { classPropertyName: "tertiaryText", publicName: "tertiaryText", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick", tertiaryClick: "tertiaryClick" }, ngImport: i0, template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-button\n [text]=\"tertiaryText()\"\n variant=\"tertiary\"\n size=\"lg\"\n [fullWidth]=\"align() === 'stacked'\"\n (click)=\"handleTertiaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"secondaryText()\"\n variant=\"secondary\"\n size=\"lg\"\n [fullWidth]=\"align() === 'stacked'\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"primaryText()\"\n variant=\"primary\"\n size=\"lg\"\n [fullWidth]=\"true\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n", styles: [".c-button-set{display:flex;align-items:center;gap:var(--space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{align-items:unset;flex-direction:column-reverse;width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3151
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: ButtonSetComponent, isStandalone: true, selector: "lib-button-set", inputs: { primaryText: { classPropertyName: "primaryText", publicName: "primaryText", isSignal: true, isRequired: true, transformFunction: null }, secondaryText: { classPropertyName: "secondaryText", publicName: "secondaryText", isSignal: true, isRequired: true, transformFunction: null }, tertiaryText: { classPropertyName: "tertiaryText", publicName: "tertiaryText", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick", tertiaryClick: "tertiaryClick" }, ngImport: i0, template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-button\n [text]=\"tertiaryText()\"\n variant=\"tertiary\"\n size=\"lg\"\n [fullWidth]=\"align() === 'stacked'\"\n (click)=\"handleTertiaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"secondaryText()\"\n variant=\"secondary\"\n size=\"lg\"\n [fullWidth]=\"align() === 'stacked'\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n\n <lib-button\n [text]=\"primaryText()\"\n variant=\"primary\"\n size=\"lg\"\n [fullWidth]=\"true\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n", styles: [".c-button-set{display:flex;align-items:center;gap:var(--space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{align-items:unset;flex-direction:column-reverse;width:100%}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "rounded", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3148
3152
|
}
|
|
3149
3153
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, decorators: [{
|
|
3150
3154
|
type: Component,
|
|
@@ -4032,7 +4036,7 @@ class InputSearchComponent {
|
|
|
4032
4036
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
4033
4037
|
multi: true,
|
|
4034
4038
|
},
|
|
4035
|
-
], ngImport: i0, template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"search\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\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\n name=\"magnifyingglass-regular\"\n size=\"md\"\n [color]=\"\n disabled || isLoading\n ? 'textfield-content-disabled'\n : 'textfield-content-placeholder'\n \"\n ></lib-icon>\n </span>\n\n <lib-button-icon\n *ngIf=\"clearButton && _value && !isLoading\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"xcircle-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || isLoading\"\n (clicked)=\"clearInput()\"\n ariaLabel=\"Limpiar\"\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\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: 2rem;width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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::-webkit-search-decoration,.c-text-input__input::-webkit-search-cancel-button,.c-text-input__input::-webkit-search-results-button,.c-text-input__input::-webkit-search-results-decoration{appearance:none;-webkit-appearance:none}.c-text-input__input::-ms-clear,.c-text-input__input::-ms-reveal{display:none;width:0;height:0}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 2rem}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 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-strong)}.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-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input--with-clear-button .c-text-input__input{padding-right:2.5rem}.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;padding:0;display:flex;align-items:center}.c-text-input__icon--right{left:auto;right:var(--space-component-padding-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
4039
|
+
], ngImport: i0, template: "<div\n class=\"c-text-input\"\n [class.c-text-input--full-width]=\"fullWidth\"\n [class.c-text-input--with-clear-button]=\"clearButton\"\n>\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"search\"\n enterkeyhint=\"search\"\n inputmode=\"search\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\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\n name=\"magnifyingglass-regular\"\n size=\"md\"\n [color]=\"\n disabled || isLoading\n ? 'textfield-content-disabled'\n : 'textfield-content-placeholder'\n \"\n ></lib-icon>\n </span>\n\n <lib-button-icon\n *ngIf=\"clearButton && _value && !isLoading\"\n variant=\"neutral\"\n size=\"sm\"\n iconName=\"xcircle-regular\"\n class=\"c-text-input__icon c-text-input__icon--right\"\n [disabled]=\"disabled || isLoading\"\n (clicked)=\"clearInput()\"\n ariaLabel=\"Limpiar\"\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\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: 2rem;width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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::-webkit-search-decoration,.c-text-input__input::-webkit-search-cancel-button,.c-text-input__input::-webkit-search-results-button,.c-text-input__input::-webkit-search-results-decoration{appearance:none;-webkit-appearance:none}.c-text-input__input::-ms-clear,.c-text-input__input::-ms-reveal{display:none;width:0;height:0}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 2rem}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 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-strong)}.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-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input--with-clear-button .c-text-input__input{padding-right:2.5rem}.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;padding:0;display:flex;align-items:center}.c-text-input__icon--right{left:auto;right:var(--space-component-padding-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }] });
|
|
4036
4040
|
}
|
|
4037
4041
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
4038
4042
|
type: Component,
|
|
@@ -4612,7 +4616,7 @@ class InputChatComponent {
|
|
|
4612
4616
|
el.focus();
|
|
4613
4617
|
}
|
|
4614
4618
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputChatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4615
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: InputChatComponent, isStandalone: true, selector: "lib-input-chat", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, loaderType: { classPropertyName: "loaderType", publicName: "loaderType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, helperVariant: { classPropertyName: "helperVariant", publicName: "helperVariant", isSignal: true, isRequired: false, transformFunction: null }, showHelperText: { classPropertyName: "showHelperText", publicName: "showHelperText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", sendClicked: "sendClicked", stopClicked: "stopClicked" }, viewQueries: [{ propertyName: "_textareaRef", first: true, predicate: ["textareaRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-input-chat\">\n <div [class]=\"fieldClasses()\">\n <textarea\n #textareaRef\n rows=\"1\"\n class=\"c-input-chat__textarea\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnterKey($event)\"\n ></textarea>\n <div class=\"c-input-chat__action\">\n <lib-button-icon\n [iconName]=\"actionIcon()\"\n [variant]=\"actionVariant()\"\n [disabled]=\"actionDisabled()\"\n [loading]=\"isProgress()\"\n size=\"lg\"\n (clicked)=\"onActionClick()\"\n />\n </div>\n </div>\n @if (showHelperText() && helperText()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [variant]=\"helperVariant()\"\n [disabled]=\"isDisabled()\"\n />\n }\n</div>\n", styles: [":host{display:block}.c-input-chat{display:flex;flex-direction:column;gap:var(--space-component-gap-sm);width:100%}.c-input-chat__field{display:flex;align-items:flex-end;gap:var(--space-component-gap-md);padding:var(--space-component-padding-md) var(--space-component-padding-lg);border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);box-sizing:border-box;transition:border-color .15s ease,background-color .15s ease}.c-input-chat__field:hover:not(.c-input-chat__field--disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-input-chat__field:focus-within:not(.c-input-chat__field--disabled){border-width:2px;border-color:var(--color-textfield-border-active);background-color:var(--color-textfield-background-hover);padding:calc(var(--space-component-padding-md) - 1px) calc(var(--space-component-padding-lg) - 1px)}.c-input-chat__field--disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);cursor:not-allowed}.c-input-chat__textarea{flex:1;min-height:48px;max-height:180px;padding:0;resize:none;border:none;outline:none;background:transparent;box-sizing:border-box;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);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);overflow-y:hidden}.c-input-chat__textarea.is-scrollable{overflow-y:auto}.c-input-chat__textarea::placeholder{color:var(--color-textfield-content-placeholder)}.c-input-chat__textarea:disabled{color:var(--color-textfield-content-disabled);cursor:not-allowed}.c-input-chat__action{display:flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
4619
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: InputChatComponent, isStandalone: true, selector: "lib-input-chat", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, loaderType: { classPropertyName: "loaderType", publicName: "loaderType", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, helperVariant: { classPropertyName: "helperVariant", publicName: "helperVariant", isSignal: true, isRequired: false, transformFunction: null }, showHelperText: { classPropertyName: "showHelperText", publicName: "showHelperText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", sendClicked: "sendClicked", stopClicked: "stopClicked" }, viewQueries: [{ propertyName: "_textareaRef", first: true, predicate: ["textareaRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-input-chat\">\n <div [class]=\"fieldClasses()\">\n <textarea\n #textareaRef\n rows=\"1\"\n class=\"c-input-chat__textarea\"\n [placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"onEnterKey($event)\"\n ></textarea>\n <div class=\"c-input-chat__action\">\n <lib-button-icon\n [iconName]=\"actionIcon()\"\n [variant]=\"actionVariant()\"\n [disabled]=\"actionDisabled()\"\n [loading]=\"isProgress()\"\n size=\"lg\"\n (clicked)=\"onActionClick()\"\n />\n </div>\n </div>\n @if (showHelperText() && helperText()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [variant]=\"helperVariant()\"\n [disabled]=\"isDisabled()\"\n />\n }\n</div>\n", styles: [":host{display:block}.c-input-chat{display:flex;flex-direction:column;gap:var(--space-component-gap-sm);width:100%}.c-input-chat__field{display:flex;align-items:flex-end;gap:var(--space-component-gap-md);padding:var(--space-component-padding-md) var(--space-component-padding-lg);border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);box-sizing:border-box;transition:border-color .15s ease,background-color .15s ease}.c-input-chat__field:hover:not(.c-input-chat__field--disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-input-chat__field:focus-within:not(.c-input-chat__field--disabled){border-width:2px;border-color:var(--color-textfield-border-active);background-color:var(--color-textfield-background-hover);padding:calc(var(--space-component-padding-md) - 1px) calc(var(--space-component-padding-lg) - 1px)}.c-input-chat__field--disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);cursor:not-allowed}.c-input-chat__textarea{flex:1;min-height:48px;max-height:180px;padding:0;resize:none;border:none;outline:none;background:transparent;box-sizing:border-box;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);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);overflow-y:hidden}.c-input-chat__textarea.is-scrollable{overflow-y:auto}.c-input-chat__textarea::placeholder{color:var(--color-textfield-content-placeholder)}.c-input-chat__textarea:disabled{color:var(--color-textfield-content-disabled);cursor:not-allowed}.c-input-chat__action{display:flex;align-items:center;flex-shrink:0}\n"], dependencies: [{ kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
4616
4620
|
}
|
|
4617
4621
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputChatComponent, decorators: [{
|
|
4618
4622
|
type: Component,
|
|
@@ -4709,7 +4713,7 @@ class InputDateComponent {
|
|
|
4709
4713
|
useExisting: forwardRef(() => InputDateComponent),
|
|
4710
4714
|
multi: true,
|
|
4711
4715
|
},
|
|
4712
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"toggleCalendar()\"\n (keyup.enter)=\"toggleCalendar()\"\n >\n <input\n #dateInput\n type=\"date\"\n [value]=\"isLoading ? '' : _inputValue\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\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 || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"calendarblank-regular\"\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\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var( --size-button-min-height-lg );--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:var(--size-button-min-height-lg);box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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-overflow:ellipsis;overflow:hidden;white-space:nowrap}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:var(--size-button-min-height-sm);--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var( --size-button-min-height-sm );--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:var(--size-button-min-height-md);--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var( --size-button-min-height-md );--input-padding-x-left: 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-strong)}.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-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__input.is-custom-picker{pointer-events:none}.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 input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.c-text-input__wrapper input[type=date]::-webkit-inner-spin-button,.c-text-input__wrapper input[type=date]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
4716
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n role=\"button\"\n tabindex=\"0\"\n (click)=\"toggleCalendar()\"\n (keyup.enter)=\"toggleCalendar()\"\n >\n <input\n #dateInput\n type=\"date\"\n [value]=\"isLoading ? '' : _inputValue\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\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 || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"calendarblank-regular\"\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\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var( --size-button-min-height-lg );--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:var(--size-button-min-height-lg);box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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-overflow:ellipsis;overflow:hidden;white-space:nowrap}.c-text-input__input:focus-visible{border-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:var(--size-button-min-height-sm);--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var( --size-button-min-height-sm );--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:var(--size-button-min-height-md);--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var( --size-button-min-height-md );--input-padding-x-left: 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-strong)}.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-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.c-text-input__input.is-custom-picker{pointer-events:none}.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 input[type=date]::-webkit-calendar-picker-indicator{display:none;-webkit-appearance:none}.c-text-input__wrapper input[type=date]::-webkit-inner-spin-button,.c-text-input__wrapper input[type=date]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
4713
4717
|
}
|
|
4714
4718
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
4715
4719
|
type: Component,
|
|
@@ -4878,7 +4882,7 @@ class InputCounterComponent {
|
|
|
4878
4882
|
useExisting: forwardRef(() => InputCounterComponent),
|
|
4879
4883
|
multi: true,
|
|
4880
4884
|
},
|
|
4881
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\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]=\"isLoading ? '' : value()\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\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 || readonly || isAtMinimum() || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n [iconName]=\"decrementIconName()\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled || readonly || isAtMaximum() || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__up\"\n iconName=\"plus-regular\"\n (click)=\"upNumber()\"\n >\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\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x: 2rem;width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 2rem}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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__input{text-align:left}.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
4885
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\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]=\"isLoading ? '' : value()\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\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 || readonly || isAtMinimum() || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n [iconName]=\"decrementIconName()\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled || readonly || isAtMaximum() || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__up\"\n iconName=\"plus-regular\"\n (click)=\"upNumber()\"\n >\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\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text\n variant=\"danger\"\n [text]=\"alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x: 2rem;width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 2rem}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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__input{text-align:left}.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
4882
4886
|
}
|
|
4883
4887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputCounterComponent, decorators: [{
|
|
4884
4888
|
type: Component,
|
|
@@ -5500,7 +5504,7 @@ class InputUploadComponent {
|
|
|
5500
5504
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
5501
5505
|
multi: true,
|
|
5502
5506
|
},
|
|
5503
|
-
], 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 size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"uniqueId\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled || isLoading\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n [for]=\"uniqueId\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n class=\"c-text-input__upload-label\"\n >\n <span class=\"c-text-input__upload-label-text\">{{\n isLoading ? '' : fileName || placeholder\n }}</span>\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !sizeError && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span\n *ngIf=\"(alertText && error) || (sizeError && maxSizeErrorText)\"\n class=\"c-text-input__alert\"\n >\n <lib-helper-text\n variant=\"danger\"\n [text]=\"sizeError ? maxSizeErrorText : alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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__upload-label{display:flex;align-items:center;overflow:hidden;padding-right:calc(var(--space-component-padding-sm) + 32px);cursor:pointer}.c-text-input__upload-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.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;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
5507
|
+
], 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 size=\"sm\"\n [required]=\"required\"\n [text]=\"label\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n [id]=\"uniqueId\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled || isLoading\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n [for]=\"uniqueId\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n class=\"c-text-input__upload-label\"\n >\n <span class=\"c-text-input__upload-label-text\">{{\n isLoading ? '' : fileName || placeholder\n }}</span>\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n iconName=\"uploadsimple-regular\"\n (click)=\"fileInput.click()\"\n >\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !sizeError && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text\n [text]=\"helperText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span\n *ngIf=\"(alertText && error) || (sizeError && maxSizeErrorText)\"\n class=\"c-text-input__alert\"\n >\n <lib-helper-text\n variant=\"danger\"\n [text]=\"sizeError ? maxSizeErrorText : alertText\"\n [isLoading]=\"isLoading\"\n ></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text\n variant=\"success\"\n [text]=\"successText\"\n [isLoading]=\"isLoading\"\n ></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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__upload-label{display:flex;align-items:center;overflow:hidden;padding-right:calc(var(--space-component-padding-sm) + 32px);cursor:pointer}.c-text-input__upload-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.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;z-index:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
5504
5508
|
}
|
|
5505
5509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputUploadComponent, decorators: [{
|
|
5506
5510
|
type: Component,
|
|
@@ -5699,7 +5703,7 @@ class TagComponent {
|
|
|
5699
5703
|
this.closeEvent.emit();
|
|
5700
5704
|
}
|
|
5701
5705
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5702
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TagComponent, isStandalone: true, selector: "lib-tag", inputs: { iconBefore: { classPropertyName: "iconBefore", publicName: "iconBefore", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, closeActive: { classPropertyName: "closeActive", publicName: "closeActive", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n } @if (iconBefore()) {\n <lib-icon [name]=\"iconBefore()\" [size]=\"'sm'\"></lib-icon>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);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-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }] });
|
|
5706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TagComponent, isStandalone: true, selector: "lib-tag", inputs: { iconBefore: { classPropertyName: "iconBefore", publicName: "iconBefore", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, closeActive: { classPropertyName: "closeActive", publicName: "closeActive", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n } @if (iconBefore()) {\n <lib-icon [name]=\"iconBefore()\" [size]=\"'sm'\"></lib-icon>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);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-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }] });
|
|
5703
5707
|
}
|
|
5704
5708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, decorators: [{
|
|
5705
5709
|
type: Component,
|
|
@@ -6011,7 +6015,7 @@ class ModalComponent {
|
|
|
6011
6015
|
return c.filter(Boolean).join(' ');
|
|
6012
6016
|
}
|
|
6013
6017
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6014
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }, { propertyName: "bodyContentRef", first: true, predicate: ["bodyContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() && !hasHeaderSlot() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (shouldRenderHeader()) {\n <div [ngClass]=\"getHeaderClasses()\">\n <div class=\"c-modal__content__header__left\">\n @if (hasHeaderSlot()) {\n <div class=\"c-modal__content__header__slot\"></div>\n } @else if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n <!-- Body Content (scrollable area) -->\n <div #bodyContent [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:flex-start;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.c-modal__content__header__left{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__right{flex:0 0 auto;display:flex;justify-content:flex-end}.c-modal__content__header__slot{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);overflow:hidden;min-height:0}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width: 767px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 767px){.c-modal__content__footer__button{width:100%}.c-modal__content__footer__button.primary{order:1}.c-modal__content__footer__button.secondary{order:2}}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 767px){.c-modal{align-items:flex-end}.c-modal--xs .c-modal__content,.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--xs.c-modal--open .c-modal__content,.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0);perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-height:100vh;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
6018
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }, { propertyName: "bodyContentRef", first: true, predicate: ["bodyContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() && !hasHeaderSlot() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (shouldRenderHeader()) {\n <div [ngClass]=\"getHeaderClasses()\">\n <div class=\"c-modal__content__header__left\">\n @if (hasHeaderSlot()) {\n <div class=\"c-modal__content__header__slot\"></div>\n } @else if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n <!-- Body Content (scrollable area) -->\n <div #bodyContent [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--xs{max-width:360px}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content--safe-area-inset-bottom{padding-bottom:calc(env(safe-area-inset-bottom,0) + var(--space-container-padding-sm))}.c-modal__content__header{display:flex;align-items:flex-start;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.c-modal__content__header__left{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__right{flex:0 0 auto;display:flex;justify-content:flex-end}.c-modal__content__header__slot{flex:1;min-width:0;display:flex;align-items:center}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);overflow:hidden;min-height:0}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width: 767px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 767px){.c-modal__content__footer__button{width:100%}.c-modal__content__footer__button.primary{order:1}.c-modal__content__footer__button.secondary{order:2}}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 767px){.c-modal{align-items:flex-end}.c-modal--xs .c-modal__content,.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--xs.c-modal--open .c-modal__content,.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0);perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-height:100vh;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "rounded", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }] });
|
|
6015
6019
|
}
|
|
6016
6020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
6017
6021
|
type: Component,
|
|
@@ -6523,7 +6527,7 @@ class PasswordInputComponent {
|
|
|
6523
6527
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
6524
6528
|
multi: true,
|
|
6525
6529
|
},
|
|
6526
|
-
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [text]=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [attr.aria-label]=\"label || 'Password input'\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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\" [isLoading]=\"isLoading\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\" [isLoading]=\"isLoading\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\" [isLoading]=\"isLoading\"></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
6530
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n size=\"sm\"\n [text]=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [textOptional]=\"optionalLabel\"\n [isLoading]=\"isLoading\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"isLoading ? '' : _value\"\n [placeholder]=\"isLoading ? '' : placeholder\"\n [disabled]=\"disabled || isLoading\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [attr.aria-label]=\"label || 'Password input'\"\n [attr.aria-labelledby]=\"name\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled || isLoading\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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\" [isLoading]=\"isLoading\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\" [isLoading]=\"isLoading\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\" [isLoading]=\"isLoading\"></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{--input-padding-y: var(--space-component-padding-md);--input-padding-x-right: var(--space-component-padding-sm);--input-padding-x-left: var(--space-component-padding-lg);width:100%;height:48px;box-sizing:border-box;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(--input-padding-y) var(--input-padding-x-right) var(--input-padding-y) var(--input-padding-x-left);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-width:2px;border-color:var(--color-textfield-border-active);padding:calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-right) - 1px) calc(var(--input-padding-y) - 1px) calc(var(--input-padding-x-left) - 1px);box-shadow:none;outline:none}.c-text-input__input--sm{height:32px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: var(--space-component-padding-sm)}.c-text-input__input--md{height:40px;--input-padding-y: var(--space-component-padding-xs);--input-padding-x-right: var(--space-component-padding-xs);--input-padding-x-left: 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-strong)}.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__input.is-loading{border-color:var(--color-effect-skeleton-soft, #e5eaea);background-color:var(--color-textfield-background-default);color:transparent}.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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML", "isLoading", "textOptional"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled", "isLoading"] }] });
|
|
6527
6531
|
}
|
|
6528
6532
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
6529
6533
|
type: Component,
|
|
@@ -7152,7 +7156,7 @@ class SidebarProgrammaticComponent {
|
|
|
7152
7156
|
}
|
|
7153
7157
|
}
|
|
7154
7158
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarProgrammaticComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7155
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SidebarProgrammaticComponent, isStandalone: true, selector: "lib-sidebar-programmatic", ngImport: i0, template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n <!-- Backdrop -->\n <div\n class=\"c-sidebar__backdrop\"\n [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close sidebar\"\n ></div>\n\n <!-- Sidebar Content -->\n <aside\n class=\"c-sidebar__content\"\n [ngClass]=\"'c-sidebar__content--' + state()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n >\n <!-- Header -->\n <header class=\"c-sidebar__header\">\n <div class=\"c-sidebar__header-content\">\n <div class=\"c-sidebar__header-default\">\n @if (state() === 'default') {\n @if (hasSlotHeader()) {\n <ng-content select=\"[slot=header]\"></ng-content>\n } @else if (title()) {\n <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n }\n }\n </div>\n \n @if (state() === 'navigation') {\n <div class=\"c-sidebar__header-navigation\">\n <lib-button-icon \n iconName=\"caretleft-regular\" \n variant=\"neutral\" \n size=\"sm\"\n ariaLabel=\"Back\"\n (clicked)=\"onBackNavigation()\">\n </lib-button-icon>\n <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n </div>\n }\n </div>\n <lib-button-icon \n iconName=\"x-regular\" \n variant=\"neutral\" \n size=\"sm\"\n ariaLabel=\"Close\"\n (clicked)=\"onCloseButtonClick()\">\n </lib-button-icon>\n </header>\n \n <!-- Body Content -->\n <div class=\"c-sidebar__body\">\n <ng-content></ng-content>\n </div>\n \n <!-- Footer Content -->\n <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': state() === 'navigation'}\">\n <div class=\"c-sidebar__footer-content\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </footer>\n </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100dvh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100dvh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
7159
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SidebarProgrammaticComponent, isStandalone: true, selector: "lib-sidebar-programmatic", ngImport: i0, template: "<div class=\"c-sidebar\" [ngClass]=\"'c-sidebar--' + state() + (visible() ? ' c-sidebar--visible' : ' c-sidebar--hide')\">\n <!-- Backdrop -->\n <div\n class=\"c-sidebar__backdrop\"\n [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close sidebar\"\n ></div>\n\n <!-- Sidebar Content -->\n <aside\n class=\"c-sidebar__content\"\n [ngClass]=\"'c-sidebar__content--' + state()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n >\n <!-- Header -->\n <header class=\"c-sidebar__header\">\n <div class=\"c-sidebar__header-content\">\n <div class=\"c-sidebar__header-default\">\n @if (state() === 'default') {\n @if (hasSlotHeader()) {\n <ng-content select=\"[slot=header]\"></ng-content>\n } @else if (title()) {\n <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n }\n }\n </div>\n \n @if (state() === 'navigation') {\n <div class=\"c-sidebar__header-navigation\">\n <lib-button-icon \n iconName=\"caretleft-regular\" \n variant=\"neutral\" \n size=\"sm\"\n ariaLabel=\"Back\"\n (clicked)=\"onBackNavigation()\">\n </lib-button-icon>\n <div class=\"c-sidebar__header-title\">{{ title() }}</div>\n </div>\n }\n </div>\n <lib-button-icon \n iconName=\"x-regular\" \n variant=\"neutral\" \n size=\"sm\"\n ariaLabel=\"Close\"\n (clicked)=\"onCloseButtonClick()\">\n </lib-button-icon>\n </header>\n \n <!-- Body Content -->\n <div class=\"c-sidebar__body\">\n <ng-content></ng-content>\n </div>\n \n <!-- Footer Content -->\n <footer class=\"c-sidebar__footer\" [ngClass]=\"{'c-sidebar__footer--hidden': state() === 'navigation'}\">\n <div class=\"c-sidebar__footer-content\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </footer>\n </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100dvh;z-index:1000}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100dvh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__header{padding:var(--space-component-padding-lg) var(--space-container-padding-md);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-default);display:flex;align-items:center;justify-content:space-between;gap:var(--space-container-gap-sm)}.c-sidebar__header-content{height:2rem;display:flex;align-items:center;flex:1}.c-sidebar__header-title{flex:1;color:var(--color-core-content-default);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-default-size);font-style:normal;font-weight:var(--typography-label-lg-default-weight);line-height:var(--typography-label-lg-default-line-height);letter-spacing:var(--typography-label-lg-default-letter-spacing)}.c-sidebar__header-navigation{display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-sidebar__body{padding:var(--space-component-padding-sm);flex:1;overflow-y:auto}@media (min-width: 768px){.c-sidebar__body{padding:var(--space-component-padding-lg) var(--space-component-padding-md)}}.c-sidebar__footer{padding:var(--space-container-padding-sm);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);flex-shrink:0}.c-sidebar__footer--hidden{display:none}.c-sidebar__footer-content{display:flex;flex-direction:column;gap:var(--space-component-gap-xs)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }] });
|
|
7156
7160
|
}
|
|
7157
7161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarProgrammaticComponent, decorators: [{
|
|
7158
7162
|
type: Component,
|
|
@@ -8053,7 +8057,7 @@ class ToastComponent {
|
|
|
8053
8057
|
}
|
|
8054
8058
|
}
|
|
8055
8059
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8056
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ToastComponent, isStandalone: true, selector: "lib-toast", inputs: { variant: "variant", text: "text", title: "title", time: "time", extraClass: "extraClass", showIcon: "showIcon", removable: "removable" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (visibility) {\n<div\n class=\"c-toast\"\n [ngClass]=\"[\n 'c-toast',\n variant ? 'c-toast--' + variant : '',\n extraClass ? extraClass : '',\n closeActive ? 'c-toast--hide' : '',\n !title ? 'c-toast--no-title' : '',\n !text ? 'c-toast--no-text' : ''\n ]\"\n>\n @if (showIcon) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n <div class=\"c-toast__content\">\n @if (title) {\n <p class=\"c-toast__title\">{{ title }}</p>\n } @if (text) {\n <p class=\"c-toast__text\">{{ text }}</p>\n }\n </div>\n @if (removable) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"xs\"\n class=\"c-toast__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n >\n </lib-button-icon>\n }\n</div>\n}\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(30px)}}.c-toast{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:150;padding:var(--space-component-padding-lg) var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-floating);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-toast__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-toast__close{justify-self:flex-end;margin:0 0 0 auto}.c-toast__title{color:var(--color-core-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);margin:0 0 auto}.c-toast__text{color:var(--color-core-content-soft);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);margin:0 0 auto}.c-toast--hide{animation:toast-out .3s ease forwards}@media (min-width: 48rem){.c-toast{width:336px}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
8060
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ToastComponent, isStandalone: true, selector: "lib-toast", inputs: { variant: "variant", text: "text", title: "title", time: "time", extraClass: "extraClass", showIcon: "showIcon", removable: "removable" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (visibility) {\n<div\n class=\"c-toast\"\n [ngClass]=\"[\n 'c-toast',\n variant ? 'c-toast--' + variant : '',\n extraClass ? extraClass : '',\n closeActive ? 'c-toast--hide' : '',\n !title ? 'c-toast--no-title' : '',\n !text ? 'c-toast--no-text' : ''\n ]\"\n>\n @if (showIcon) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n <div class=\"c-toast__content\">\n @if (title) {\n <p class=\"c-toast__title\">{{ title }}</p>\n } @if (text) {\n <p class=\"c-toast__text\">{{ text }}</p>\n }\n </div>\n @if (removable) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"xs\"\n class=\"c-toast__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n >\n </lib-button-icon>\n }\n</div>\n}\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(30px)}}.c-toast{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:150;padding:var(--space-component-padding-lg) var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-floating);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-toast__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-toast__close{justify-self:flex-end;margin:0 0 0 auto}.c-toast__title{color:var(--color-core-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);margin:0 0 auto}.c-toast__text{color:var(--color-core-content-soft);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);margin:0 0 auto}.c-toast--hide{animation:toast-out .3s ease forwards}@media (min-width: 48rem){.c-toast{width:336px}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "rounded", "skeletonActive"], outputs: ["clicked"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
8057
8061
|
}
|
|
8058
8062
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastComponent, decorators: [{
|
|
8059
8063
|
type: Component,
|