@crowdfarming/oliva-ds 1.27.0-rc.3 → 1.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -5806,11 +5806,11 @@ class TileComponent {
|
|
|
5806
5806
|
return this.variant === 'neutral' && this.name ? this.name : null;
|
|
5807
5807
|
}
|
|
5808
5808
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5809
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", 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.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 <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 <p *ngIf=\"title\" class=\"c-tile__title\">{{ title }}</p>\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 class=\"c-tile__check\"\n ></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-container-padding-sm);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);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)
|
|
5809
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TileComponent, isStandalone: true, selector: "lib-tile", inputs: { variant: "variant", title: "title", 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.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 <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 <p *ngIf=\"title\" class=\"c-tile__title\">{{ title }}</p>\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 class=\"c-tile__check\"\n ></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-container-padding-sm);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);cursor:pointer;width:100%}.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--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-component-gap-sm);width:100%;height:100%;align-items:center;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{flex-grow:1;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{color:var(--color-tile-content-disabled)}.c-tile__check{display:flex;align-items:center;justify-content:center}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;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"] }] });
|
|
5810
5810
|
}
|
|
5811
5811
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TileComponent, decorators: [{
|
|
5812
5812
|
type: Component,
|
|
5813
|
-
args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], 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.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 <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 <p *ngIf=\"title\" class=\"c-tile__title\">{{ title }}</p>\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 class=\"c-tile__check\"\n ></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-container-padding-sm);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);cursor:pointer}.c-tile:has(.c-tile__content:not(:empty)){gap:var(--space-container-gap-sm)
|
|
5813
|
+
args: [{ selector: 'lib-tile', imports: [CommonModule, RadioComponent, CheckboxComponent], 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.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 <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 <p *ngIf=\"title\" class=\"c-tile__title\">{{ title }}</p>\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 class=\"c-tile__check\"\n ></lib-checkbox>\n </div>\n <div class=\"c-tile__content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".c-tile{display:flex;padding:var(--space-container-padding-sm);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);cursor:pointer;width:100%}.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--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-component-gap-sm);width:100%;height:100%;align-items:center;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{flex-grow:1;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{color:var(--color-tile-content-disabled)}.c-tile__check{display:flex;align-items:center;justify-content:center}.c-tile.is-loading .c-tile__skeleton{flex-grow:1;display:flex;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"] }]
|
|
5814
5814
|
}], propDecorators: { variant: [{
|
|
5815
5815
|
type: Input
|
|
5816
5816
|
}], title: [{
|