@crowdfarming/oliva-ds 1.80.0-rc.1 → 1.80.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.
|
@@ -6479,11 +6479,11 @@ class SegmentedControlComponent {
|
|
|
6479
6479
|
}
|
|
6480
6480
|
}
|
|
6481
6481
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6482
|
-
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", size: "size" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{\n 'c-segmented-control': true,\n 'c-segmented-control--fill': fill,\n 'c-segmented-control--sm': size === 'sm'\n }\"\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: [".c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{box-sizing:border-box;position:relative;min-width:88px;
|
|
6482
|
+
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", size: "size" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeydown($event)" } }, ngImport: i0, template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{\n 'c-segmented-control': true,\n 'c-segmented-control--fill': fill,\n 'c-segmented-control--sm': size === 'sm'\n }\"\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: [".c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control--fill .c-segmented-control__item{flex:1 0 0}.c-segmented-control__item{box-sizing:border-box;position:relative;min-width:88px;min-height:40px;padding:var(--space-component-padding-sm, 8px);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:var(--size-border-radius-lg) 0 0 var(--size-border-radius-lg)}.c-segmented-control__item:last-child{border-radius:0 var(--size-border-radius-lg) var(--size-border-radius-lg) 0}.c-segmented-control__item:hover:not([aria-checked=true]){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-action-primary-content-pressed)}.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{box-shadow:var(--focus-inset);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)}.c-segmented-control__item[aria-checked=true]:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-segmented-control__item[aria-checked=true]:active{background-color:var(--color-action-primary-background-pressed);color:var(--color-action-primary-content-pressed)}.c-segmented-control--sm .c-segmented-control__item{min-height:32px;padding:var(--space-component-padding-xs, 4px) var(--space-component-padding-sm, 8px)}\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", "disabled", "name", "color"] }] });
|
|
6483
6483
|
}
|
|
6484
6484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SegmentedControlComponent, decorators: [{
|
|
6485
6485
|
type: Component,
|
|
6486
|
-
args: [{ selector: 'lib-segmented-control', imports: [CommonModule, IconComponent], template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{\n 'c-segmented-control': true,\n 'c-segmented-control--fill': fill,\n 'c-segmented-control--sm': size === 'sm'\n }\"\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: [".c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control__item{box-sizing:border-box;position:relative;min-width:88px;
|
|
6486
|
+
args: [{ selector: 'lib-segmented-control', imports: [CommonModule, IconComponent], template: "<div\n role=\"radiogroup\"\n [ngClass]=\"{\n 'c-segmented-control': true,\n 'c-segmented-control--fill': fill,\n 'c-segmented-control--sm': size === 'sm'\n }\"\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: [".c-segmented-control{display:inline-flex;overflow:hidden}.c-segmented-control--fill{width:100%}.c-segmented-control--fill .c-segmented-control__item{flex:1 0 0}.c-segmented-control__item{box-sizing:border-box;position:relative;min-width:88px;min-height:40px;padding:var(--space-component-padding-sm, 8px);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:var(--size-border-radius-lg) 0 0 var(--size-border-radius-lg)}.c-segmented-control__item:last-child{border-radius:0 var(--size-border-radius-lg) var(--size-border-radius-lg) 0}.c-segmented-control__item:hover:not([aria-checked=true]){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-action-primary-content-pressed)}.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{box-shadow:var(--focus-inset);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)}.c-segmented-control__item[aria-checked=true]:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-segmented-control__item[aria-checked=true]:active{background-color:var(--color-action-primary-background-pressed);color:var(--color-action-primary-content-pressed)}.c-segmented-control--sm .c-segmented-control__item{min-height:32px;padding:var(--space-component-padding-xs, 4px) var(--space-component-padding-sm, 8px)}\n"] }]
|
|
6487
6487
|
}], propDecorators: { options: [{
|
|
6488
6488
|
type: Input
|
|
6489
6489
|
}], selectedValue: [{
|
|
@@ -7677,6 +7677,8 @@ class TileComponent {
|
|
|
7677
7677
|
paddingSize = 'lg';
|
|
7678
7678
|
title = '';
|
|
7679
7679
|
iconName;
|
|
7680
|
+
tagText;
|
|
7681
|
+
tagVariant = 'neutral';
|
|
7680
7682
|
name;
|
|
7681
7683
|
selected = false;
|
|
7682
7684
|
disabled = false;
|
|
@@ -7701,11 +7703,17 @@ class TileComponent {
|
|
|
7701
7703
|
return this.variant === 'neutral' && this.name ? this.name : null;
|
|
7702
7704
|
}
|
|
7703
7705
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7704
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", paddingSize: "paddingSize", title: "title", iconName: "iconName", name: "name", selected: "selected", disabled: "disabled", isLoading: "isLoading" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n @if (title) {\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n <div class=\"c-tile__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <div class=\"c-tile__title-wrapper\">\n @if (iconName) {\n
|
|
7706
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", paddingSize: "paddingSize", title: "title", iconName: "iconName", tagText: "tagText", tagVariant: "tagVariant", name: "name", selected: "selected", disabled: "disabled", isLoading: "isLoading" }, outputs: { selectedChange: "selectedChange" }, ngImport: i0, template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n @if (title) {\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n <div class=\"c-tile__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <div class=\"c-tile__title-wrapper\" [class.c-tile__title-wrapper--has-tag]=\"!!tagText\">\n <div class=\"c-tile__title-wrapper__heading\">\n @if (iconName) {\n <lib-icon [name]=\"iconName\" [size]=\"'lg'\"></lib-icon>\n }\n <p class=\"c-tile__title\">{{ title }}</p>\n </div>\n\n @if (tagText) {\n <lib-tag\n [text]=\"tagText\"\n [variant]=\"tagVariant\"\n [closeActive]=\"false\"\n [showBadge]=\"false\"\n ></lib-tag>\n }\n </div>\n }\n <lib-radio\n *ngIf=\"variant === 'radio'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [value]=\"selected ? 'true' : ''\"\n [checked]=\"selected\"\n (click)=\"onRadioClick($event)\"\n class=\"c-tile__check\"\n ></lib-radio>\n <lib-checkbox\n *ngIf=\"variant === 'checkbox'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n ></lib-checkbox>\n </div>\n }\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-component-padding-lg);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);height:100%;cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--padding-xs{padding:4px}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-container-gap-sm);width:100%;height:100%;align-items:flex-start;justify-content:space-between}.c-tile__content{width:100%}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #edfdfa)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title-wrapper{display:flex;align-items:center;align-content:center;gap:var(--space-component-gap-md);flex-grow:1;flex-wrap:wrap}.c-tile__title-wrapper__heading{display:flex;align-items:flex-start;align-content:flex-start;gap:var(--space-container-gap-xs);flex-grow:1}.c-tile__title-wrapper--has-tag{min-width:0}.c-tile__title-wrapper--has-tag .c-tile__title-wrapper__heading{flex:0;max-width:100%}.c-tile__title-wrapper--has-tag .c-tile__title-wrapper__heading .c-tile__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tile__title{margin:0;color:var(--color-tile-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)}.c-tile--disabled .c-tile__title,.c-tile--disabled .c-tile__icon{color:var(--color-tile-content-disabled)}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;height:24px;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["name", "label", "value", "disabled", "checked", "error", "isLoading", "id"], outputs: ["optionSelected"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "state", "errorActive", "skeletonActive", "disabled", "name", "value", "innerHTML", "ariaLabel"], outputs: ["changed"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "disabled", "name", "color"] }, { kind: "component", type: TagComponent, selector: "lib-tag", inputs: ["iconBefore", "size", "variant", "text", "extraClass", "showBadge", "closeActive", "emphasis", "skeletonActive"], outputs: ["closeEvent"] }] });
|
|
7705
7707
|
}
|
|
7706
7708
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, decorators: [{
|
|
7707
7709
|
type: Component,
|
|
7708
|
-
args: [{ selector: 'lib-tile', imports: [
|
|
7710
|
+
args: [{ selector: 'lib-tile', imports: [
|
|
7711
|
+
CommonModule,
|
|
7712
|
+
RadioComponent,
|
|
7713
|
+
CheckboxComponent,
|
|
7714
|
+
IconComponent,
|
|
7715
|
+
TagComponent,
|
|
7716
|
+
], template: "<div\n class=\"c-tile\"\n [class.c-tile--selected]=\"selected\"\n [class.c-tile--neutral]=\"variant === 'neutral'\"\n [class.c-tile--disabled]=\"disabled\"\n [class.c-tile--padding-xs]=\"paddingSize === 'xs'\"\n [class.is-loading]=\"isLoading\"\n [attr.name]=\"tileName\"\n [tabindex]=\"variant === 'neutral' ? 0 : -1\"\n role=\"button\"\n (click)=\"onClick()\"\n (keyup.enter)=\"onClick()\"\n>\n @if (title) {\n <div class=\"c-tile__wrapper\">\n @if (isLoading) {\n <div class=\"c-tile__skeleton\">\n <span aria-hidden=\"true\"></span>\n </div>\n } @else {\n <div class=\"c-tile__title-wrapper\" [class.c-tile__title-wrapper--has-tag]=\"!!tagText\">\n <div class=\"c-tile__title-wrapper__heading\">\n @if (iconName) {\n <lib-icon [name]=\"iconName\" [size]=\"'lg'\"></lib-icon>\n }\n <p class=\"c-tile__title\">{{ title }}</p>\n </div>\n\n @if (tagText) {\n <lib-tag\n [text]=\"tagText\"\n [variant]=\"tagVariant\"\n [closeActive]=\"false\"\n [showBadge]=\"false\"\n ></lib-tag>\n }\n </div>\n }\n <lib-radio\n *ngIf=\"variant === 'radio'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [value]=\"selected ? 'true' : ''\"\n [checked]=\"selected\"\n (click)=\"onRadioClick($event)\"\n class=\"c-tile__check\"\n ></lib-radio>\n <lib-checkbox\n *ngIf=\"variant === 'checkbox'\"\n [name]=\"controlName\"\n label=\"\"\n [disabled]=\"disabled\"\n [state]=\"selected ? 'checked' : 'unchecked'\"\n ></lib-checkbox>\n </div>\n }\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-component-padding-lg);flex-direction:column;align-items:flex-start;border-radius:var(--size-border-radius-md);border:var(--size-border-width-sm) solid var(--color-tile-border-default);background:var(--color-tile-background-default);height:100%;cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)}.c-tile:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-hover);background:var(--color-tile-background-hover)}.c-tile--padding-xs{padding:4px}.c-tile--disabled{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled);cursor:not-allowed}.c-tile--disabled:hover,.c-tile--disabled.c-tile--selected,.c-tile--disabled.c-tile--selected:hover{border:var(--size-border-width-sm) solid var(--color-tile-border-disabled);background:var(--color-tile-background-disabled)}.c-tile__wrapper{display:flex;gap:var(--space-container-gap-sm);width:100%;height:100%;align-items:flex-start;justify-content:space-between}.c-tile__content{width:100%}.c-tile--selected,.c-tile--selected:hover{border:var(--size-border-width-sm, 1px) solid var(--color-tile-checked-border-default, #217870);background:var(--color-tile-checked-background-default, #edfdfa)}.c-tile:focus-visible{box-shadow:var(--focus-outset);outline:none}.c-tile__title-wrapper{display:flex;align-items:center;align-content:center;gap:var(--space-component-gap-md);flex-grow:1;flex-wrap:wrap}.c-tile__title-wrapper__heading{display:flex;align-items:flex-start;align-content:flex-start;gap:var(--space-container-gap-xs);flex-grow:1}.c-tile__title-wrapper--has-tag{min-width:0}.c-tile__title-wrapper--has-tag .c-tile__title-wrapper__heading{flex:0;max-width:100%}.c-tile__title-wrapper--has-tag .c-tile__title-wrapper__heading .c-tile__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tile__title{margin:0;color:var(--color-tile-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)}.c-tile--disabled .c-tile__title,.c-tile--disabled .c-tile__icon{color:var(--color-tile-content-disabled)}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;height:24px;align-items:center;max-width:70px}.c-tile.is-loading .c-tile__skeleton span{display:block;width:100%;height:8px;background:var(--color-effect-skeleton-strong);border-radius:var(--size-border-radius-sm)}\n"] }]
|
|
7709
7717
|
}], propDecorators: { variant: [{
|
|
7710
7718
|
type: Input
|
|
7711
7719
|
}], paddingSize: [{
|
|
@@ -7714,6 +7722,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
7714
7722
|
type: Input
|
|
7715
7723
|
}], iconName: [{
|
|
7716
7724
|
type: Input
|
|
7725
|
+
}], tagText: [{
|
|
7726
|
+
type: Input
|
|
7727
|
+
}], tagVariant: [{
|
|
7728
|
+
type: Input
|
|
7717
7729
|
}], name: [{
|
|
7718
7730
|
type: Input
|
|
7719
7731
|
}], selected: [{
|