@crowdfarming/oliva-ds 1.71.0-rc.2 → 1.71.0-rc.3
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.
|
@@ -2662,23 +2662,23 @@ class AlertComponent {
|
|
|
2662
2662
|
getIconColor() {
|
|
2663
2663
|
switch (this.variant()) {
|
|
2664
2664
|
case 'danger':
|
|
2665
|
-
return 'feedback-danger-
|
|
2665
|
+
return 'feedback-danger-strong';
|
|
2666
2666
|
case 'warning':
|
|
2667
|
-
return 'feedback-warning-
|
|
2667
|
+
return 'feedback-warning-strong';
|
|
2668
2668
|
case 'success':
|
|
2669
|
-
return 'feedback-success-
|
|
2669
|
+
return 'feedback-success-strong';
|
|
2670
2670
|
case 'info':
|
|
2671
|
-
return 'feedback-info-
|
|
2671
|
+
return 'feedback-info-strong';
|
|
2672
2672
|
default:
|
|
2673
|
-
return '
|
|
2673
|
+
return 'feedback-neutral-strong';
|
|
2674
2674
|
}
|
|
2675
2675
|
}
|
|
2676
2676
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2677
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visibility) {\n<div\n role=\"alert\"\n [ngClass]=\"[\n 'c-alert',\n variant() ? 'c-alert--' + variant() : '',\n extraClass() ? extraClass() : '',\n closeActive ? 'c-alert--hide' : '',\n !title() ? 'c-alert--no-title' : '',\n !text() ? 'c-alert--no-text' : ''\n ]\"\n>\n @if (showIcon()) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n\n <div class=\"c-alert__content\">\n @if (title()) {\n <p class=\"c-alert__title\">{{ title() }}</p>\n } @if (text()) {\n <p class=\"c-alert__text\">{{ text() }}</p>\n }\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n\n @if (removable()) {\n <lib-button-icon\n ariaLabel=\"Close alert\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n />\n }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-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-
|
|
2677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: AlertComponent, isStandalone: true, selector: "lib-alert", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (visibility) {\n<div\n role=\"alert\"\n [ngClass]=\"[\n 'c-alert',\n variant() ? 'c-alert--' + variant() : '',\n extraClass() ? extraClass() : '',\n closeActive ? 'c-alert--hide' : '',\n !title() ? 'c-alert--no-title' : '',\n !text() ? 'c-alert--no-text' : ''\n ]\"\n>\n @if (showIcon()) {\n <lib-icon [name]=\"getIconName()\" [color]=\"getIconColor()\" size=\"lg\" />\n }\n\n <div class=\"c-alert__content\">\n @if (title()) {\n <p class=\"c-alert__title\">{{ title() }}</p>\n } @if (text()) {\n <p class=\"c-alert__text\">{{ text() }}</p>\n }\n <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n\n @if (removable()) {\n <lib-button-icon\n ariaLabel=\"Close alert\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n />\n }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-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-default);background:var(--color-feedback-danger-subtle)}.c-alert--success{border-color:var(--color-feedback-success-default);background:var(--color-feedback-success-subtle)}.c-alert--warning{border-color:var(--color-feedback-warning-default);background:var(--color-feedback-warning-subtle)}.c-alert--info{border-color:var(--color-feedback-info-default);background:var(--color-feedback-info-subtle)}.c-alert--neutral{border-color:var(--color-feedback-neutral-default);background:var(--color-feedback-neutral-subtle)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;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}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
2678
2678
|
}
|
|
2679
2679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AlertComponent, decorators: [{
|
|
2680
2680
|
type: Component,
|
|
2681
|
-
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 <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n\n @if (removable()) {\n <lib-button-icon\n ariaLabel=\"Close alert\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n />\n }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-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-
|
|
2681
|
+
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 <ng-content select=\"[slot=footer]\"></ng-content>\n </div>\n\n @if (removable()) {\n <lib-button-icon\n ariaLabel=\"Close alert\"\n [loading]=\"false\"\n variant=\"neutral\"\n size=\"sm\"\n class=\"c-alert__close\"\n iconName=\"x-regular\"\n (click)=\"close()\"\n />\n }\n</div>\n}\n", styles: [".c-alert{width:100%;width:-moz-available;width:-webkit-fill-available;width:stretch;padding:var(--space-component-padding-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-default);background:var(--color-feedback-danger-subtle)}.c-alert--success{border-color:var(--color-feedback-success-default);background:var(--color-feedback-success-subtle)}.c-alert--warning{border-color:var(--color-feedback-warning-default);background:var(--color-feedback-warning-subtle)}.c-alert--info{border-color:var(--color-feedback-info-default);background:var(--color-feedback-info-subtle)}.c-alert--neutral{border-color:var(--color-feedback-neutral-default);background:var(--color-feedback-neutral-subtle)}.c-alert__content{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;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}\n"] }]
|
|
2682
2682
|
}] });
|
|
2683
2683
|
|
|
2684
2684
|
class ArrowsComponent {
|
|
@@ -5168,11 +5168,11 @@ class TagComponent {
|
|
|
5168
5168
|
this.closeEvent.emit();
|
|
5169
5169
|
}
|
|
5170
5170
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5171
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TagComponent, isStandalone: true, selector: "lib-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, closeActive: { classPropertyName: "closeActive", publicName: "closeActive", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-
|
|
5171
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TagComponent, isStandalone: true, selector: "lib-tag", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, extraClass: { classPropertyName: "extraClass", publicName: "extraClass", isSignal: true, isRequired: false, transformFunction: null }, showBadge: { classPropertyName: "showBadge", publicName: "showBadge", isSignal: true, isRequired: false, transformFunction: null }, closeActive: { classPropertyName: "closeActive", publicName: "closeActive", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, skeletonActive: { classPropertyName: "skeletonActive", publicName: "skeletonActive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeEvent: "closeEvent" }, ngImport: i0, template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }] });
|
|
5172
5172
|
}
|
|
5173
5173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TagComponent, decorators: [{
|
|
5174
5174
|
type: Component,
|
|
5175
|
-
args: [{ selector: 'lib-tag', imports: [NgClass, ButtonIconComponent], template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-
|
|
5175
|
+
args: [{ selector: 'lib-tag', imports: [NgClass, ButtonIconComponent], template: "@if (skeletonActive()) {\n<div class=\"skeleton\"></div>\n} @else {\n<span\n [ngClass]=\"[\n 'c-tag',\n variant() ? 'c-tag--' + variant() : '',\n extraClass() ? extraClass() : '',\n emphasis() ? 'c-tag--emphasis' : '',\n closeActive() ? 'c-tag--close-active' : '',\n size() ? 'c-tag--' + size() : '',\n emphasis() && closeActive() ? 'c-tag--emphasis-close-active' : ''\n ]\"\n>\n @if (showBadge()) {\n <span class=\"c-tag__dot\"></span>\n }\n <span class=\"c-tag__text\">{{ text() }}</span>\n @if (closeActive()) {\n <lib-button-icon\n role=\"button\"\n [ariaLabel]=\"variant()\"\n [loading]=\"false\"\n [disabled]=\"variant() === 'disabled'\"\n [variant]=\"emphasis() ? 'inverse' : 'neutral'\"\n [size]=\"size() === 'xs' ? 'xs' : 'sm'\"\n class=\"c-tag__close\"\n iconName=\"x-regular\"\n (click)=\"onClose()\"\n >\n </lib-button-icon>\n }\n</span>\n}\n", styles: [".c-tag{display:inline-flex;height:1.5rem;max-width:100%;padding:0 var(--space-component-padding-sm);align-items:center;gap:var(--space-component-gap-sm);flex-shrink:0;border-radius:var(--size-border-radius-md);text-align:center;font-family:var(--typography-label-xs-strong-family);font-size:var(--typography-label-xs-strong-size);font-weight:var(--typography-label-xs-strong-weight);line-height:var(--typography-label-xs-strong-line-height);letter-spacing:var(--typography-label-xs-strong-letter-spacing)}.c-tag--sm{height:2rem;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tag__dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.c-tag__text{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag--close-active{padding-right:0}.c-tag--emphasis-close-active{border-top-right-radius:10px;border-bottom-right-radius:10px}.c-tag--danger{background:var(--color-feedback-danger-soft);color:var(--color-feedback-danger-stronger)}.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-stronger)}.c-tag--warning{color:var(--color-feedback-warning-stronger);background:var(--color-feedback-warning-soft)}.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-stronger)}.c-tag--success{color:var(--color-feedback-success-stronger);background:var(--color-feedback-success-soft)}.c-tag--success .c-tag__dot{background:var(--color-feedback-success-stronger)}.c-tag--info{background:var(--color-feedback-info-soft);color:var(--color-feedback-info-stronger)}.c-tag--info .c-tag__dot{background:var(--color-feedback-info-stronger)}.c-tag--neutral{background:var(--color-feedback-neutral-soft);color:var(--color-feedback-neutral-stronger)}.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-stronger)}.c-tag--primary{background:var(--color-decorative-primary-soft);color:var(--color-decorative-primary-stronger)}.c-tag--primary .c-tag__dot{background:var(--color-decorative-primary-stronger)}.c-tag--secondary{background:var(--color-decorative-secondary-soft);color:var(--color-decorative-secondary-stronger)}.c-tag--secondary .c-tag__dot{background:var(--color-decorative-secondary-stronger)}.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--danger{color:var(--color-feedback-danger-subtle);background:var(--color-feedback-danger-default)}.c-tag--emphasis.c-tag--danger .c-tag__dot{background:var(--color-feedback-danger-subtle)}.c-tag--emphasis.c-tag--warning{color:var(--color-feedback-warning-subtle);background:var(--color-feedback-warning-default)}.c-tag--emphasis.c-tag--warning .c-tag__dot{background:var(--color-feedback-warning-subtle)}.c-tag--emphasis.c-tag--success{color:var(--color-feedback-success-subtle);background:var(--color-feedback-success-default)}.c-tag--emphasis.c-tag--success .c-tag__dot{background:var(--color-feedback-success-subtle)}.c-tag--emphasis.c-tag--info{color:var(--color-feedback-info-subtle);background:var(--color-feedback-info-default)}.c-tag--emphasis.c-tag--info .c-tag__dot{background:var(--color-feedback-info-subtle)}.c-tag--emphasis.c-tag--neutral{color:var(--color-feedback-neutral-subtle);background:var(--color-feedback-neutral-default)}.c-tag--emphasis.c-tag--neutral .c-tag__dot{background:var(--color-feedback-neutral-subtle)}.c-tag--emphasis.c-tag--primary{background:var(--color-decorative-primary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--primary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary{background:var(--color-decorative-secondary-default);color:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--secondary .c-tag__dot{background:var(--color-core-content-inverse)}.c-tag--emphasis.c-tag--disabled{background:var(--color-action-neutral-background-disabled);color:var(--color-action-neutral-content-disabled)}.c-tag--emphasis.c-tag--disabled .c-tag__dot{background:var(--color-action-neutral-content-disabled)}.skeleton{width:4rem;height:1.5rem;background:var(--color-effect-skeleton-soft);border-radius:var(--size-border-radius-md)}\n"] }]
|
|
5176
5176
|
}] });
|
|
5177
5177
|
|
|
5178
5178
|
class MenuItemComponent {
|