@crowdfarming/oliva-ds 1.36.0 → 1.37.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/crowdfarming-oliva-ds.mjs +71 -14
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/alert/src/lib/alert/alert.component.d.ts +2 -1
- package/lib/modal/src/lib/modal/modal.component.d.ts +6 -0
- package/lib/segmented-control/src/lib/segmented-control/segmented-control.component.d.ts +3 -0
- package/lib/select/src/lib/select/select.component.d.ts +6 -1
- package/package.json +1 -1
|
@@ -2525,6 +2525,7 @@ class AlertComponent {
|
|
|
2525
2525
|
extraClass = input('');
|
|
2526
2526
|
showIcon = input(true);
|
|
2527
2527
|
removable = input(true);
|
|
2528
|
+
iconName = input('');
|
|
2528
2529
|
visibility = true;
|
|
2529
2530
|
closeActive = false;
|
|
2530
2531
|
close() {
|
|
@@ -2532,6 +2533,10 @@ class AlertComponent {
|
|
|
2532
2533
|
this.visibility = false;
|
|
2533
2534
|
}
|
|
2534
2535
|
getIconName() {
|
|
2536
|
+
// If variant is neutral and a custom icon is provided, use it
|
|
2537
|
+
if (this.variant() === 'neutral' && this.iconName()) {
|
|
2538
|
+
return this.iconName();
|
|
2539
|
+
}
|
|
2535
2540
|
switch (this.variant()) {
|
|
2536
2541
|
case 'danger':
|
|
2537
2542
|
return 'warning-regular';
|
|
@@ -2560,7 +2565,7 @@ class AlertComponent {
|
|
|
2560
2565
|
}
|
|
2561
2566
|
}
|
|
2562
2567
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2563
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visibility) {\n<div\n role=\"alert\"\n [ngClass]=\"[\n 'c-alert',\n variant() ? 'c-alert--' + variant() : '',\n extraClass() ? extraClass() : '',\n closeActive ? 'c-alert--hide' : '',\n !title() ? 'c-alert--no-title' : '',\n !text() ? 'c-alert--no-text' : ''\n ]\"\n>\n @if (showIcon()) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n\n <div class=\"c-alert__content\">\n @if (title()) {\n <p class=\"c-alert__title\">{{ title() }}</p>\n } @if (text()) {\n <p class=\"c-alert__text\">{{ text() }}</p>\n }\n </div>\n\n @if (removable()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n />\n }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);display:flex;align-items:flex-start;gap:var(--space-component-gap-md)}.c-alert--danger{border-color:var(--color-feedback-danger-surface-border);background:var(--color-feedback-danger-surface-background)}.c-alert--success{border-color:var(--color-feedback-success-surface-border);background:var(--color-feedback-success-surface-background)}.c-alert--warning{border-color:var(--color-feedback-warning-surface-border);background:var(--color-feedback-warning-surface-background)}.c-alert--info{border-color:var(--color-feedback-info-surface-border);background:var(--color-feedback-info-surface-background)}.c-alert--neutral{border-color:var(--color-core-border-default);background:var(--color-core-background-neutral-soft)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-soft);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);margin:0 0 auto}.c-alert--no-title,.c-alert--no-text{align-items: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: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
2568
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visibility) {\n<div\n role=\"alert\"\n [ngClass]=\"[\n 'c-alert',\n variant() ? 'c-alert--' + variant() : '',\n extraClass() ? extraClass() : '',\n closeActive ? 'c-alert--hide' : '',\n !title() ? 'c-alert--no-title' : '',\n !text() ? 'c-alert--no-text' : ''\n ]\"\n>\n @if (showIcon()) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n\n <div class=\"c-alert__content\">\n @if (title()) {\n <p class=\"c-alert__title\">{{ title() }}</p>\n } @if (text()) {\n <p class=\"c-alert__text\">{{ text() }}</p>\n }\n </div>\n\n @if (removable()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n />\n }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-raised);display:flex;align-items:flex-start;gap:var(--space-component-gap-md)}.c-alert--danger{border-color:var(--color-feedback-danger-surface-border);background:var(--color-feedback-danger-surface-background)}.c-alert--success{border-color:var(--color-feedback-success-surface-border);background:var(--color-feedback-success-surface-background)}.c-alert--warning{border-color:var(--color-feedback-warning-surface-border);background:var(--color-feedback-warning-surface-background)}.c-alert--info{border-color:var(--color-feedback-info-surface-border);background:var(--color-feedback-info-surface-background)}.c-alert--neutral{border-color:var(--color-core-border-default);background:var(--color-core-background-neutral-soft)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-alert__close{justify-self:flex-end;margin:0 0 0 auto}.c-alert__title{color:var(--color-core-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);margin:0 0 auto}.c-alert__text{color:var(--color-core-content-soft);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);margin:0 0 auto}.c-alert--no-title,.c-alert--no-text{align-items: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: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
2564
2569
|
}
|
|
2565
2570
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, decorators: [{
|
|
2566
2571
|
type: Component,
|
|
@@ -4404,7 +4409,7 @@ class InputNumberComponent {
|
|
|
4404
4409
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
4405
4410
|
multi: true,
|
|
4406
4411
|
},
|
|
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"] }] });
|
|
4412
|
+
], 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__input{text-align:left}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { 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"] }] });
|
|
4408
4413
|
}
|
|
4409
4414
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
4410
4415
|
type: Component,
|
|
@@ -4420,7 +4425,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4420
4425
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
4421
4426
|
multi: true,
|
|
4422
4427
|
},
|
|
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"] }]
|
|
4428
|
+
], 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__input{text-align:left}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
4424
4429
|
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
4425
4430
|
type: Input
|
|
4426
4431
|
}], placeholder: [{
|
|
@@ -4982,12 +4987,14 @@ class ModalComponent {
|
|
|
4982
4987
|
_primaryButtonSignal = signal(undefined);
|
|
4983
4988
|
_secondaryButtonSignal = signal(undefined);
|
|
4984
4989
|
_closeOnBackdropClickSignal = signal(true);
|
|
4990
|
+
_isContentScrollableSignal = signal(false);
|
|
4985
4991
|
modalContentRef = viewChild('modalContent');
|
|
4986
4992
|
constructor() {
|
|
4987
4993
|
effect(() => {
|
|
4988
4994
|
if (this.isModalOpen()) {
|
|
4989
4995
|
this.focusFirstElement();
|
|
4990
4996
|
this.disableBodyScroll();
|
|
4997
|
+
this.checkContentScrollable();
|
|
4991
4998
|
}
|
|
4992
4999
|
else {
|
|
4993
5000
|
this.enableBodyScroll();
|
|
@@ -5021,6 +5028,9 @@ class ModalComponent {
|
|
|
5021
5028
|
getCloseOnBackdropClick() {
|
|
5022
5029
|
return this._closeOnBackdropClickSignal();
|
|
5023
5030
|
}
|
|
5031
|
+
isContentScrollable() {
|
|
5032
|
+
return this._isContentScrollableSignal();
|
|
5033
|
+
}
|
|
5024
5034
|
setOpen(open) {
|
|
5025
5035
|
this._isOpenSignal.set(open);
|
|
5026
5036
|
}
|
|
@@ -5108,7 +5118,7 @@ class ModalComponent {
|
|
|
5108
5118
|
if (!modalContentRef)
|
|
5109
5119
|
return;
|
|
5110
5120
|
const modalElement = modalContentRef.nativeElement;
|
|
5111
|
-
const focusableSelector = 'input, select, textarea
|
|
5121
|
+
const focusableSelector = 'input, select, textarea';
|
|
5112
5122
|
const firstFocusableElement = modalElement.querySelector(focusableSelector);
|
|
5113
5123
|
if (firstFocusableElement) {
|
|
5114
5124
|
firstFocusableElement.focus();
|
|
@@ -5139,12 +5149,47 @@ class ModalComponent {
|
|
|
5139
5149
|
window.scrollTo(0, parseInt(scrollY));
|
|
5140
5150
|
}
|
|
5141
5151
|
}
|
|
5152
|
+
// Method to check if the content is scrollable, so that the header and footer get a colored border
|
|
5153
|
+
checkContentScrollable() {
|
|
5154
|
+
setTimeout(() => {
|
|
5155
|
+
const modalContentRef = this.modalContentRef();
|
|
5156
|
+
if (!modalContentRef)
|
|
5157
|
+
return;
|
|
5158
|
+
const element = modalContentRef.nativeElement;
|
|
5159
|
+
const height = element.clientHeight;
|
|
5160
|
+
const hasReachedMaxHeight = height >= 812;
|
|
5161
|
+
this._isContentScrollableSignal.set(hasReachedMaxHeight);
|
|
5162
|
+
}, 20);
|
|
5163
|
+
}
|
|
5164
|
+
getFooterClasses() {
|
|
5165
|
+
const c = [
|
|
5166
|
+
'c-modal__content__footer',
|
|
5167
|
+
this.isContentScrollable() ? 'c-modal__content__footer--scrollable' : '',
|
|
5168
|
+
];
|
|
5169
|
+
return c.filter(Boolean).join(' ');
|
|
5170
|
+
}
|
|
5171
|
+
getHeaderClasses() {
|
|
5172
|
+
const c = [
|
|
5173
|
+
'c-modal__content__header',
|
|
5174
|
+
this.isContentScrollable() ? 'c-modal__content__header--scrollable' : '',
|
|
5175
|
+
];
|
|
5176
|
+
return c.filter(Boolean).join(' ');
|
|
5177
|
+
}
|
|
5178
|
+
getContentBodyContentClasses() {
|
|
5179
|
+
const c = [
|
|
5180
|
+
'c-modal__content__body__content',
|
|
5181
|
+
this.isContentScrollable()
|
|
5182
|
+
? 'c-modal__content__body__content--scrollable'
|
|
5183
|
+
: '',
|
|
5184
|
+
];
|
|
5185
|
+
return c.filter(Boolean).join(' ');
|
|
5186
|
+
}
|
|
5142
5187
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5143
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div
|
|
5188
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ModalComponent, isStandalone: true, selector: "lib-modal", viewQueries: [{ propertyName: "modalContentRef", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div [ngClass]=\"getHeaderClasses()\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n <!-- Body Content -->\n <div [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);overflow:hidden;min-height:0}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}.c-modal__content__footer__button.primary{order:1}.c-modal__content__footer__button.secondary{order:2}}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0);perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-height:100vh;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "skeletonActive", "variant", "size", "loadingText", "fullWidth", "iconBefore", "iconAfter", "type"], outputs: ["clicked"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
5144
5189
|
}
|
|
5145
5190
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ModalComponent, decorators: [{
|
|
5146
5191
|
type: Component,
|
|
5147
|
-
args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div
|
|
5192
|
+
args: [{ selector: 'lib-modal', imports: [NgClass, ButtonComponent, ButtonIconComponent], template: "@if (isModalOpen()) {\n<div class=\"c-modal\" [ngClass]=\"getClasses()\">\n <!-- Backdrop -->\n <div\n class=\"c-modal__backdrop\"\n [ngClass]=\"getBackdropClasses()\"\n (click)=\"onBackdropClick()\"\n (keydown.escape)=\"onEscapeKey()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close modal\"\n ></div>\n\n <!-- Modal Content -->\n <div\n #modalContent\n class=\"c-modal__content\"\n [ngClass]=\"getContentClasses()\"\n (keydown.escape)=\"onEscapeKey()\"\n role=\"dialog\"\n tabindex=\"-1\"\n [attr.aria-labelledby]=\"getTitle() ? 'modal-title' : null\"\n [attr.aria-describedby]=\"getDescription() ? 'modal-description' : null\"\n >\n <!-- Header -->\n @if (getTitle() || getShowCloseButton()) {\n <div [ngClass]=\"getHeaderClasses()\">\n <div class=\"c-modal__content__header__left\">\n @if (getTitle()) {\n <p id=\"modal-title\" class=\"c-modal__content__header__title\">\n {{ getTitle() }}\n </p>\n }\n </div>\n @if (getShowCloseButton()) {\n <div class=\"c-modal__content__header__right\">\n <lib-button-icon\n iconName=\"x-regular\"\n size=\"sm\"\n variant=\"neutral\"\n (click)=\"onCloseButtonClick()\"\n aria-label=\"Close modal\"\n ></lib-button-icon>\n </div>\n }\n </div>\n }\n\n <!-- Description -->\n <div class=\"c-modal__content__body\">\n <!-- Body Content -->\n <div [ngClass]=\"getContentBodyContentClasses()\">\n @if (getDescription()) {\n <div id=\"modal-description\" class=\"c-modal__content__body__description\">\n <p>{{ getDescription() }}</p>\n </div>\n }\n <ng-content></ng-content>\n </div>\n </div>\n\n <!-- Footer with Buttons -->\n @if (getPrimaryButton() || getSecondaryButton()) {\n <div [ngClass]=\"getFooterClasses()\">\n @if (getSecondaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button secondary\"\n [text]=\"getSecondaryButton()!.text\"\n [variant]=\"getSecondaryButton()!.variant\"\n [disabled]=\"getSecondaryButton()!.disabled ?? false\"\n [loading]=\"getSecondaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onSecondaryButtonClick()\"\n ></lib-button>\n } @if (getPrimaryButton()) {\n <lib-button\n class=\"c-modal__content__footer__button primary\"\n [text]=\"getPrimaryButton()!.text\"\n [variant]=\"getPrimaryButton()!.variant\"\n [disabled]=\"getPrimaryButton()!.disabled ?? false\"\n [loading]=\"getPrimaryButton()!.loading ?? false\"\n [fullWidth]=\"true\"\n (clicked)=\"onPrimaryButtonClick()\"\n ></lib-button>\n }\n </div>\n }\n </div>\n</div>\n}\n", styles: [".c-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.c-modal--open{opacity:1;visibility:visible}.c-modal__content{background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) 0;box-shadow:var(--elevation-floating);border-radius:var(--size-border-radius-lg);overflow:hidden;display:flex;flex-direction:column;width:100%;box-sizing:border-box;max-height:min(812px,100vh - 128px)}.c-modal__content--open{transform:scale(1)}.c-modal__content--sm{max-width:416px}.c-modal__content--md{max-width:636px}.c-modal__content--lg{max-width:856px}.c-modal__content__header{display:flex;align-items:center;background-color:var(--color-core-background-surface-floating);padding:0 var(--space-container-padding-sm) var(--space-container-padding-sm);gap:var(--space-container-gap-sm);border-bottom:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__header--scrollable{z-index:1;border-bottom-color:var(--color-core-border-soft)}.c-modal__content__header__right{flex:1;display:flex;justify-content:flex-end}.c-modal__content__header__title{margin:0;font-family:var(--typography-label-lg-strong-family),sans-serif;font-weight:var(--typography-label-lg-strong-weight);font-size:var(--typography-label-lg-strong-size);line-height:var(--typography-label-lg-strong-line-height);letter-spacing:var(--typography-label-lg-strong-letter-spacing);color:var(--color-core-content-default)}.c-modal__content__body{display:flex;flex-direction:column;flex:1;gap:var(--space-container-gap-md);overflow:hidden;min-height:0}.c-modal__content__body__description p{margin:0;color:var(--color-core-content-soft);font-family:var(--typography-body-md-family),sans-serif;font-weight:var(--typography-body-md-weight);font-size:var(--typography-body-md-size);line-height:var(--typography-body-md-line-height);letter-spacing:var(--typography-body-md-letter-spacing)}.c-modal__content__body__content{padding:0 var(--space-container-padding-sm);display:flex;flex-direction:column;gap:var(--space-container-gap-md);overflow-y:auto;flex:1;min-height:0}.c-modal__content__body__content--scrollable{padding:var(--space-container-padding-sm)}.c-modal__content__footer{display:flex;justify-content:flex-end;gap:var(--space-component-gap-md);background-color:var(--color-core-background-surface-floating);padding:var(--space-container-padding-sm) var(--space-container-padding-sm) 0;border-top:var(--size-border-width-sm) solid transparent;transition:border-color .15s ease-in-out}.c-modal__content__footer--scrollable{z-index:1;border-top-color:var(--color-core-border-soft)}@media (max-width: 768px){.c-modal__content__footer{flex-direction:column;gap:var(--space-component-gap-md)}}@media (max-width: 768px){.c-modal__content__footer__button{width:100%}.c-modal__content__footer__button.primary{order:1}.c-modal__content__footer__button.secondary{order:2}}.c-modal__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .2s ease-in-out}.c-modal__backdrop--open{opacity:1}@media (max-width: 768px){.c-modal{align-items:flex-end}.c-modal--sm .c-modal__content,.c-modal--md .c-modal__content{position:fixed;bottom:0;left:0;right:0;width:100%;max-width:none;max-height:100vh;transform:translateY(100%);transition:transform .3s ease-in-out;border-bottom-left-radius:0;border-bottom-right-radius:0}.c-modal--sm.c-modal--open .c-modal__content,.c-modal--md.c-modal--open .c-modal__content{transform:translateY(0);perspective:none;contain:none}.c-modal--lg{align-items:stretch}.c-modal--lg .c-modal__content{position:fixed;inset:0;width:100%;height:100%;max-height:100vh;max-width:none;border-radius:0;transform:scale(.95);transition:transform .3s ease-in-out}.c-modal--lg.c-modal--open .c-modal__content{transform:scale(1)}}\n"] }]
|
|
5148
5193
|
}], ctorParameters: () => [] });
|
|
5149
5194
|
|
|
5150
5195
|
class ModalService {
|
|
@@ -5706,9 +5751,16 @@ class SegmentedControlComponent {
|
|
|
5706
5751
|
isSelected(option) {
|
|
5707
5752
|
return this.selectedValue === option.value;
|
|
5708
5753
|
}
|
|
5754
|
+
/** Obtiene el color del icono según el estado */
|
|
5755
|
+
getIconColor(option) {
|
|
5756
|
+
if (this.isSelected(option)) {
|
|
5757
|
+
return 'action-primary-selected-content-default';
|
|
5758
|
+
}
|
|
5759
|
+
return 'action-primary-content-default';
|
|
5760
|
+
}
|
|
5709
5761
|
/** Manejo simple de flechas izquierda/derecha */
|
|
5710
5762
|
onKeydown(event) {
|
|
5711
|
-
const idx = this.options.findIndex(o => this.isSelected(o));
|
|
5763
|
+
const idx = this.options.findIndex((o) => this.isSelected(o));
|
|
5712
5764
|
if (event.key === 'ArrowRight' && idx < this.options.length - 1) {
|
|
5713
5765
|
this.onSelect(this.options[idx + 1]);
|
|
5714
5766
|
event.preventDefault();
|
|
@@ -5719,11 +5771,11 @@ class SegmentedControlComponent {
|
|
|
5719
5771
|
}
|
|
5720
5772
|
}
|
|
5721
5773
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5722
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SegmentedControlComponent, isStandalone: true, selector: "lib-segmented-control", inputs: { options: "options", selectedValue: "selectedValue", fill: "fill" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div
|
|
5774
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SegmentedControlComponent, isStandalone: true, selector: "lib-segmented-control", inputs: { options: "options", selectedValue: "selectedValue", fill: "fill" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{ 'c-segmented-control': true, 'c-segmented-control--fill': fill }\"\n>\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n <lib-icon\n *ngIf=\"option.iconName\"\n [name]=\"option.iconName\"\n size=\"sm\"\n [color]=\"getIconColor(option)\"\n ></lib-icon>\n {{ option.label }}\n </label>\n</div>\n", styles: ["@charset \"UTF-8\";.c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{position:relative;width:100%;padding:var(--space-component-padding-sm);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);text-align:center;font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-action-primary-content-default);display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-xs)}.c-segmented-control__item lib-icon{flex-shrink:0}.c-segmented-control__item:not(:last-child){border-right:none}.c-segmented-control__item:first-child{border-radius:12px 0 0 12px}.c-segmented-control__item:last-child{border-radius:0 12px 12px 0}.c-segmented-control__item:hover\\a0 {background-color:var(--color-action-primary-background-hover);color:var(--color-action-primary-content-hover)}.c-segmented-control__item:active{background-color:var(--color-action-primary-background-pressed);color:var(--color-core-content-default)}.c-segmented-control__item:selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item:focus-visible{border:var(--size-border-width-sm) solid var(--color-decorative-primary-default);outline:none}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-action-primary-selected-content-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
5723
5775
|
}
|
|
5724
5776
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
5725
5777
|
type: Component,
|
|
5726
|
-
args: [{ selector: 'lib-segmented-control', imports: [CommonModule], template: "<div
|
|
5778
|
+
args: [{ selector: 'lib-segmented-control', imports: [CommonModule, IconComponent], template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{ 'c-segmented-control': true, 'c-segmented-control--fill': fill }\"\n>\n <label\n *ngFor=\"let option of options; let i = index\"\n role=\"radio\"\n [attr.aria-checked]=\"isSelected(option)\"\n [attr.tabindex]=\"isSelected(option) ? 0 : -1\"\n class=\"c-segmented-control__item\"\n (click)=\"onSelect(option)\"\n (keydown.enter)=\"onSelect(option)\"\n (keydown.space)=\"onSelect(option)\"\n >\n <!-- Input real, oculto -->\n <input\n type=\"radio\"\n [value]=\"option.value\"\n [checked]=\"isSelected(option)\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n hidden\n />\n <lib-icon\n *ngIf=\"option.iconName\"\n [name]=\"option.iconName\"\n size=\"sm\"\n [color]=\"getIconColor(option)\"\n ></lib-icon>\n {{ option.label }}\n </label>\n</div>\n", styles: ["@charset \"UTF-8\";.c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{position:relative;width:100%;padding:var(--space-component-padding-sm);cursor:pointer;-webkit-user-select:none;user-select:none;border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);text-align:center;font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing);color:var(--color-action-primary-content-default);display:flex;align-items:center;justify-content:center;gap:var(--space-component-gap-xs)}.c-segmented-control__item lib-icon{flex-shrink:0}.c-segmented-control__item:not(:last-child){border-right:none}.c-segmented-control__item:first-child{border-radius:12px 0 0 12px}.c-segmented-control__item:last-child{border-radius:0 12px 12px 0}.c-segmented-control__item:hover\\a0 {background-color:var(--color-action-primary-background-hover);color:var(--color-action-primary-content-hover)}.c-segmented-control__item:active{background-color:var(--color-action-primary-background-pressed);color:var(--color-core-content-default)}.c-segmented-control__item:selected{background-color:var(--color-action-primary-background-selected);color:var(--color-action-primary-selected-content-default)}.c-segmented-control__item:focus-visible{border:var(--size-border-width-sm) solid var(--color-decorative-primary-default);outline:none}.c-segmented-control__item[aria-checked=true]{background:var(--color-action-primary-selected-background-default);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-action-primary-selected-content-default)}\n"] }]
|
|
5727
5779
|
}], propDecorators: { options: [{
|
|
5728
5780
|
type: Input
|
|
5729
5781
|
}], selectedValue: [{
|
|
@@ -5751,6 +5803,11 @@ class SelectComponent {
|
|
|
5751
5803
|
fullWidth = input(false);
|
|
5752
5804
|
value = input(null);
|
|
5753
5805
|
searchBarEnabled = input(false);
|
|
5806
|
+
searchPlaceholder = input('Search options...');
|
|
5807
|
+
align = input('left');
|
|
5808
|
+
direction = input('down');
|
|
5809
|
+
appendToBody = input(false);
|
|
5810
|
+
autoFocus = input(true);
|
|
5754
5811
|
valueChange = output();
|
|
5755
5812
|
// Private signals
|
|
5756
5813
|
_selectedOptions = signal([]);
|
|
@@ -5984,13 +6041,13 @@ class SelectComponent {
|
|
|
5984
6041
|
this.onChange(value);
|
|
5985
6042
|
}
|
|
5986
6043
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5987
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { options: { classPropertyName: "options", publicName: "options", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, searchBarEnabled: { classPropertyName: "searchBarEnabled", publicName: "searchBarEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
6044
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { options: { classPropertyName: "options", publicName: "options", 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 }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, isError: { classPropertyName: "isError", publicName: "isError", isSignal: true, isRequired: false, transformFunction: null }, errorText: { classPropertyName: "errorText", publicName: "errorText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", 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 }, 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 } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
5988
6045
|
{
|
|
5989
6046
|
provide: NG_VALUE_ACCESSOR,
|
|
5990
6047
|
useExisting: forwardRef(() => SelectComponent),
|
|
5991
6048
|
multi: true,
|
|
5992
6049
|
},
|
|
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]=\"
|
|
6050
|
+
], 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]=\"searchPlaceholder()\"\n [disabled]=\"disabled()\"\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"'stretch'\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\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"] }] });
|
|
5994
6051
|
}
|
|
5995
6052
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
5996
6053
|
type: Component,
|
|
@@ -6010,7 +6067,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
6010
6067
|
useExisting: forwardRef(() => SelectComponent),
|
|
6011
6068
|
multi: true,
|
|
6012
6069
|
},
|
|
6013
|
-
], 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]=\"
|
|
6070
|
+
], 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]=\"searchPlaceholder()\"\n [disabled]=\"disabled()\"\n [align]=\"align()\"\n [direction]=\"direction()\"\n [appendToBody]=\"appendToBody()\"\n [autoFocus]=\"autoFocus()\"\n [width]=\"'stretch'\"\n (searchChanged)=\"onDropdownSearchChanged($event)\"\n (valueChange)=\"onDropdownValueChange($event)\"\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"] }]
|
|
6014
6071
|
}], ctorParameters: () => [] });
|
|
6015
6072
|
|
|
6016
6073
|
/**
|
|
@@ -6636,11 +6693,11 @@ class SidebarComponent {
|
|
|
6636
6693
|
this.closed.emit();
|
|
6637
6694
|
}
|
|
6638
6695
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6639
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"c-sidebar\" [ngClass]=\"visible() ? 'c-sidebar--visible' : 'c-sidebar--hide'\">\n <!-- Backdrop -->\n <div\n class=\"c-sidebar__backdrop\"\n [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n (click)=\"close()\"\n (keydown.escape)=\"close()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close sidebar\"\n ></div>\n\n <!-- Sidebar Content -->\n <aside\n class=\"c-sidebar__content\"\n (keydown.escape)=\"close()\"\n role=\"dialog\"\n tabindex=\"-1\"\n >\n <!-- Content Container -->\n <div class=\"c-sidebar__body\">\n <ng-content></ng-content>\n </div>\n </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar--hide{pointer-events:none;transition:visibility 0s .33s;visibility:hidden}.c-sidebar--hide .c-sidebar__backdrop{opacity:0}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .33s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__body{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
6696
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: SidebarComponent, isStandalone: true, selector: "lib-sidebar", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: "<div class=\"c-sidebar\" [ngClass]=\"visible() ? 'c-sidebar--visible' : 'c-sidebar--hide'\">\n <!-- Backdrop -->\n <div\n class=\"c-sidebar__backdrop\"\n [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n (click)=\"close()\"\n (keydown.escape)=\"close()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close sidebar\"\n ></div>\n\n <!-- Sidebar Content -->\n <aside\n class=\"c-sidebar__content\"\n (keydown.escape)=\"close()\"\n role=\"dialog\"\n tabindex=\"-1\"\n >\n <!-- Content Container -->\n <div class=\"c-sidebar__body\">\n <ng-content></ng-content>\n </div>\n </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar--hide{pointer-events:none;transition:visibility 0s .33s;visibility:hidden}.c-sidebar--hide .c-sidebar__backdrop{opacity:0}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .33s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
6640
6697
|
}
|
|
6641
6698
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SidebarComponent, decorators: [{
|
|
6642
6699
|
type: Component,
|
|
6643
|
-
args: [{ selector: 'lib-sidebar', imports: [CommonModule, NgClass], template: "<div class=\"c-sidebar\" [ngClass]=\"visible() ? 'c-sidebar--visible' : 'c-sidebar--hide'\">\n <!-- Backdrop -->\n <div\n class=\"c-sidebar__backdrop\"\n [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n (click)=\"close()\"\n (keydown.escape)=\"close()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close sidebar\"\n ></div>\n\n <!-- Sidebar Content -->\n <aside\n class=\"c-sidebar__content\"\n (keydown.escape)=\"close()\"\n role=\"dialog\"\n tabindex=\"-1\"\n >\n <!-- Content Container -->\n <div class=\"c-sidebar__body\">\n <ng-content></ng-content>\n </div>\n </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar--hide{pointer-events:none;transition:visibility 0s .33s;visibility:hidden}.c-sidebar--hide .c-sidebar__backdrop{opacity:0}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .33s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__body{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start}\n"] }]
|
|
6700
|
+
args: [{ selector: 'lib-sidebar', imports: [CommonModule, NgClass], template: "<div class=\"c-sidebar\" [ngClass]=\"visible() ? 'c-sidebar--visible' : 'c-sidebar--hide'\">\n <!-- Backdrop -->\n <div\n class=\"c-sidebar__backdrop\"\n [ngClass]=\"{'c-sidebar__backdrop--open': visible()}\"\n (click)=\"close()\"\n (keydown.escape)=\"close()\"\n tabindex=\"0\"\n role=\"button\"\n aria-label=\"Close sidebar\"\n ></div>\n\n <!-- Sidebar Content -->\n <aside\n class=\"c-sidebar__content\"\n (keydown.escape)=\"close()\"\n role=\"dialog\"\n tabindex=\"-1\"\n >\n <!-- Content Container -->\n <div class=\"c-sidebar__body\">\n <ng-content></ng-content>\n </div>\n </aside>\n</div>\n", styles: [".c-sidebar{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1000}.c-sidebar--hide{pointer-events:none;transition:visibility 0s .33s;visibility:hidden}.c-sidebar--hide .c-sidebar__backdrop{opacity:0}.c-sidebar__backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--color-effect-overlay);opacity:0;transition:opacity .33s ease-in-out;z-index:999}.c-sidebar__backdrop--open{opacity:1}.c-sidebar__content{display:flex;flex-direction:column;width:100%;height:100vh;background:var(--color-core-background-surface-floating);border-right:var(--size-border-width-sm) solid var(--color-core-border-soft);box-shadow:0 4px 8px 0 var(--color-effect-shadow-soft),0 0 4px 0 var(--color-effect-shadow-soft);position:fixed;top:0;left:0;z-index:1000;transform:translate(-100%);transition:transform .33s ease-out}@media (min-width: 768px){.c-sidebar__content{width:360px;max-width:360px}}.c-sidebar--visible .c-sidebar__content{transform:translate(0)}.c-sidebar--hide .c-sidebar__content{transform:translate(-100%)}.c-sidebar__body{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;align-items:flex-start}\n"] }]
|
|
6644
6701
|
}] });
|
|
6645
6702
|
|
|
6646
6703
|
class SocialLoginComponent {
|