@crowdfarming/oliva-ds 1.34.0 → 1.35.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.
|
@@ -2560,11 +2560,11 @@ class AlertComponent {
|
|
|
2560
2560
|
}
|
|
2561
2561
|
}
|
|
2562
2562
|
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 ]\"\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-
|
|
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"] }] });
|
|
2564
2564
|
}
|
|
2565
2565
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, decorators: [{
|
|
2566
2566
|
type: Component,
|
|
2567
|
-
args: [{ selector: 'lib-alert', imports: [NgClass, IconComponent, ButtonIconComponent], 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 ]\"\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-
|
|
2567
|
+
args: [{ selector: 'lib-alert', imports: [NgClass, IconComponent, ButtonIconComponent], 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"] }]
|
|
2568
2568
|
}] });
|
|
2569
2569
|
|
|
2570
2570
|
class ArrowsComponent {
|
|
@@ -2731,11 +2731,11 @@ class BreadcrumbComponent {
|
|
|
2731
2731
|
return all.length > 0 && item === all[all.length - 1];
|
|
2732
2732
|
}
|
|
2733
2733
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2734
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: BreadcrumbComponent, isStandalone: true, selector: "lib-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<!-- breadcrumb.component.html -->\n<nav class=\"c-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n <ul class=\"c-breadcrumb__list\">\n @for (crumb of leadingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link c-breadcrumb__link--no-url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n } @if (hiddenItems().length > 0) {\n <li class=\"c-breadcrumb__item c-breadcrumb__item--ellipsis\">\n <span\n class=\"c-breadcrumb__ellipsis\"\n tabindex=\"0\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <lib-icon name=\"dotsthree-regular\" size=\"sm\" iconBefore />\n </span>\n <ul class=\"c-breadcrumb__popover\" role=\"menu\">\n @for (crumb of hiddenItems(); track crumb.label) {\n <li class=\"c-breadcrumb__popover-item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link c-breadcrumb__link--no-url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n }\n </li>\n }\n </ul>\n <span class=\"c-breadcrumb__divider\">/</span>\n </li>\n }\n\n <!-- Trailing items -->\n @for (crumb of trailingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span class=\"c-breadcrumb__link c-breadcrumb__link--no-url\">{{\n crumb.label\n }}</span>\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".c-breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;align-items:center}.c-breadcrumb__divider{display:flex;padding:0 var(--space-component-padding-xs, .5rem);flex-direction:column;justify-content:center;align-items:center;color:var(--color-core-border-soft, #d6e0df);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-breadcrumb__item{position:relative;display:flex;align-items:center}.c-breadcrumb__item--ellipsis{cursor:pointer}.c-breadcrumb__item--ellipsis:hover .c-breadcrumb__popover,.c-breadcrumb__item--ellipsis:focus-within .c-breadcrumb__popover{display:block}.c-breadcrumb__link{text-decoration:none;color:var(--color-action-primary-content-default, #217870);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link--no-url{color:var(--color-core-content-soft, #535858);cursor:default;pointer-events:none}.c-breadcrumb__link:not(.c-breadcrumb__link--no-url):hover{color:var(--color-action-primary-content-hover, #19625b);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-breadcrumb__ellipsis{position:relative;font-size:1.25em;-webkit-user-select:none;user-select:none}.c-breadcrumb__popover{display:none;position:absolute;padding:0;top:100%;left:50%;transform:translate(-50%);transform-origin:top center;z-index:1000;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16))}.c-breadcrumb__popover-item{list-style:none}.c-breadcrumb__popover-item .c-breadcrumb__link{display:flex;height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
2734
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: BreadcrumbComponent, isStandalone: true, selector: "lib-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { crumbClick: "crumbClick" }, ngImport: i0, template: "<!-- breadcrumb.component.html -->\n<nav class=\"c-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n <ul class=\"c-breadcrumb__list\">\n @for (crumb of leadingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link c-breadcrumb__link--no-url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n } @if (hiddenItems().length > 0) {\n <li class=\"c-breadcrumb__item c-breadcrumb__item--ellipsis\">\n <span\n class=\"c-breadcrumb__ellipsis\"\n tabindex=\"0\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <lib-icon name=\"dotsthree-regular\" size=\"sm\" iconBefore />\n </span>\n <ul class=\"c-breadcrumb__popover\" role=\"menu\">\n @for (crumb of hiddenItems(); track crumb.label) {\n <li class=\"c-breadcrumb__popover-item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link c-breadcrumb__link--no-url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n }\n </li>\n }\n </ul>\n <span class=\"c-breadcrumb__divider\">/</span>\n </li>\n }\n\n <!-- Trailing items -->\n @for (crumb of trailingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span class=\"c-breadcrumb__link c-breadcrumb__link--no-url\">{{\n crumb.label\n }}</span>\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".c-breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;align-items:center}.c-breadcrumb__divider{display:flex;padding:0 var(--space-component-padding-xs, .5rem);flex-direction:column;justify-content:center;align-items:center;color:var(--color-core-border-soft, #d6e0df);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-breadcrumb__item{position:relative;display:flex;align-items:center}.c-breadcrumb__item--ellipsis{cursor:pointer}.c-breadcrumb__item--ellipsis:hover .c-breadcrumb__popover,.c-breadcrumb__item--ellipsis:focus-within .c-breadcrumb__popover{display:block}.c-breadcrumb__link{text-decoration:none;color:var(--color-action-primary-content-default, #217870);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem);white-space:nowrap}.c-breadcrumb__link--no-url{color:var(--color-core-content-soft, #535858);cursor:default;pointer-events:none}.c-breadcrumb__link:not(.c-breadcrumb__link--no-url):hover{color:var(--color-action-primary-content-hover, #19625b);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-breadcrumb__ellipsis{position:relative;font-size:1.25em;-webkit-user-select:none;user-select:none}.c-breadcrumb__popover{display:none;position:absolute;padding:0;top:100%;left:50%;transform:translate(-50%);transform-origin:top center;z-index:1000;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16))}.c-breadcrumb__popover-item{list-style:none}.c-breadcrumb__popover-item .c-breadcrumb__link{display:flex;height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }] });
|
|
2735
2735
|
}
|
|
2736
2736
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
2737
2737
|
type: Component,
|
|
2738
|
-
args: [{ selector: 'lib-breadcrumb', imports: [CommonModule, RouterModule, IconComponent], template: "<!-- breadcrumb.component.html -->\n<nav class=\"c-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n <ul class=\"c-breadcrumb__list\">\n @for (crumb of leadingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link c-breadcrumb__link--no-url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n } @if (hiddenItems().length > 0) {\n <li class=\"c-breadcrumb__item c-breadcrumb__item--ellipsis\">\n <span\n class=\"c-breadcrumb__ellipsis\"\n tabindex=\"0\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <lib-icon name=\"dotsthree-regular\" size=\"sm\" iconBefore />\n </span>\n <ul class=\"c-breadcrumb__popover\" role=\"menu\">\n @for (crumb of hiddenItems(); track crumb.label) {\n <li class=\"c-breadcrumb__popover-item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link c-breadcrumb__link--no-url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n }\n </li>\n }\n </ul>\n <span class=\"c-breadcrumb__divider\">/</span>\n </li>\n }\n\n <!-- Trailing items -->\n @for (crumb of trailingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span class=\"c-breadcrumb__link c-breadcrumb__link--no-url\">{{\n crumb.label\n }}</span>\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".c-breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;align-items:center}.c-breadcrumb__divider{display:flex;padding:0 var(--space-component-padding-xs, .5rem);flex-direction:column;justify-content:center;align-items:center;color:var(--color-core-border-soft, #d6e0df);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-breadcrumb__item{position:relative;display:flex;align-items:center}.c-breadcrumb__item--ellipsis{cursor:pointer}.c-breadcrumb__item--ellipsis:hover .c-breadcrumb__popover,.c-breadcrumb__item--ellipsis:focus-within .c-breadcrumb__popover{display:block}.c-breadcrumb__link{text-decoration:none;color:var(--color-action-primary-content-default, #217870);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link--no-url{color:var(--color-core-content-soft, #535858);cursor:default;pointer-events:none}.c-breadcrumb__link:not(.c-breadcrumb__link--no-url):hover{color:var(--color-action-primary-content-hover, #19625b);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-breadcrumb__ellipsis{position:relative;font-size:1.25em;-webkit-user-select:none;user-select:none}.c-breadcrumb__popover{display:none;position:absolute;padding:0;top:100%;left:50%;transform:translate(-50%);transform-origin:top center;z-index:1000;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16))}.c-breadcrumb__popover-item{list-style:none}.c-breadcrumb__popover-item .c-breadcrumb__link{display:flex;height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0))}\n"] }]
|
|
2738
|
+
args: [{ selector: 'lib-breadcrumb', imports: [CommonModule, RouterModule, IconComponent], template: "<!-- breadcrumb.component.html -->\n<nav class=\"c-breadcrumb\" role=\"navigation\" aria-label=\"Breadcrumb\">\n <ul class=\"c-breadcrumb__list\">\n @for (crumb of leadingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link c-breadcrumb__link--no-url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n } @if (hiddenItems().length > 0) {\n <li class=\"c-breadcrumb__item c-breadcrumb__item--ellipsis\">\n <span\n class=\"c-breadcrumb__ellipsis\"\n tabindex=\"0\"\n aria-haspopup=\"true\"\n aria-expanded=\"false\"\n >\n <lib-icon name=\"dotsthree-regular\" size=\"sm\" iconBefore />\n </span>\n <ul class=\"c-breadcrumb__popover\" role=\"menu\">\n @for (crumb of hiddenItems(); track crumb.label) {\n <li class=\"c-breadcrumb__popover-item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span\n class=\"c-breadcrumb__link c-breadcrumb__link--no-url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n (keyup.enter)=\"onCrumbClick(crumb, $event)\"\n tabindex=\"0\"\n role=\"button\"\n >{{ crumb.label }}</span\n >\n }\n </li>\n }\n </ul>\n <span class=\"c-breadcrumb__divider\">/</span>\n </li>\n }\n\n <!-- Trailing items -->\n @for (crumb of trailingItems(); track crumb.label) {\n <li class=\"c-breadcrumb__item\">\n @if (crumb.url) {\n <a\n class=\"c-breadcrumb__link\"\n [routerLink]=\"crumb.url\"\n (click)=\"onCrumbClick(crumb, $event)\"\n [attr.aria-current]=\"isLast(crumb) ? 'page' : null\"\n >{{ crumb.label }}</a\n >\n } @else {\n <span class=\"c-breadcrumb__link c-breadcrumb__link--no-url\">{{\n crumb.label\n }}</span>\n } @if (!isLast(crumb)) {\n <span class=\"c-breadcrumb__divider\">/</span>\n }\n </li>\n }\n </ul>\n</nav>\n", styles: [".c-breadcrumb__list{list-style:none;margin:0;padding:0;display:flex;align-items:center}.c-breadcrumb__divider{display:flex;padding:0 var(--space-component-padding-xs, .5rem);flex-direction:column;justify-content:center;align-items:center;color:var(--color-core-border-soft, #d6e0df);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}.c-breadcrumb__item{position:relative;display:flex;align-items:center}.c-breadcrumb__item--ellipsis{cursor:pointer}.c-breadcrumb__item--ellipsis:hover .c-breadcrumb__popover,.c-breadcrumb__item--ellipsis:focus-within .c-breadcrumb__popover{display:block}.c-breadcrumb__link{text-decoration:none;color:var(--color-action-primary-content-default, #217870);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem);white-space:nowrap}.c-breadcrumb__link--no-url{color:var(--color-core-content-soft, #535858);cursor:default;pointer-events:none}.c-breadcrumb__link:not(.c-breadcrumb__link--no-url):hover{color:var(--color-action-primary-content-hover, #19625b);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-breadcrumb__link:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-breadcrumb__ellipsis{position:relative;font-size:1.25em;-webkit-user-select:none;user-select:none}.c-breadcrumb__popover{display:none;position:absolute;padding:0;top:100%;left:50%;transform:translate(-50%);transform-origin:top center;z-index:1000;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16))}.c-breadcrumb__popover-item{list-style:none}.c-breadcrumb__popover-item .c-breadcrumb__link{display:flex;height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0))}\n"] }]
|
|
2739
2739
|
}] });
|
|
2740
2740
|
|
|
2741
2741
|
class ButtonComponent {
|
|
@@ -3159,7 +3159,7 @@ class ChipsComponent {
|
|
|
3159
3159
|
if (isSingle) {
|
|
3160
3160
|
updatedOptions = currentOptions.map((currentOption) => ({
|
|
3161
3161
|
...currentOption,
|
|
3162
|
-
selected: currentOption.value === option.value
|
|
3162
|
+
selected: currentOption.value === option.value,
|
|
3163
3163
|
}));
|
|
3164
3164
|
}
|
|
3165
3165
|
else {
|
|
@@ -3170,11 +3170,11 @@ class ChipsComponent {
|
|
|
3170
3170
|
this.optionsChange.emit(updatedOptions);
|
|
3171
3171
|
}
|
|
3172
3172
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3173
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ChipsComponent, isStandalone: true, selector: "lib-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <label class=\"c-chip__label\" [for]=\"'chip-' + option.value\">\n <input\n [type]=\"isSingleSelection() ? 'radio' : 'checkbox'\"\n [name]=\"isSingleSelection() ? 'chip-group' : null\"\n [id]=\"'chip-' + option.value\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [checked]=\"option.selected\"\n (change)=\"toggle(option)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-
|
|
3173
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ChipsComponent, isStandalone: true, selector: "lib-chips", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelection: { classPropertyName: "isSingleSelection", publicName: "isSingleSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionsChange: "optionsChange" }, ngImport: i0, template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <label class=\"c-chip__label\" [for]=\"'chip-' + option.value\">\n <input\n [type]=\"isSingleSelection() ? 'radio' : 'checkbox'\"\n [name]=\"isSingleSelection() ? 'chip-group' : null\"\n [id]=\"'chip-' + option.value\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [checked]=\"option.selected\"\n (change)=\"toggle(option)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-flex;align-items:center;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer;white-space:nowrap}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:has(.c-chip__input:focus-visible){box-shadow:var(--focus-outset);outline:none}.c-chip__label:active{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:has(input:checked):active{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{position:absolute;opacity:0}.c-chip__input:hover{cursor:pointer}\n"] });
|
|
3174
3174
|
}
|
|
3175
3175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
3176
3176
|
type: Component,
|
|
3177
|
-
args: [{ selector: 'lib-chips', template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <label class=\"c-chip__label\" [for]=\"'chip-' + option.value\">\n <input\n [type]=\"isSingleSelection() ? 'radio' : 'checkbox'\"\n [name]=\"isSingleSelection() ? 'chip-group' : null\"\n [id]=\"'chip-' + option.value\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [checked]=\"option.selected\"\n (change)=\"toggle(option)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-
|
|
3177
|
+
args: [{ selector: 'lib-chips', template: "<div role=\"group\" class=\"c-chip\" aria-label=\"Opciones de filtro\">\n @for (option of options(); track option.value) {\n <label class=\"c-chip__label\" [for]=\"'chip-' + option.value\">\n <input\n [type]=\"isSingleSelection() ? 'radio' : 'checkbox'\"\n [name]=\"isSingleSelection() ? 'chip-group' : null\"\n [id]=\"'chip-' + option.value\"\n [disabled]=\"option.disabled\"\n [value]=\"option.value\"\n [checked]=\"option.selected\"\n (change)=\"toggle(option)\"\n class=\"c-chip__input\"\n />\n <span class=\"c-chip__text\">{{ option.label }}</span>\n </label>\n }\n</div>\n", styles: [".c-chip{display:inline-flex;align-items:center;gap:var(--space-container-stack-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-chip__label{display:inline-flex;align-items:center;height:40px;box-sizing:border-box;padding:var(--space-component-padding-sm) var(--space-component-padding-md);background-color:var(--color-action-primary-background-default);border:var(--size-border-width-sm) solid var(--color-action-primary-border-default);border-radius:var(--size-border-radius-full);color:var(--color-action-primary-content-default);cursor:pointer;white-space:nowrap}.c-chip__label:hover{background-color:var(--color-action-primary-background-hover);border-color:var(--color-action-primary-border-hover);color:var(--color-action-primary-content-hover)}.c-chip__label:has(.c-chip__input:focus-visible){box-shadow:var(--focus-outset);outline:none}.c-chip__label:active{background-color:var(--color-action-primary-background-pressed);border-color:var(--color-action-primary-border-pressed);color:var(--color-action-primary-content-pressed)}.c-chip__label:has(input:disabled){background-color:var(--color-action-primary-background-disabled);border-color:var(--color-action-primary-border-disabled);color:var(--color-action-primary-content-disabled);cursor:not-allowed}.c-chip__label:has(input:checked){background-color:var(--color-action-primary-selected-background-default);color:var(--color-button-primary-content-default);border-color:var(--color-action-primary-selected-border-default)}.c-chip__label:has(input:checked):hover{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-border-hover)}.c-chip__label:has(input:checked):focus-visible{box-shadow:var(--focus-outset);outline:none}.c-chip__label:has(input:checked):active{background-color:var(--color-action-primary-selected-background-pressed);border-color:var(--color-action-primary-selected-border-pressed)}.c-chip__input{position:absolute;opacity:0}.c-chip__input:hover{cursor:pointer}\n"] }]
|
|
3178
3178
|
}] });
|
|
3179
3179
|
|
|
3180
3180
|
class OverlayComponent {
|
|
@@ -6853,11 +6853,11 @@ class ToastComponent {
|
|
|
6853
6853
|
}
|
|
6854
6854
|
}
|
|
6855
6855
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6856
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ToastComponent, isStandalone: true, selector: "lib-toast", inputs: { variant: "variant", text: "text", title: "title", time: "time", extraClass: "extraClass", showIcon: "showIcon", removable: "removable" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (visibility) {\n<div\n class=\"c-toast\"\n [ngClass]=\"[\n 'c-toast',\n variant ? 'c-toast--' + variant : '',\n extraClass ? extraClass : '',\n closeActive ? 'c-toast--hide' : ''\n ]\"\n>\n @if (showIcon) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n <div class=\"c-toast__content\">\n <p class=\"c-toast__title\">{{ title }}</p>\n <p class=\"c-toast__text\">{{ text }}</p>\n </div>\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-toast__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n >\n </lib-button-icon>\n }\n</div>\n}\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.c-toast{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:150;padding:var(--space-component-padding-lg) var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-floating);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-toast__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-toast__close{justify-self:flex-end;margin:0 0 0 auto}.c-toast__title{color:var(--color-core-content-default);font-family:var(--typography-
|
|
6856
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ToastComponent, isStandalone: true, selector: "lib-toast", inputs: { variant: "variant", text: "text", title: "title", time: "time", extraClass: "extraClass", showIcon: "showIcon", removable: "removable" }, outputs: { closed: "closed" }, ngImport: i0, template: "@if (visibility) {\n<div\n class=\"c-toast\"\n [ngClass]=\"[\n 'c-toast',\n variant ? 'c-toast--' + variant : '',\n extraClass ? extraClass : '',\n closeActive ? 'c-toast--hide' : '',\n !title ? 'c-toast--no-title' : '',\n !text ? 'c-toast--no-text' : ''\n ]\"\n>\n @if (showIcon) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n <div class=\"c-toast__content\">\n @if (title) {\n <p class=\"c-toast__title\">{{ title }}</p>\n } @if (text) {\n <p class=\"c-toast__text\">{{ text }}</p>\n }\n </div>\n @if (removable) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-toast__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n >\n </lib-button-icon>\n }\n</div>\n}\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.c-toast{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:150;padding:var(--space-component-padding-lg) var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-floating);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-toast__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-toast__close{justify-self:flex-end;margin:0 0 0 auto}.c-toast__title{color:var(--color-core-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);margin:0 0 auto}.c-toast__text{color:var(--color-core-content-soft);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);margin:0 0 auto}.c-toast--hide{animation:toast-out .3s ease forwards}.c-toast--no-title,.c-toast--no-text{align-items:center}@media (min-width: 48rem){.c-toast{width:336px}}\n"], dependencies: [{ 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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
6857
6857
|
}
|
|
6858
6858
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ToastComponent, decorators: [{
|
|
6859
6859
|
type: Component,
|
|
6860
|
-
args: [{ selector: 'lib-toast', imports: [IconComponent, ButtonIconComponent, NgClass], template: "@if (visibility) {\n<div\n class=\"c-toast\"\n [ngClass]=\"[\n 'c-toast',\n variant ? 'c-toast--' + variant : '',\n extraClass ? extraClass : '',\n closeActive ? 'c-toast--hide' : ''\n ]\"\n>\n @if (showIcon) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n <div class=\"c-toast__content\">\n <p class=\"c-toast__title\">{{ title }}</p>\n <p class=\"c-toast__text\">{{ text }}</p>\n </div>\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-toast__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n >\n </lib-button-icon>\n }\n</div>\n}\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.c-toast{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:150;padding:var(--space-component-padding-lg) var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-floating);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-toast__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-toast__close{justify-self:flex-end;margin:0 0 0 auto}.c-toast__title{color:var(--color-core-content-default);font-family:var(--typography-
|
|
6860
|
+
args: [{ selector: 'lib-toast', imports: [IconComponent, ButtonIconComponent, NgClass], template: "@if (visibility) {\n<div\n class=\"c-toast\"\n [ngClass]=\"[\n 'c-toast',\n variant ? 'c-toast--' + variant : '',\n extraClass ? extraClass : '',\n closeActive ? 'c-toast--hide' : '',\n !title ? 'c-toast--no-title' : '',\n !text ? 'c-toast--no-text' : ''\n ]\"\n>\n @if (showIcon) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n <div class=\"c-toast__content\">\n @if (title) {\n <p class=\"c-toast__title\">{{ title }}</p>\n } @if (text) {\n <p class=\"c-toast__text\">{{ text }}</p>\n }\n </div>\n @if (removable) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-toast__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n >\n </lib-button-icon>\n }\n</div>\n}\n", styles: ["@keyframes toast-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes toast-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}.c-toast{position:fixed;width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;top:0;right:0;margin:var(--space-component-padding-lg);z-index:150;padding:var(--space-component-padding-lg) var(--space-component-padding-md);border-radius:var(--size-textfield-border-radius);border:var(--size-border-width-sm) solid var(--color-core-border-soft);background:var(--color-core-background-surface-floating);gap:var(--space-component-gap-md);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft),0 4px 8px 0 var(--color-effect-shadow-soft);display:flex;align-items:flex-start;transition:opacity .3s ease,transform .3s ease;animation:toast-in .3s ease forwards}.c-toast__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:var(--space-component-gap-sm)}.c-toast__close{justify-self:flex-end;margin:0 0 0 auto}.c-toast__title{color:var(--color-core-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);margin:0 0 auto}.c-toast__text{color:var(--color-core-content-soft);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);margin:0 0 auto}.c-toast--hide{animation:toast-out .3s ease forwards}.c-toast--no-title,.c-toast--no-text{align-items:center}@media (min-width: 48rem){.c-toast{width:336px}}\n"] }]
|
|
6861
6861
|
}], propDecorators: { variant: [{
|
|
6862
6862
|
type: Input
|
|
6863
6863
|
}], text: [{
|