@rivet-health/design-system 40.25.0 → 40.26.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.
- package/esm2020/lib/layout/card/card.component.mjs +21 -5
- package/fesm2015/rivet-health-design-system.mjs +21 -4
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +20 -4
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/layout/card/card.component.d.ts +17 -3
- package/package.json +1 -1
|
@@ -5796,8 +5796,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
5796
5796
|
* its corners. Popups (`riv-menu`, `rivTooltip`) render through the overlay
|
|
5797
5797
|
* outlet, so they are not affected by that clipping.
|
|
5798
5798
|
*
|
|
5799
|
-
*
|
|
5800
|
-
*
|
|
5799
|
+
* Set the corner radius with `radius`. The `--card-border-radius` custom
|
|
5800
|
+
* property still overrides it, for radii off the token scale.
|
|
5801
5801
|
*/
|
|
5802
5802
|
class CardComponent {
|
|
5803
5803
|
constructor(el, renderer, cdr) {
|
|
@@ -5818,6 +5818,8 @@ class CardComponent {
|
|
|
5818
5818
|
* their own padding.
|
|
5819
5819
|
*/
|
|
5820
5820
|
this.padding = 'none';
|
|
5821
|
+
/** Corner radius, matching the `--border-radius-*` tokens. */
|
|
5822
|
+
this.radius = 'medium';
|
|
5821
5823
|
/**
|
|
5822
5824
|
* Makes the whole surface activate, emitting `cardClick`. Adds the hover
|
|
5823
5825
|
* affordance and keyboard support.
|
|
@@ -5914,6 +5916,8 @@ class CardComponent {
|
|
|
5914
5916
|
[`tone-${this.tone}`]: true,
|
|
5915
5917
|
[this.orientation]: true,
|
|
5916
5918
|
[`padding-${this.padding}`]: true,
|
|
5919
|
+
[`radius-${this.radius}`]: true,
|
|
5920
|
+
[`hover-depth-${this.hoverDepth ?? CardComponent.defaultHoverDepth(this)}`]: true,
|
|
5917
5921
|
clickable: this.clickable,
|
|
5918
5922
|
selected: this.selected,
|
|
5919
5923
|
disabled: this.disabled,
|
|
@@ -5924,10 +5928,10 @@ class CardComponent {
|
|
|
5924
5928
|
}
|
|
5925
5929
|
}
|
|
5926
5930
|
CardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5927
|
-
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "riv-card", inputs: { variant: "variant", surface: "surface", tone: "tone", orientation: "orientation", padding: "padding", clickable: "clickable", clickLabel: "clickLabel", selected: "selected", disabled: "disabled" }, outputs: { cardClick: "cardClick" }, host: { properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.classes" } }, ngImport: i0, template: "<button\n *ngIf=\"clickable\"\n type=\"button\"\n class=\"click-target\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"clickLabel\"\n [attr.aria-labelledby]=\"labelledBy\"\n (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;
|
|
5931
|
+
CardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardComponent, selector: "riv-card", inputs: { variant: "variant", surface: "surface", tone: "tone", orientation: "orientation", padding: "padding", radius: "radius", hoverDepth: "hoverDepth", clickable: "clickable", clickLabel: "clickLabel", selected: "selected", disabled: "disabled" }, outputs: { cardClick: "cardClick" }, host: { properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.classes" } }, ngImport: i0, template: "<button\n *ngIf=\"clickable\"\n type=\"button\"\n class=\"click-target\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"clickLabel\"\n [attr.aria-labelledby]=\"labelledBy\"\n (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light)}:host.dashed{border:var(--border-width) dashed var(--border-light)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.radius-small{border-radius:var(--card-border-radius, var(--border-radius-small))}:host.radius-medium{border-radius:var(--card-border-radius, var(--border-radius-medium))}:host.radius-large{border-radius:var(--card-border-radius, var(--border-radius-large))}:host.radius-xlarge{border-radius:var(--card-border-radius, var(--border-radius-xlarge))}:host:not(.hover-depth-none){transition:box-shadow var(--short-transition)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.clickable{transition:box-shadow var(--short-transition)}:host.hover-depth-1:not(.disabled):hover{box-shadow:var(--depth-1)}:host.hover-depth-2:not(.disabled):hover{box-shadow:var(--depth-2)}:host.hover-depth-3:not(.disabled):hover{box-shadow:var(--depth-3)}:host.hover-depth-4:not(.disabled):hover{box-shadow:var(--depth-4)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.selected{border:var(--border-width) solid var(--baloo-50);box-shadow:var(--depth-2)}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled,:host.dashed.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5928
5932
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardComponent, decorators: [{
|
|
5929
5933
|
type: Component,
|
|
5930
|
-
args: [{ selector: 'riv-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n *ngIf=\"clickable\"\n type=\"button\"\n class=\"click-target\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"clickLabel\"\n [attr.aria-labelledby]=\"labelledBy\"\n (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;
|
|
5934
|
+
args: [{ selector: 'riv-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n *ngIf=\"clickable\"\n type=\"button\"\n class=\"click-target\"\n [disabled]=\"disabled\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"clickLabel\"\n [attr.aria-labelledby]=\"labelledBy\"\n (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light)}:host.dashed{border:var(--border-width) dashed var(--border-light)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.radius-small{border-radius:var(--card-border-radius, var(--border-radius-small))}:host.radius-medium{border-radius:var(--card-border-radius, var(--border-radius-medium))}:host.radius-large{border-radius:var(--card-border-radius, var(--border-radius-large))}:host.radius-xlarge{border-radius:var(--card-border-radius, var(--border-radius-xlarge))}:host:not(.hover-depth-none){transition:box-shadow var(--short-transition)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.clickable{transition:box-shadow var(--short-transition)}:host.hover-depth-1:not(.disabled):hover{box-shadow:var(--depth-1)}:host.hover-depth-2:not(.disabled):hover{box-shadow:var(--depth-2)}:host.hover-depth-3:not(.disabled):hover{box-shadow:var(--depth-3)}:host.hover-depth-4:not(.disabled):hover{box-shadow:var(--depth-4)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.selected{border:var(--border-width) solid var(--baloo-50);box-shadow:var(--depth-2)}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled,:host.dashed.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"] }]
|
|
5931
5935
|
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { variant: [{
|
|
5932
5936
|
type: Input
|
|
5933
5937
|
}], surface: [{
|
|
@@ -5938,6 +5942,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
5938
5942
|
type: Input
|
|
5939
5943
|
}], padding: [{
|
|
5940
5944
|
type: Input
|
|
5945
|
+
}], radius: [{
|
|
5946
|
+
type: Input
|
|
5947
|
+
}], hoverDepth: [{
|
|
5948
|
+
type: Input
|
|
5941
5949
|
}], clickable: [{
|
|
5942
5950
|
type: Input
|
|
5943
5951
|
}], clickLabel: [{
|
|
@@ -5976,6 +5984,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
5976
5984
|
'xlarge',
|
|
5977
5985
|
'xxlarge',
|
|
5978
5986
|
];
|
|
5987
|
+
CardComponent.Radii = ['small', 'medium', 'large', 'xlarge'];
|
|
5988
|
+
CardComponent.Depths = ['none', '1', '2', '3', '4'];
|
|
5989
|
+
function defaultHoverDepth({ clickable, variant, }) {
|
|
5990
|
+
if (!clickable)
|
|
5991
|
+
return 'none';
|
|
5992
|
+
return variant === 'elevated' ? '2' : '1';
|
|
5993
|
+
}
|
|
5994
|
+
CardComponent.defaultHoverDepth = defaultHoverDepth;
|
|
5979
5995
|
})(CardComponent || (CardComponent = {}));
|
|
5980
5996
|
|
|
5981
5997
|
/**
|