@crowdfarming/oliva-ds 1.35.0 → 1.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/crowdfarming-oliva-ds.mjs +337 -97
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/dropdown-action/src/lib/dropdown-action/dropdown-action.component.d.ts +5 -2
- package/lib/dropdown-select/src/lib/dropdown-select/dropdown-select.component.d.ts +5 -2
- package/lib/input-number/src/lib/input-number/input-number.component.d.ts +6 -2
- package/lib/overlay/src/lib/overlay/overlay.component.d.ts +42 -18
- package/package.json +1 -1
- package/themes/crowdfarming.css +48 -8
- package/themes/farmeneur.css +24 -12
- package/themes/laruche.css +2090 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, PLATFORM_ID,
|
|
2
|
+
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, PLATFORM_ID, viewChild, ViewChild, HostListener, Directive, ApplicationRef, Injector, createComponent, Injectable, model, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass, isPlatformBrowser, NgStyle } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -2511,11 +2511,11 @@ class ButtonIconComponent {
|
|
|
2511
2511
|
}
|
|
2512
2512
|
});
|
|
2513
2513
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2514
|
-
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)}.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)}.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)}.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)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
2514
|
+
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", "name", "color"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
2515
2515
|
}
|
|
2516
2516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonIconComponent, decorators: [{
|
|
2517
2517
|
type: Component,
|
|
2518
|
-
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)}.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)}.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)}.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)}\n"] }]
|
|
2518
|
+
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"] }]
|
|
2519
2519
|
}] });
|
|
2520
2520
|
|
|
2521
2521
|
class AlertComponent {
|
|
@@ -2823,11 +2823,11 @@ class ButtonComponent {
|
|
|
2823
2823
|
}
|
|
2824
2824
|
});
|
|
2825
2825
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2826
|
-
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 <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n <span class=\"c-button__text\">{{ loadingText() }}</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: [".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}.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--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", "name", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
2826
|
+
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 <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n <span class=\"c-button__text\">{{ loadingText() }}</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}.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--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", "name", "color"] }, { kind: "component", type: SpinnerComponent, selector: "lib-spinner", inputs: ["size", "color"] }] });
|
|
2827
2827
|
}
|
|
2828
2828
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
2829
2829
|
type: Component,
|
|
2830
|
-
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 <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n <span class=\"c-button__text\">{{ loadingText() }}</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: [".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}.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--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"] }]
|
|
2830
|
+
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 <lib-spinner [size]=\"iconSize()\" [color]=\"iconColor()\"></lib-spinner>\n <span class=\"c-button__text\">{{ loadingText() }}</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}.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--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"] }]
|
|
2831
2831
|
}] });
|
|
2832
2832
|
|
|
2833
2833
|
class ButtonSetComponent {
|
|
@@ -3177,142 +3177,364 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3177
3177
|
args: [{ selector: 'lib-chips', template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <label class=\"c-chip__label\" [for]=\"'chip-' + option.value\">\n <input\n [type]=\"isSingleSelection() ? 'radio' : 'checkbox'\"\n [name]=\"isSingleSelection() ? 'chip-group' : null\"\n [id]=\"'chip-' + option.value\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [checked]=\"option.selected\"\n (change)=\"toggle(option)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-flex;align-items:center;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer;white-space:nowrap}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:has(.c-chip__input:focus-visible){box-shadow:var(--focus-outset);outline:none}.c-chip__label:active{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:has(input:checked):active{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{position:absolute;opacity:0}.c-chip__input:hover{cursor:pointer}\n"] }]
|
|
3178
3178
|
}] });
|
|
3179
3179
|
|
|
3180
|
+
// TODO: Move to a constants file
|
|
3181
|
+
const FOCUSABLE_SELECTOR = [
|
|
3182
|
+
'a[href]',
|
|
3183
|
+
'button:not([disabled])',
|
|
3184
|
+
'input:not([disabled]):not([type="hidden"])',
|
|
3185
|
+
'select:not([disabled])',
|
|
3186
|
+
'textarea:not([disabled])',
|
|
3187
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
3188
|
+
].join(',');
|
|
3180
3189
|
class OverlayComponent {
|
|
3181
3190
|
// Inputs
|
|
3182
|
-
position = input('right');
|
|
3183
3191
|
disabled = input(false);
|
|
3184
3192
|
width = input('200px');
|
|
3193
|
+
direction = input('down');
|
|
3194
|
+
align = input('left');
|
|
3195
|
+
appendToBody = input(false);
|
|
3196
|
+
autoFocus = input(true);
|
|
3185
3197
|
// Outputs
|
|
3186
3198
|
opened = output();
|
|
3187
3199
|
closed = output();
|
|
3188
3200
|
// Private signals
|
|
3189
3201
|
_isOpen = signal(false);
|
|
3190
|
-
_isClosing = signal(false);
|
|
3191
3202
|
_isMobile = signal(false);
|
|
3192
3203
|
// Public computed signals
|
|
3193
3204
|
isOpen = this._isOpen.asReadonly();
|
|
3194
|
-
|
|
3195
|
-
//
|
|
3196
|
-
|
|
3197
|
-
const classes = ['c-overlay'];
|
|
3198
|
-
if (this.isOpen()) {
|
|
3199
|
-
classes.push('c-overlay--open');
|
|
3200
|
-
}
|
|
3201
|
-
return classes.join(' ');
|
|
3202
|
-
});
|
|
3203
|
-
getBackdropClasses = computed(() => {
|
|
3204
|
-
const classes = ['c-overlay__backdrop'];
|
|
3205
|
-
if (this.isOpen()) {
|
|
3206
|
-
classes.push('c-overlay__backdrop--open');
|
|
3207
|
-
}
|
|
3208
|
-
return classes.join(' ');
|
|
3209
|
-
});
|
|
3210
|
-
getMenuClasses = computed(() => {
|
|
3211
|
-
const classes = ['c-overlay__menu'];
|
|
3212
|
-
classes.push(`c-overlay__menu--${this.position()}`);
|
|
3213
|
-
return classes.join(' ');
|
|
3214
|
-
});
|
|
3215
|
-
getMenuStyles = computed(() => {
|
|
3216
|
-
return {
|
|
3217
|
-
width: this._isMobile() ? '100%' : this.width(),
|
|
3218
|
-
};
|
|
3219
|
-
});
|
|
3205
|
+
isMobile = this._isMobile.asReadonly();
|
|
3206
|
+
// Track menu styles
|
|
3207
|
+
menuStyles = signal({});
|
|
3220
3208
|
// Element references
|
|
3221
3209
|
elementRef = inject(ElementRef);
|
|
3222
3210
|
triggerButtonRef;
|
|
3223
3211
|
platformId = inject(PLATFORM_ID);
|
|
3224
|
-
|
|
3212
|
+
// Store initial position for restoration
|
|
3213
|
+
// Only if appendToBody is true
|
|
3214
|
+
initialPosition = {};
|
|
3215
|
+
// Stable event handler references to allow proper removeEventListener
|
|
3216
|
+
scrollHandler = () => this.setAnchorPosition();
|
|
3217
|
+
resizeHandler = () => this.onResize();
|
|
3218
|
+
keydownHandler = (event) => this.onKeydown(event);
|
|
3219
|
+
documentClickHandler = (event) => this.onDocumentClick(event);
|
|
3220
|
+
// Signal query for the menu container
|
|
3221
|
+
overlayMenu = viewChild('overlayMenu');
|
|
3225
3222
|
constructor() {
|
|
3226
3223
|
// Initialize mobile detection
|
|
3227
3224
|
this.updateMobileDetection();
|
|
3228
3225
|
// Only add resize listener if running in browser (not in SSR)
|
|
3229
3226
|
if (isPlatformBrowser(this.platformId)) {
|
|
3230
|
-
window.addEventListener('resize',
|
|
3227
|
+
window.addEventListener('resize', this.resizeHandler);
|
|
3231
3228
|
}
|
|
3232
3229
|
// Emit events when overlay state changes
|
|
3233
3230
|
effect(() => {
|
|
3234
3231
|
if (this.isOpen()) {
|
|
3235
3232
|
this.opened.emit();
|
|
3233
|
+
this.onOverlayOpen();
|
|
3236
3234
|
}
|
|
3237
|
-
else
|
|
3235
|
+
else {
|
|
3238
3236
|
this.closed.emit();
|
|
3237
|
+
this.onOverlayClose();
|
|
3239
3238
|
}
|
|
3240
3239
|
});
|
|
3241
3240
|
}
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
// Check if running in browser (not in SSR)
|
|
3241
|
+
ngOnDestroy() {
|
|
3242
|
+
this.onOverlayClose();
|
|
3245
3243
|
if (isPlatformBrowser(this.platformId)) {
|
|
3246
|
-
|
|
3244
|
+
window.removeEventListener('resize', this.resizeHandler);
|
|
3245
|
+
}
|
|
3246
|
+
}
|
|
3247
|
+
/** OPEN HANDLING **/
|
|
3248
|
+
onOverlayOpen() {
|
|
3249
|
+
// Setup focus trapping after the view updates
|
|
3250
|
+
this.setupFocusHandler();
|
|
3251
|
+
// Setup click handler
|
|
3252
|
+
this.setupDocumentClickHandler();
|
|
3253
|
+
// If mobile do nothing
|
|
3254
|
+
if (this._isMobile()) {
|
|
3255
|
+
return;
|
|
3256
|
+
}
|
|
3257
|
+
const triggerBoundingBox = this.triggerButtonRef?.getBoundingClientRect();
|
|
3258
|
+
if (!triggerBoundingBox) {
|
|
3259
|
+
return;
|
|
3260
|
+
}
|
|
3261
|
+
this.setAnchorStyles(triggerBoundingBox);
|
|
3262
|
+
this.setMenuStyles(triggerBoundingBox);
|
|
3263
|
+
}
|
|
3264
|
+
/** ANCHOR MANAGEMENT */
|
|
3265
|
+
setAnchorStyles(triggerBoundingBox) {
|
|
3266
|
+
// Set width to track
|
|
3267
|
+
this.elementRef.nativeElement.style.width = `${triggerBoundingBox.width}px`;
|
|
3268
|
+
if (this.appendToBody()) {
|
|
3269
|
+
// Store original parent and position before moving
|
|
3270
|
+
// Only on open
|
|
3271
|
+
this.initialPosition = {
|
|
3272
|
+
parent: this.elementRef.nativeElement.parentNode,
|
|
3273
|
+
nextSibling: this.elementRef.nativeElement.nextSibling,
|
|
3274
|
+
styles: {
|
|
3275
|
+
left: this.elementRef.nativeElement.style.left,
|
|
3276
|
+
top: this.elementRef.nativeElement.style.top,
|
|
3277
|
+
},
|
|
3278
|
+
};
|
|
3279
|
+
// Set new position
|
|
3280
|
+
this.setAnchorPosition();
|
|
3281
|
+
// Append to body (only on open)
|
|
3282
|
+
document.body.appendChild(this.elementRef.nativeElement);
|
|
3283
|
+
// Set scroll listener if appendToBody is true when open
|
|
3284
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3285
|
+
window.addEventListener('scroll', this.scrollHandler);
|
|
3286
|
+
}
|
|
3287
|
+
}
|
|
3288
|
+
}
|
|
3289
|
+
// Only when appendToBody is true
|
|
3290
|
+
setAnchorPosition() {
|
|
3291
|
+
// Get again the trigger bounding box to get the correct position when scrolling
|
|
3292
|
+
const triggerBoundingBox = this.triggerButtonRef?.getBoundingClientRect();
|
|
3293
|
+
if (!triggerBoundingBox) {
|
|
3294
|
+
return;
|
|
3295
|
+
}
|
|
3296
|
+
let scrollX = 0;
|
|
3297
|
+
let scrollY = 0;
|
|
3298
|
+
// Get scroll position if running in browser (not in SSR)
|
|
3299
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3300
|
+
scrollX = window.scrollX;
|
|
3301
|
+
scrollY = window.scrollY;
|
|
3302
|
+
}
|
|
3303
|
+
this.elementRef.nativeElement.style.left = `${triggerBoundingBox.left + scrollX}px`;
|
|
3304
|
+
this.elementRef.nativeElement.style.top = `${triggerBoundingBox.bottom + scrollY}px`;
|
|
3305
|
+
}
|
|
3306
|
+
// Only when appendToBody is true
|
|
3307
|
+
restoreInitialPosition() {
|
|
3308
|
+
const { parent, nextSibling, styles } = this.initialPosition;
|
|
3309
|
+
// Restore element to its original position
|
|
3310
|
+
if (parent) {
|
|
3311
|
+
if (nextSibling) {
|
|
3312
|
+
// Insert before the original next sibling
|
|
3313
|
+
parent.insertBefore(this.elementRef.nativeElement, nextSibling);
|
|
3314
|
+
}
|
|
3315
|
+
else {
|
|
3316
|
+
// Append to the end of the original parent
|
|
3317
|
+
parent.appendChild(this.elementRef.nativeElement);
|
|
3318
|
+
}
|
|
3319
|
+
}
|
|
3320
|
+
// Restore original styles
|
|
3321
|
+
if (styles) {
|
|
3322
|
+
Object.keys(styles).forEach((key) => {
|
|
3323
|
+
const styleKey = key;
|
|
3324
|
+
const value = styles[styleKey];
|
|
3325
|
+
if (value !== undefined) {
|
|
3326
|
+
this.elementRef.nativeElement.style.setProperty(styleKey, value);
|
|
3327
|
+
}
|
|
3328
|
+
else {
|
|
3329
|
+
this.elementRef.nativeElement.style.removeProperty(styleKey);
|
|
3330
|
+
}
|
|
3331
|
+
});
|
|
3332
|
+
}
|
|
3333
|
+
// Clear stored references
|
|
3334
|
+
this.initialPosition = {};
|
|
3335
|
+
// Remove scroll listener if appendToBody is true when close
|
|
3336
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3337
|
+
window.removeEventListener('scroll', this.scrollHandler);
|
|
3338
|
+
}
|
|
3339
|
+
}
|
|
3340
|
+
/** MENU STYLING MANAGEMENT */
|
|
3341
|
+
// TODO: collision detection with end of screen
|
|
3342
|
+
setMenuStyles(triggerBoundingBox) {
|
|
3343
|
+
const menuStyles = {
|
|
3344
|
+
width: this.width(),
|
|
3345
|
+
};
|
|
3346
|
+
// Set menu alignment
|
|
3347
|
+
if (this.align() === 'left') {
|
|
3348
|
+
menuStyles.left = '0';
|
|
3349
|
+
}
|
|
3350
|
+
else if (this.align() === 'right') {
|
|
3351
|
+
menuStyles.right = '0';
|
|
3247
3352
|
}
|
|
3248
3353
|
else {
|
|
3249
|
-
//
|
|
3250
|
-
|
|
3354
|
+
// center
|
|
3355
|
+
menuStyles.left = '50%';
|
|
3356
|
+
menuStyles.translate = '-50%';
|
|
3357
|
+
}
|
|
3358
|
+
if (this.direction() === 'down') {
|
|
3359
|
+
menuStyles.top = '2px';
|
|
3360
|
+
}
|
|
3361
|
+
else {
|
|
3362
|
+
// up
|
|
3363
|
+
menuStyles.bottom = `${triggerBoundingBox.height + 2}px`;
|
|
3251
3364
|
}
|
|
3365
|
+
this.menuStyles.set(menuStyles);
|
|
3252
3366
|
}
|
|
3253
|
-
|
|
3367
|
+
/** CLOSE HANDLING **/
|
|
3368
|
+
onOverlayClose() {
|
|
3369
|
+
// Reset focus handler
|
|
3370
|
+
this.resetFocusHandler();
|
|
3371
|
+
// Reset click handler
|
|
3372
|
+
this.resetDocumentClickHandler();
|
|
3373
|
+
// Restore position if appendToBody is true
|
|
3374
|
+
if (this.appendToBody()) {
|
|
3375
|
+
this.restoreInitialPosition();
|
|
3376
|
+
}
|
|
3377
|
+
// Clear menu styles
|
|
3378
|
+
this.menuStyles.set({});
|
|
3379
|
+
}
|
|
3380
|
+
/** TRIGGER MANAGEMENT */
|
|
3254
3381
|
setTriggerButton(element) {
|
|
3255
3382
|
this.triggerButtonRef = element;
|
|
3256
3383
|
}
|
|
3384
|
+
/** OPEN/CLOSE MANAGEMENT */
|
|
3257
3385
|
toggleOverlay() {
|
|
3258
3386
|
if (this.disabled()) {
|
|
3259
3387
|
return;
|
|
3260
3388
|
}
|
|
3261
|
-
if (this.isOpen()
|
|
3389
|
+
if (this.isOpen()) {
|
|
3262
3390
|
this.closeOverlay();
|
|
3263
3391
|
}
|
|
3264
|
-
else
|
|
3392
|
+
else {
|
|
3265
3393
|
this.openOverlay();
|
|
3266
3394
|
}
|
|
3267
3395
|
}
|
|
3268
3396
|
openOverlay() {
|
|
3269
|
-
this._isClosing.set(false);
|
|
3270
3397
|
this._isOpen.set(true);
|
|
3271
3398
|
}
|
|
3272
3399
|
closeOverlay() {
|
|
3273
|
-
this.
|
|
3274
|
-
setTimeout(() => {
|
|
3275
|
-
this._isOpen.set(false);
|
|
3276
|
-
this._isClosing.set(false);
|
|
3277
|
-
}, 20); // Match animation duration
|
|
3400
|
+
this._isOpen.set(false);
|
|
3278
3401
|
}
|
|
3279
|
-
//
|
|
3280
|
-
|
|
3281
|
-
this.
|
|
3402
|
+
// Resize handler
|
|
3403
|
+
onResize() {
|
|
3404
|
+
this.updateMobileDetection();
|
|
3405
|
+
// Only update anchor position if overlay is open and appendToBody is true
|
|
3406
|
+
if (this.appendToBody() && this.isOpen()) {
|
|
3407
|
+
this.setAnchorPosition();
|
|
3408
|
+
}
|
|
3282
3409
|
}
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3410
|
+
// Mobile detection method
|
|
3411
|
+
updateMobileDetection() {
|
|
3412
|
+
// Check if running in browser (not in SSR)
|
|
3413
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3414
|
+
this._isMobile.set(window.innerWidth <= 768);
|
|
3415
|
+
}
|
|
3416
|
+
else {
|
|
3417
|
+
// Default to desktop view during SSR
|
|
3418
|
+
this._isMobile.set(false);
|
|
3419
|
+
}
|
|
3420
|
+
}
|
|
3421
|
+
/**FOCUS MANAGEMENT */
|
|
3422
|
+
// Setup focus handler
|
|
3423
|
+
setupFocusHandler() {
|
|
3424
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3425
|
+
queueMicrotask(() => {
|
|
3426
|
+
// Focus first element if autoFocus is true
|
|
3427
|
+
if (this.autoFocus()) {
|
|
3428
|
+
this.focusFirstElement();
|
|
3429
|
+
}
|
|
3430
|
+
document.addEventListener('keydown', this.keydownHandler, true);
|
|
3431
|
+
});
|
|
3432
|
+
}
|
|
3433
|
+
}
|
|
3434
|
+
// Reset focus handler
|
|
3435
|
+
resetFocusHandler() {
|
|
3436
|
+
// Remove focus trap listener and restore focus to trigger
|
|
3437
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3438
|
+
document.removeEventListener('keydown', this.keydownHandler, true);
|
|
3439
|
+
}
|
|
3440
|
+
const triggerEl = this.triggerButtonRef;
|
|
3441
|
+
if (triggerEl) {
|
|
3442
|
+
const firstFocusable = this.getFirstFocusableElement(triggerEl);
|
|
3443
|
+
if (firstFocusable) {
|
|
3444
|
+
firstFocusable.focus();
|
|
3445
|
+
}
|
|
3446
|
+
}
|
|
3447
|
+
}
|
|
3448
|
+
getFocusableElements() {
|
|
3449
|
+
const container = this.overlayMenu()?.nativeElement ||
|
|
3450
|
+
this.elementRef.nativeElement;
|
|
3451
|
+
return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => el.offsetWidth > 0 ||
|
|
3452
|
+
el.offsetHeight > 0 ||
|
|
3453
|
+
el.getClientRects().length > 0);
|
|
3454
|
+
}
|
|
3455
|
+
// Get first focusable element, including the root element
|
|
3456
|
+
getFirstFocusableElement(root) {
|
|
3457
|
+
if (root.matches(FOCUSABLE_SELECTOR)) {
|
|
3458
|
+
return root;
|
|
3459
|
+
}
|
|
3460
|
+
const list = Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR));
|
|
3461
|
+
return list.length ? list[0] : null;
|
|
3462
|
+
}
|
|
3463
|
+
focusFirstElement() {
|
|
3464
|
+
const focusables = this.getFocusableElements();
|
|
3465
|
+
if (focusables.length) {
|
|
3466
|
+
focusables[0].focus();
|
|
3467
|
+
}
|
|
3468
|
+
}
|
|
3469
|
+
// Keydown handler only if overlay is open
|
|
3470
|
+
onKeydown(event) {
|
|
3471
|
+
// Only move focus if Tab key is pressed
|
|
3472
|
+
if (event.key !== 'Tab') {
|
|
3473
|
+
// Close overlay on Escape key
|
|
3474
|
+
if (event.key === 'Escape') {
|
|
3293
3475
|
this.closeOverlay();
|
|
3294
3476
|
}
|
|
3477
|
+
return;
|
|
3478
|
+
}
|
|
3479
|
+
const focusables = this.getFocusableElements();
|
|
3480
|
+
// Exit if no focusable elements
|
|
3481
|
+
if (!focusables.length) {
|
|
3482
|
+
return;
|
|
3483
|
+
}
|
|
3484
|
+
const first = focusables[0];
|
|
3485
|
+
const last = focusables[focusables.length - 1];
|
|
3486
|
+
const active = document.activeElement;
|
|
3487
|
+
const isShift = event.shiftKey;
|
|
3488
|
+
if (isShift) {
|
|
3489
|
+
if (!active || active === first) {
|
|
3490
|
+
event.preventDefault();
|
|
3491
|
+
last.focus();
|
|
3492
|
+
}
|
|
3493
|
+
}
|
|
3494
|
+
else {
|
|
3495
|
+
if (!active || active === last) {
|
|
3496
|
+
event.preventDefault();
|
|
3497
|
+
first.focus();
|
|
3498
|
+
}
|
|
3499
|
+
}
|
|
3500
|
+
}
|
|
3501
|
+
/** DOCUMENT CLICK HANDLER */
|
|
3502
|
+
// TODO: Only when not mobile
|
|
3503
|
+
setupDocumentClickHandler() {
|
|
3504
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3505
|
+
document.addEventListener('click', this.documentClickHandler);
|
|
3506
|
+
}
|
|
3507
|
+
}
|
|
3508
|
+
resetDocumentClickHandler() {
|
|
3509
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
3510
|
+
document.removeEventListener('click', this.documentClickHandler);
|
|
3511
|
+
}
|
|
3512
|
+
}
|
|
3513
|
+
// Click handler for document
|
|
3514
|
+
onDocumentClick(event) {
|
|
3515
|
+
const clickedElement = event.target;
|
|
3516
|
+
const isClickInsideOverlay = this.elementRef.nativeElement.contains(clickedElement);
|
|
3517
|
+
const isClickOnTrigger = this.triggerButtonRef?.contains(clickedElement);
|
|
3518
|
+
if (!isClickInsideOverlay && !isClickOnTrigger) {
|
|
3519
|
+
this.closeOverlay();
|
|
3295
3520
|
}
|
|
3296
3521
|
}
|
|
3297
3522
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3298
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: {
|
|
3523
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: OverlayComponent, isStandalone: true, selector: "lib-overlay", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "overlayMenu", first: true, predicate: ["overlayMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div class=\"c-overlay__content\">\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n\n <!-- Footer slot for mobile action buttons -->\n <!-- TODO: Review footer implementation -->\n <div class=\"c-overlay__footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>\n", styles: [":host{position:absolute;display:block;height:0px}.c-overlay__backdrop{position:fixed;inset:0;z-index:1000;background-color:var(--color-effect-overlay);transition:opacity .2s ease-in-out;opacity:1}.c-overlay__menu{position:absolute;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;animation:overlay-animation .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-animation{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:27px}.c-overlay__footer:empty{display:none}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3299
3524
|
}
|
|
3300
3525
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OverlayComponent, decorators: [{
|
|
3301
3526
|
type: Component,
|
|
3302
|
-
args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle], template: "<div class=\"c-overlay\"
|
|
3303
|
-
}], ctorParameters: () => []
|
|
3304
|
-
type: ViewChild,
|
|
3305
|
-
args: ['overlayMenu']
|
|
3306
|
-
}], onClickOutside: [{
|
|
3307
|
-
type: HostListener,
|
|
3308
|
-
args: ['document:click', ['$event']]
|
|
3309
|
-
}] } });
|
|
3527
|
+
args: [{ selector: 'lib-overlay', imports: [NgClass, NgStyle], template: "<div class=\"c-overlay\">\n <!-- Only show if overlay is open -->\n @if (isOpen()) {\n <!-- Backdrop (only on mobile) -->\n @if (isMobile()) {\n <div\n class=\"c-overlay__backdrop\"\n (click)=\"closeOverlay()\"\n (keydown)=\"closeOverlay()\"\n tabindex=\"-1\"\n role=\"button\"\n aria-label=\"Close overlay\"\n ></div>\n }\n\n <!-- Overlay Menu -->\n <div\n #overlayMenu\n class=\"c-overlay__menu\"\n tabindex=\"-1\"\n [ngStyle]=\"menuStyles()\"\n (keydown.escape)=\"closeOverlay()\"\n >\n <div class=\"c-overlay__content\">\n <!-- Main content projection -->\n <ng-content></ng-content>\n </div>\n\n <!-- Footer slot for mobile action buttons -->\n <!-- TODO: Review footer implementation -->\n <div class=\"c-overlay__footer\">\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n </div>\n }\n</div>\n", styles: [":host{position:absolute;display:block;height:0px}.c-overlay__backdrop{position:fixed;inset:0;z-index:1000;background-color:var(--color-effect-overlay);transition:opacity .2s ease-in-out;opacity:1}.c-overlay__menu{position:absolute;z-index:1000;background-color:var(--color-core-background-surface-raised);border:var(--size-border-width-sm) solid var(--color-core-border-soft);border-radius:var(--size-textfield-border-radius);box-shadow:var(--elevation-raised);max-height:320px;min-width:200px;overflow:hidden;display:flex;flex-direction:column;opacity:0;animation:overlay-animation .2s ease-out forwards}.c-overlay__content{flex:1;overflow-y:auto}.c-overlay__footer{display:none;height:27px}.c-overlay__footer:not(:empty){display:flex}@keyframes overlay-animation{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.c-overlay__menu{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;margin-top:0;border-radius:0;animation:none;z-index:1001;opacity:1;display:flex;flex-direction:column}.c-overlay__content{flex:1;overflow-y:auto;overflow-x:hidden;max-height:calc(100vh - 27px);width:100%;min-width:0}.c-overlay__content>*{max-width:100%!important;width:100%!important;box-sizing:border-box!important;word-wrap:break-word!important;overflow-wrap:break-word!important;overflow-x:hidden!important}.c-overlay__content *{max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}.c-overlay__footer{flex-shrink:0;padding:var(--space-container-padding-sm);background-color:var(--color-core-background-surface-raised);border-top:var(--size-border-width-sm) solid var(--color-core-border-soft);display:flex;justify-content:space-between;align-items:center;height:27px}.c-overlay__footer:empty{display:none}}\n"] }]
|
|
3528
|
+
}], ctorParameters: () => [] });
|
|
3310
3529
|
|
|
3311
3530
|
class DropdownActionComponent {
|
|
3312
3531
|
// Inputs
|
|
3313
3532
|
options = input([]);
|
|
3314
3533
|
disabled = input(false);
|
|
3315
|
-
|
|
3534
|
+
align = input('left');
|
|
3535
|
+
direction = input('down');
|
|
3536
|
+
appendToBody = input(false);
|
|
3537
|
+
autoFocus = input(true);
|
|
3316
3538
|
width = input('fit-content');
|
|
3317
3539
|
// Outputs
|
|
3318
3540
|
actionClicked = output();
|
|
@@ -3371,11 +3593,11 @@ class DropdownActionComponent {
|
|
|
3371
3593
|
this._isOverlayOpen.set(false);
|
|
3372
3594
|
}
|
|
3373
3595
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3374
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownActionComponent, isStandalone: true, selector: "lib-dropdown-action", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null },
|
|
3596
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownActionComponent, isStandalone: true, selector: "lib-dropdown-action", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClicked: "actionClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Options List -->\n <div class=\"c-dropdown-action__options\">\n @for (group of options(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-action__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-action__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) {\n <!-- Action button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-action__option\"\n [disabled]=\"option.disabled\"\n (click)=\"selectAction(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);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);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus"], outputs: ["opened", "closed"] }] });
|
|
3375
3597
|
}
|
|
3376
3598
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownActionComponent, decorators: [{
|
|
3377
3599
|
type: Component,
|
|
3378
|
-
args: [{ selector: 'lib-dropdown-action', imports: [IconComponent, OverlayComponent], template: "<lib-overlay\n [
|
|
3600
|
+
args: [{ selector: 'lib-dropdown-action', imports: [IconComponent, OverlayComponent], template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Options List -->\n <div class=\"c-dropdown-action__options\">\n @for (group of options(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-action__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-action__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) {\n <!-- Action button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-action__option\"\n [disabled]=\"option.disabled\"\n (click)=\"selectAction(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-action__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-action__option-label\">\n {{ option.label }}\n </span>\n </button>\n }\n </div>\n }\n </div>\n</lib-overlay>\n", styles: [".c-dropdown-action__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-action__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-action__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);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);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-action__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-action__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-action__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-action__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-action__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-action__option-label{flex:1;min-width:0}\n"] }]
|
|
3379
3601
|
}], ctorParameters: () => [], propDecorators: { overlay: [{
|
|
3380
3602
|
type: ViewChild,
|
|
3381
3603
|
args: [OverlayComponent]
|
|
@@ -3651,7 +3873,10 @@ class DropdownSelectComponent {
|
|
|
3651
3873
|
disabled = input(false);
|
|
3652
3874
|
cancelButtonText = input('Cancel');
|
|
3653
3875
|
acceptButtonText = input('Accept');
|
|
3654
|
-
|
|
3876
|
+
align = input('left');
|
|
3877
|
+
direction = input('down');
|
|
3878
|
+
appendToBody = input(false);
|
|
3879
|
+
autoFocus = input(true);
|
|
3655
3880
|
width = input('fit-content');
|
|
3656
3881
|
// Outputs
|
|
3657
3882
|
optionSelected = output();
|
|
@@ -3930,7 +4155,7 @@ class DropdownSelectComponent {
|
|
|
3930
4155
|
}
|
|
3931
4156
|
}
|
|
3932
4157
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3933
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null },
|
|
4158
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DropdownSelectComponent, isStandalone: true, selector: "lib-dropdown-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, selectedValues: { classPropertyName: "selectedValues", publicName: "selectedValues", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, cancelButtonText: { classPropertyName: "cancelButtonText", publicName: "cancelButtonText", isSignal: true, isRequired: false, transformFunction: null }, acceptButtonText: { classPropertyName: "acceptButtonText", publicName: "acceptButtonText", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, appendToBody: { classPropertyName: "appendToBody", publicName: "appendToBody", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected", optionDeselected: "optionDeselected", searchChanged: "searchChanged", valueChange: "valueChange", cancelClicked: "cancelClicked", acceptClicked: "acceptClicked" }, viewQueries: [{ propertyName: "overlay", first: true, predicate: OverlayComponent, descendants: true }], ngImport: i0, template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-dropdown-select__search\">\n <lib-input-search\n [placeholder]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-dropdown-select__options\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-select__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if (isMultiSelect())\n {\n <!-- For multiselect: use full checkbox component with label -->\n <div\n class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n >\n <lib-checkbox\n [label]=\"option.label\"\n [name]=\"'option-' + option.value\"\n [value]=\"option.value\"\n [ariaLabel]=\"'Select ' + option.label\"\n [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n [disabled]=\"option.disabled || false\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-select__option\"\n [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-select__option-label\">\n {{ option.label }}\n </span>\n\n <!-- Check icon for selected option in single select -->\n @if (isSelected(option)) {\n <lib-icon\n name=\"checkcircle-fill\"\n size=\"lg\"\n color=\"action-primary-selected-background-default\"\n >\n </lib-icon>\n }\n </button>\n } }\n </div>\n }\n </div>\n\n <!-- Mobile Action Buttons in footer slot -->\n @if (showMobileActions()) {\n <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);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);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth", "clearButton"], outputs: ["emitValue"] }, { kind: "component", type: LinkActionComponent, selector: "lib-link-action", inputs: ["text", "disabled", "variant", "size", "weight", "iconBefore", "iconAfter"], outputs: ["clicked"] }, { kind: "component", type: OverlayComponent, selector: "lib-overlay", inputs: ["disabled", "width", "direction", "align", "appendToBody", "autoFocus"], outputs: ["opened", "closed"] }] });
|
|
3934
4159
|
}
|
|
3935
4160
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DropdownSelectComponent, decorators: [{
|
|
3936
4161
|
type: Component,
|
|
@@ -3941,7 +4166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3941
4166
|
InputSearchComponent,
|
|
3942
4167
|
LinkActionComponent,
|
|
3943
4168
|
OverlayComponent,
|
|
3944
|
-
], template: "<lib-overlay\n [
|
|
4169
|
+
], template: "<lib-overlay\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [disabled]=\"disabled()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"width()\"\n (opened)=\"onOverlayOpened()\"\n (closed)=\"onOverlayClosed()\"\n>\n <!-- Search Input (if enabled and not multiselect) -->\n @if (showSearchBar()) {\n <div class=\"c-dropdown-select__search\">\n <lib-input-search\n [placeholder]=\"searchPlaceholder()\"\n [formControl]=\"searchControl\"\n size=\"lg\"\n [fullWidth]=\"true\"\n ></lib-input-search>\n </div>\n }\n\n <!-- Options List -->\n <div class=\"c-dropdown-select__options\">\n @for (group of filteredOptions(); track group.label) {\n <!-- Option Group -->\n <div class=\"c-dropdown-select__group\">\n <!-- Group Label -->\n @if (group.label) {\n <div class=\"c-dropdown-select__group-label\">\n {{ group.label }}\n </div>\n }\n <!-- Group Options -->\n @for (option of group.options; track option.value) { @if (isMultiSelect())\n {\n <!-- For multiselect: use full checkbox component with label -->\n <div\n class=\"c-dropdown-select__option c-dropdown-select__option--multiselect\"\n >\n <lib-checkbox\n [label]=\"option.label\"\n [name]=\"'option-' + option.value\"\n [value]=\"option.value\"\n [ariaLabel]=\"'Select ' + option.label\"\n [state]=\"isSelected(option) ? 'checked' : 'unchecked'\"\n [disabled]=\"option.disabled || false\"\n (changed)=\"onCheckboxChange(option, $event.checked)\"\n ></lib-checkbox>\n </div>\n } @else {\n <!-- For single select: use button with icon and label -->\n <button\n type=\"button\"\n class=\"c-dropdown-select__option\"\n [class.c-dropdown-select__option--selected]=\"isSelected(option)\"\n [disabled]=\"option.disabled\"\n (click)=\"selectOption(option)\"\n >\n @if (option.icon) {\n <lib-icon\n [name]=\"option.icon\"\n size=\"lg\"\n class=\"c-dropdown-select__option-icon\"\n >\n </lib-icon>\n }\n\n <span class=\"c-dropdown-select__option-label\">\n {{ option.label }}\n </span>\n\n <!-- Check icon for selected option in single select -->\n @if (isSelected(option)) {\n <lib-icon\n name=\"checkcircle-fill\"\n size=\"lg\"\n color=\"action-primary-selected-background-default\"\n >\n </lib-icon>\n }\n </button>\n } }\n </div>\n }\n </div>\n\n <!-- Mobile Action Buttons in footer slot -->\n @if (showMobileActions()) {\n <div slot=\"footer\" class=\"c-dropdown-select__mobile-actions\">\n <lib-link-action\n [text]=\"cancelButtonText()\"\n variant=\"neutral\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onCancelClick()\"\n ></lib-link-action>\n <lib-link-action\n [text]=\"acceptButtonText()\"\n variant=\"primary\"\n size=\"md\"\n weight=\"bold\"\n (clicked)=\"onAcceptClick()\"\n ></lib-link-action>\n </div>\n }\n</lib-overlay>\n", styles: [".c-dropdown-select__search{padding:var(--space-container-padding-sm);border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft)}.c-dropdown-select__options{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0}.c-dropdown-select__group-label{color:var(--color-core-content-soft);padding:var(--space-component-padding-md) var(--space-component-padding-lg);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);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}.c-dropdown-select__option{display:flex;align-items:center;width:100%;min-height:40px;gap:var(--space-component-gap-sm);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);border:none;background:var(--color-action-neutral-background-default);color:var(--color-core-content-default);font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);letter-spacing:var(--typography-label-sm-default-letter-spacing);text-align:left;cursor:pointer}.c-dropdown-select__option:hover:not(:disabled){background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option:focus-visible:not(:disabled){box-shadow:var(--focus-inset);outline:none}.c-dropdown-select__option:disabled{cursor:not-allowed;opacity:.5}.c-dropdown-select__option--multiselect{cursor:default;padding:0 var(--space-component-padding-lg)}.c-dropdown-select__option--multiselect:hover{background-color:var(--color-action-neutral-background-hover)}.c-dropdown-select__option--multiselect__option{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-dropdown-select__option-icon{flex-shrink:0;margin-right:12px;color:var(--color-core-content-soft)}.c-dropdown-select__option-label{flex:1;min-width:0}.c-dropdown-select__mobile-actions{display:flex;justify-content:space-between;align-items:center;width:100%}\n"] }]
|
|
3945
4170
|
}], ctorParameters: () => [], propDecorators: { overlay: [{
|
|
3946
4171
|
type: ViewChild,
|
|
3947
4172
|
args: [OverlayComponent]
|
|
@@ -4078,6 +4303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4078
4303
|
}] } });
|
|
4079
4304
|
|
|
4080
4305
|
class InputNumberComponent {
|
|
4306
|
+
initialValue = input(undefined);
|
|
4081
4307
|
label = '';
|
|
4082
4308
|
placeholder = '';
|
|
4083
4309
|
helperText = '';
|
|
@@ -4094,12 +4320,25 @@ class InputNumberComponent {
|
|
|
4094
4320
|
minimum = 1;
|
|
4095
4321
|
maximum = 99;
|
|
4096
4322
|
step = 1;
|
|
4097
|
-
value = 0;
|
|
4098
4323
|
emitValue = new EventEmitter();
|
|
4324
|
+
value = signal(this.minimum);
|
|
4325
|
+
// Computed signals to disable buttons at limits
|
|
4326
|
+
isAtMinimum = computed(() => this.value() <= this.minimum);
|
|
4327
|
+
isAtMaximum = computed(() => this.value() >= this.maximum);
|
|
4328
|
+
constructor() {
|
|
4329
|
+
this.value.set(this.minimum);
|
|
4330
|
+
effect(() => {
|
|
4331
|
+
const initial = this.initialValue();
|
|
4332
|
+
if (initial !== undefined) {
|
|
4333
|
+
const clampedValue = Math.max(this.minimum, Math.min(this.maximum, initial));
|
|
4334
|
+
this.value.set(clampedValue);
|
|
4335
|
+
}
|
|
4336
|
+
});
|
|
4337
|
+
}
|
|
4099
4338
|
onChangeFn = () => { };
|
|
4100
4339
|
onTouchedFn = () => { };
|
|
4101
4340
|
writeValue(value) {
|
|
4102
|
-
this.value
|
|
4341
|
+
this.value.set(value ?? this.minimum);
|
|
4103
4342
|
}
|
|
4104
4343
|
registerOnChange(fn) {
|
|
4105
4344
|
this.onChangeFn = fn;
|
|
@@ -4125,7 +4364,7 @@ class InputNumberComponent {
|
|
|
4125
4364
|
}
|
|
4126
4365
|
onType(event) {
|
|
4127
4366
|
const input = event.target;
|
|
4128
|
-
let newVal = input.value === '' ?
|
|
4367
|
+
let newVal = input.value === '' ? this.minimum : Number(input.value);
|
|
4129
4368
|
// Clamp value between minimum and maximum
|
|
4130
4369
|
if (newVal < this.minimum) {
|
|
4131
4370
|
newVal = this.minimum;
|
|
@@ -4133,37 +4372,39 @@ class InputNumberComponent {
|
|
|
4133
4372
|
else if (newVal > this.maximum) {
|
|
4134
4373
|
newVal = this.maximum;
|
|
4135
4374
|
}
|
|
4136
|
-
this.value
|
|
4375
|
+
this.value.set(newVal);
|
|
4137
4376
|
this.onChangeFn(newVal);
|
|
4138
4377
|
this.emitValue.emit(newVal);
|
|
4139
4378
|
}
|
|
4140
4379
|
upNumber() {
|
|
4141
|
-
const
|
|
4380
|
+
const currentValue = this.value();
|
|
4381
|
+
const newValue = currentValue + this.step;
|
|
4142
4382
|
if (newValue <= this.maximum) {
|
|
4143
|
-
this.value
|
|
4144
|
-
this.onChangeFn(
|
|
4145
|
-
this.emitValue.emit(
|
|
4383
|
+
this.value.set(newValue);
|
|
4384
|
+
this.onChangeFn(newValue);
|
|
4385
|
+
this.emitValue.emit(newValue);
|
|
4146
4386
|
}
|
|
4147
4387
|
}
|
|
4148
4388
|
downNumber() {
|
|
4149
|
-
const
|
|
4389
|
+
const currentValue = this.value();
|
|
4390
|
+
const newValue = currentValue - this.step;
|
|
4150
4391
|
if (newValue >= this.minimum) {
|
|
4151
|
-
this.value
|
|
4152
|
-
this.onChangeFn(
|
|
4153
|
-
this.emitValue.emit(
|
|
4392
|
+
this.value.set(newValue);
|
|
4393
|
+
this.onChangeFn(newValue);
|
|
4394
|
+
this.emitValue.emit(newValue);
|
|
4154
4395
|
}
|
|
4155
4396
|
}
|
|
4156
4397
|
onBlur() {
|
|
4157
4398
|
this.onTouchedFn();
|
|
4158
4399
|
}
|
|
4159
4400
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4160
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
4401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: InputNumberComponent, isStandalone: true, selector: "lib-input-number", inputs: { initialValue: { classPropertyName: "initialValue", publicName: "initialValue", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: false, isRequired: false, transformFunction: null }, alertText: { classPropertyName: "alertText", publicName: "alertText", isSignal: false, isRequired: false, transformFunction: null }, successText: { classPropertyName: "successText", publicName: "successText", isSignal: false, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: false, isRequired: false, transformFunction: null }, success: { classPropertyName: "success", publicName: "success", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: false, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: false, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: false, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, minimum: { classPropertyName: "minimum", publicName: "minimum", isSignal: false, isRequired: false, transformFunction: null }, maximum: { classPropertyName: "maximum", publicName: "maximum", isSignal: false, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { emitValue: "emitValue" }, providers: [
|
|
4161
4402
|
{
|
|
4162
4403
|
provide: NG_VALUE_ACCESSOR,
|
|
4163
4404
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
4164
4405
|
multi: true,
|
|
4165
4406
|
},
|
|
4166
|
-
], 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 ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n iconName=\"minus-regular\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;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(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$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"] }, { 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"] }] });
|
|
4407
|
+
], 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 ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled || isAtMinimum()\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n iconName=\"minus-regular\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled || isAtMaximum()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;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(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$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"] }, { 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"] }] });
|
|
4167
4408
|
}
|
|
4168
4409
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
4169
4410
|
type: Component,
|
|
@@ -4171,7 +4412,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4171
4412
|
CommonModule,
|
|
4172
4413
|
ReactiveFormsModule,
|
|
4173
4414
|
InputLabelComponent,
|
|
4174
|
-
IconComponent,
|
|
4175
4415
|
ButtonIconComponent,
|
|
4176
4416
|
HelperTextComponent,
|
|
4177
4417
|
], providers: [
|
|
@@ -4180,8 +4420,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4180
4420
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
4181
4421
|
multi: true,
|
|
4182
4422
|
},
|
|
4183
|
-
], 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 ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n iconName=\"minus-regular\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;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(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
4184
|
-
}], propDecorators: { label: [{
|
|
4423
|
+
], 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 ></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value()\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled || isAtMinimum()\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__less\"\n iconName=\"minus-regular\"\n (click)=\"downNumber()\"\n >\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled || isAtMaximum()\"\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 [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"danger\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input--full-width{max-width:100%}.c-text-input__input{width:100%;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(--space-component-padding-md) 2rem var(--space-component-padding-md) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input--md{height:40px;padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
4424
|
+
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
4185
4425
|
type: Input
|
|
4186
4426
|
}], placeholder: [{
|
|
4187
4427
|
type: Input
|
|
@@ -5750,7 +5990,7 @@ class SelectComponent {
|
|
|
5750
5990
|
useExisting: forwardRef(() => SelectComponent),
|
|
5751
5991
|
multi: true,
|
|
5752
5992
|
},
|
|
5753
|
-
], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [disabled]=\"disabled()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled() || selectedOption()?.disabled\n ? 'textfield-content-disabled'\n : null\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"'Search options...'\"\n [disabled]=\"disabled()\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n [width]=\"'stretch'\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "
|
|
5993
|
+
], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--full-width]=\"fullWidth()\"\n [class.c-select--disabled]=\"disabled()\"\n [class.c-select--error]=\"isError()\"\n [class.c-select--size-sm]=\"size() === 'sm'\"\n [class.c-select--size-md]=\"size() === 'md'\"\n [class.c-select--size-lg]=\"size() === 'lg'\"\n>\n <!-- Label -->\n @if (label()) {\n <lib-input-label\n size=\"sm\"\n [required]=\"required()\"\n [text]=\"label()\"\n [disabled]=\"disabled()\"\n ></lib-input-label>\n }\n\n <!-- Select Container -->\n <div class=\"c-select__container\">\n <!-- Select Trigger -->\n <button\n type=\"button\"\n class=\"c-select__trigger\"\n [disabled]=\"disabled()\"\n [libDropdownSelectTriggerFor]=\"dropdownSelect\"\n [attr.aria-haspopup]=\"true\"\n [attr.aria-label]=\"placeholder()\"\n >\n <!-- Selected Content Display -->\n <div class=\"c-select__content\">\n @if (isMultiSelect() && hasSelection()) {\n <!-- Multi-select: Show tags -->\n <div class=\"c-select__tags\">\n @for (option of visibleTags(); track option.value) {\n <lib-tag\n [text]=\"option.label\"\n variant=\"neutral\"\n size=\"xs\"\n [closeActive]=\"true\"\n [showBadge]=\"false\"\n (closeEvent)=\"removeOption(option)\"\n >\n </lib-tag>\n } @if (hiddenTagsCount() > 0) {\n <span class=\"c-select__counter\"> +{{ hiddenTagsCount() }} </span>\n }\n </div>\n } @else {\n <!-- Single select: Show text -->\n <span\n class=\"c-select__text\"\n [class.c-select__text--placeholder]=\"!hasSelection()\"\n >\n <!-- Icon for single select -->\n @if (selectedOption()?.icon) {\n <lib-icon\n [name]=\"selectedOption()?.icon!\"\n [size]=\"size() === 'sm' ? 'sm' : 'md'\"\n [color]=\"\n disabled() || selectedOption()?.disabled\n ? 'textfield-content-disabled'\n : null\n \"\n >\n </lib-icon>\n }\n {{ displayText() }}\n </span>\n }\n </div>\n\n <!-- Caret Icon -->\n <lib-icon\n name=\"caretdown-regular\"\n [color]=\"\n disabled()\n ? 'textfield-content-disabled'\n : 'textfield-content-default'\n \"\n size=\"md\"\n >\n </lib-icon>\n </button>\n\n <!-- Dropdown Menu -->\n <div class=\"c-select__dropdown\">\n <lib-dropdown-select\n #dropdownSelect\n [options]=\"filteredOptions()\"\n [variant]=\"variant()\"\n [selectedValues]=\"getSelectedValues()\"\n [searchBarEnabled]=\"searchBarEnabled()\"\n [searchPlaceholder]=\"'Search options...'\"\n [disabled]=\"disabled()\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\n [width]=\"'stretch'\"\n ></lib-dropdown-select>\n </div>\n </div>\n\n <!-- Helper Text -->\n @if (helperText() && !isError()) {\n <lib-helper-text\n [text]=\"helperText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n\n <!-- Error Text -->\n @if (errorText() && isError()) {\n <lib-helper-text\n variant=\"danger\"\n [text]=\"errorText()\"\n [disabled]=\"disabled()\"\n ></lib-helper-text>\n }\n</div>\n", styles: [".c-select{max-width:300px;display:flex;flex-direction:column;position:relative;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-select--size-sm .c-select__trigger{min-height:32px;padding:6px 12px;padding:0 var(--space-component-padding-sm)}.c-select--size-md .c-select__trigger{min-height:40px;padding:0 var(--space-component-padding-md)}.c-select--size-lg .c-select__trigger{min-height:48px;padding:0 var(--space-component-padding-lg)}.c-select--full-width{max-width:100%}.c-select--error .c-select__trigger{border-color:var(--color-textfield-border-error)}.c-select--disabled .c-select__trigger{cursor:not-allowed;border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-background-disabled)}.c-select--disabled .c-select__text--placeholder,.c-select--disabled .c-select__text{color:var(--color-textfield-content-disabled)}.c-select__required{color:var(--color-feedback-danger-default);margin-left:2px}.c-select__container{position:relative}.c-select__trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border:var(--size-textfield-border-width) solid var(--color-textfield-border-default);background-color:var(--color-textfield-background-default);border-radius:var(--size-textfield-border-radius);cursor:pointer;text-align:left}.c-select__trigger:hover:not(:disabled){border-color:var(--color-textfield-border-hover);background-color:var(--color-textfield-background-hover)}.c-select__trigger:focus-visible:not(:disabled){border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-select__content{flex:1;display:flex;align-items:center;min-width:0}.c-select__text{font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-textfield-content-default);display:flex;align-items:center;gap:var(--space-container-gap-xs)}.c-select__text--placeholder{color:var(--color-textfield-content-placeholder)}.c-select__tags{display:flex;flex-wrap:nowrap;gap:var(--space-component-gap-sm);align-items:center;min-width:0;overflow:hidden}.c-select__counter{background-color:var(--color-core-background-soft);color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);letter-spacing:var(--typography-label-md-default-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass", "disabled"] }, { kind: "component", type: DropdownSelectComponent, selector: "lib-dropdown-select", inputs: ["options", "variant", "selectedValues", "searchBarEnabled", "searchPlaceholder", "disabled", "cancelButtonText", "acceptButtonText", "align", "direction", "appendToBody", "autoFocus", "width"], outputs: ["optionSelected", "optionDeselected", "searchChanged", "valueChange", "cancelClicked", "acceptClicked"] }, { kind: "directive", type: DropdownSelectTriggerDirective, selector: "[libDropdownSelectTriggerFor]", inputs: ["libDropdownSelectTriggerFor"] }] });
|
|
5754
5994
|
}
|
|
5755
5995
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
5756
5996
|
type: Component,
|