@rivet-health/design-system 2.5.0 → 2.6.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/modal/tooltip/tooltip.component.mjs +16 -3
- package/esm2020/lib/modal/tooltip/tooltip.directive.mjs +10 -2
- package/esm2020/lib/visualization/donut/donut.component.mjs +1 -1
- package/esm2020/lib/visualization/legend-item/legend-item.component.mjs +1 -1
- package/fesm2015/rivet-health-design-system.mjs +27 -6
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +27 -6
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/modal/tooltip/tooltip.component.d.ts +7 -1
- package/lib/modal/tooltip/tooltip.directive.d.ts +6 -3
- package/package.json +1 -1
|
@@ -2,13 +2,22 @@ import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input,
|
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
4
|
import * as i2 from "../callout/callout.component";
|
|
5
|
+
export const TooltipAnchoredPositions = [
|
|
6
|
+
'top-center',
|
|
7
|
+
'center-right',
|
|
8
|
+
'bottom-center',
|
|
9
|
+
'center-left',
|
|
10
|
+
];
|
|
5
11
|
export class TooltipComponent {
|
|
6
12
|
constructor() {
|
|
7
13
|
this.anchor = null;
|
|
8
14
|
this.theme = 'dark';
|
|
15
|
+
this.maxWidth = 'calc(var(--base-grid-size) * 50)';
|
|
16
|
+
this.preferredPosition = 'top-center';
|
|
9
17
|
this.onMouseEnter = new EventEmitter();
|
|
10
18
|
this.onMouseLeave = new EventEmitter();
|
|
11
19
|
this.isTemplate = isTemplate;
|
|
20
|
+
this.allowedPositions = [...TooltipAnchoredPositions];
|
|
12
21
|
}
|
|
13
22
|
_onMouseLeave(evt) {
|
|
14
23
|
this.onMouseLeave.emit(evt);
|
|
@@ -18,16 +27,20 @@ export class TooltipComponent {
|
|
|
18
27
|
}
|
|
19
28
|
}
|
|
20
29
|
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
-
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, host: { listeners: { "mouseleave": "_onMouseLeave()", "mouseenter": "_onMouseEnter()" } }, ngImport: i0, template: "<riv-callout\n [anchor]=\"anchor\"\n [preferredPosition]=\"
|
|
30
|
+
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme", maxWidth: "maxWidth", preferredPosition: "preferredPosition" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, host: { listeners: { "mouseleave": "_onMouseLeave()", "mouseenter": "_onMouseEnter()" } }, ngImport: i0, template: "<riv-callout\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
23
32
|
type: Component,
|
|
24
|
-
args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n [anchor]=\"anchor\"\n [preferredPosition]=\"
|
|
33
|
+
args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small)}\n"] }]
|
|
25
34
|
}], propDecorators: { anchor: [{
|
|
26
35
|
type: Input
|
|
27
36
|
}], content: [{
|
|
28
37
|
type: Input
|
|
29
38
|
}], theme: [{
|
|
30
39
|
type: Input
|
|
40
|
+
}], maxWidth: [{
|
|
41
|
+
type: Input
|
|
42
|
+
}], preferredPosition: [{
|
|
43
|
+
type: Input
|
|
31
44
|
}], onMouseEnter: [{
|
|
32
45
|
type: Output
|
|
33
46
|
}], onMouseLeave: [{
|
|
@@ -42,4 +55,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
42
55
|
function isTemplate(v) {
|
|
43
56
|
return typeof v !== 'string';
|
|
44
57
|
}
|
|
45
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9tb2RhbC90b29sdGlwL3Rvb2x0aXAuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvbW9kYWwvdG9vbHRpcC90b29sdGlwLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixZQUFZLEVBQ1osS0FBSyxFQUNMLE1BQU0sR0FFUCxNQUFNLGVBQWUsQ0FBQzs7OztBQUd2QixNQUFNLENBQUMsTUFBTSx3QkFBd0IsR0FBRztJQUN0QyxZQUFZO0lBQ1osY0FBYztJQUNkLGVBQWU7SUFDZixhQUFhO0NBQ0wsQ0FBQztBQWFYLE1BQU0sT0FBTyxnQkFBZ0I7SUFON0I7UUFRRSxXQUFNLEdBQTZCLElBQUksQ0FBQztRQU14QyxVQUFLLEdBQXFCLE1BQU0sQ0FBQztRQUdqQyxhQUFRLEdBQVcsa0NBQWtDLENBQUM7UUFHdEQsc0JBQWlCLEdBQTRCLFlBQVksQ0FBQztRQUcxRCxpQkFBWSxHQUFHLElBQUksWUFBWSxFQUFjLENBQUM7UUFHOUMsaUJBQVksR0FBRyxJQUFJLFlBQVksRUFBYyxDQUFDO1FBVXJDLGVBQVUsR0FBRyxVQUFVLENBQUM7UUFDeEIscUJBQWdCLEdBQUcsQ0FBQyxHQUFHLHdCQUF3QixDQUFDLENBQUM7S0FDM0Q7SUFWNkIsYUFBYSxDQUFDLEdBQWU7UUFDdkQsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUUyQixhQUFhLENBQUMsR0FBZTtRQUN2RCxJQUFJLENBQUMsWUFBWSxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUM5QixDQUFDOzs2R0E1QlUsZ0JBQWdCO2lHQUFoQixnQkFBZ0IsdVZDN0I3Qix1ZkFnQkE7MkZEYWEsZ0JBQWdCO2tCQU41QixTQUFTOytCQUNFLGFBQWEsbUJBR04sdUJBQXVCLENBQUMsTUFBTTs4QkFJL0MsTUFBTTtzQkFETCxLQUFLO2dCQUlOLE9BQU87c0JBRE4sS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sUUFBUTtzQkFEUCxLQUFLO2dCQUlOLGlCQUFpQjtzQkFEaEIsS0FBSztnQkFJTixZQUFZO3NCQURYLE1BQU07Z0JBSVAsWUFBWTtzQkFEWCxNQUFNO2dCQUdxQixhQUFhO3NCQUF4QyxZQUFZO3VCQUFDLFlBQVk7Z0JBSUUsYUFBYTtzQkFBeEMsWUFBWTt1QkFBQyxZQUFZOztBQVE1QixTQUFTLFVBQVUsQ0FDakIsQ0FBZ0M7SUFFaEMsT0FBTyxPQUFPLENBQUMsS0FBSyxRQUFRLENBQUM7QUFDL0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSG9zdExpc3RlbmVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxuICBUZW1wbGF0ZVJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBbmNob3JlZFBvc2l0aW9uIH0gZnJvbSAnLi4vY2FsbG91dC9jYWxsb3V0LXBvc2l0aW9uJztcblxuZXhwb3J0IGNvbnN0IFRvb2x0aXBBbmNob3JlZFBvc2l0aW9ucyA9IFtcbiAgJ3RvcC1jZW50ZXInLFxuICAnY2VudGVyLXJpZ2h0JyxcbiAgJ2JvdHRvbS1jZW50ZXInLFxuICAnY2VudGVyLWxlZnQnLFxuXSBhcyBjb25zdDtcblxuZXhwb3J0IHR5cGUgVG9vbHRpcEFuY2hvcmVkUG9zaXRpb24gPSBFeHRyYWN0PFxuICAodHlwZW9mIFRvb2x0aXBBbmNob3JlZFBvc2l0aW9ucylbbnVtYmVyXSxcbiAgQW5jaG9yZWRQb3NpdGlvblxuPjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LXRvb2x0aXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vdG9vbHRpcC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3Rvb2x0aXAuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgVG9vbHRpcENvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIGFuY2hvcjogRWxlbWVudCB8IERPTVJlY3QgfCBudWxsID0gbnVsbDtcblxuICBASW5wdXQoKVxuICBjb250ZW50Pzogc3RyaW5nIHwgVGVtcGxhdGVSZWY8dW5rbm93bj47XG5cbiAgQElucHV0KClcbiAgdGhlbWU6ICdkYXJrJyB8ICdsaWdodCcgPSAnZGFyayc7XG5cbiAgQElucHV0KClcbiAgbWF4V2lkdGg6IHN0cmluZyA9ICdjYWxjKHZhcigtLWJhc2UtZ3JpZC1zaXplKSAqIDUwKSc7XG5cbiAgQElucHV0KClcbiAgcHJlZmVycmVkUG9zaXRpb246IFRvb2x0aXBBbmNob3JlZFBvc2l0aW9uID0gJ3RvcC1jZW50ZXInO1xuXG4gIEBPdXRwdXQoKVxuICBvbk1vdXNlRW50ZXIgPSBuZXcgRXZlbnRFbWl0dGVyPE1vdXNlRXZlbnQ+KCk7XG5cbiAgQE91dHB1dCgpXG4gIG9uTW91c2VMZWF2ZSA9IG5ldyBFdmVudEVtaXR0ZXI8TW91c2VFdmVudD4oKTtcblxuICBASG9zdExpc3RlbmVyKCdtb3VzZWxlYXZlJykgX29uTW91c2VMZWF2ZShldnQ6IE1vdXNlRXZlbnQpIHtcbiAgICB0aGlzLm9uTW91c2VMZWF2ZS5lbWl0KGV2dCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdtb3VzZWVudGVyJykgX29uTW91c2VFbnRlcihldnQ6IE1vdXNlRXZlbnQpIHtcbiAgICB0aGlzLm9uTW91c2VFbnRlci5lbWl0KGV2dCk7XG4gIH1cblxuICByZWFkb25seSBpc1RlbXBsYXRlID0gaXNUZW1wbGF0ZTtcbiAgcmVhZG9ubHkgYWxsb3dlZFBvc2l0aW9ucyA9IFsuLi5Ub29sdGlwQW5jaG9yZWRQb3NpdGlvbnNdO1xufVxuXG5mdW5jdGlvbiBpc1RlbXBsYXRlKFxuICB2OiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjx1bmtub3duPixcbik6IHYgaXMgVGVtcGxhdGVSZWY8dW5rbm93bj4ge1xuICByZXR1cm4gdHlwZW9mIHYgIT09ICdzdHJpbmcnO1xufVxuIiwiPHJpdi1jYWxsb3V0XG4gIFthbmNob3JdPVwiYW5jaG9yXCJcbiAgW3ByZWZlcnJlZFBvc2l0aW9uXT1cInByZWZlcnJlZFBvc2l0aW9uXCJcbiAgW2FsbG93ZWRQb3NpdGlvbnNdPVwiYWxsb3dlZFBvc2l0aW9uc1wiXG4gIFtpc01vZGFsXT1cImZhbHNlXCJcbiAgW3RoZW1lXT1cInRoZW1lXCJcbj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImNvbnRlbnQgJiYgaXNUZW1wbGF0ZShjb250ZW50KTsgZWxzZSBzdHJpbmdDb250ZW50XCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNvbnRlbnRcIj48L25nLWNvbnRhaW5lcj5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy10ZW1wbGF0ZSAjc3RyaW5nQ29udGVudD5cbiAgICA8ZGl2IGNsYXNzPVwic3RyaW5nLWNvbnRlbnRcIiBbc3R5bGUubWF4LXdpZHRoXT1cIm1heFdpZHRoXCI+XG4gICAgICB7eyBjb250ZW50IH19XG4gICAgPC9kaXY+XG4gIDwvbmctdGVtcGxhdGU+XG48L3Jpdi1jYWxsb3V0PlxuIl19
|
|
@@ -6,6 +6,8 @@ export class TooltipDirective {
|
|
|
6
6
|
this.el = el;
|
|
7
7
|
this.applicationRef = applicationRef;
|
|
8
8
|
this.rivTooltipTheme = 'dark';
|
|
9
|
+
this.rivTooltipMaxWidth = 'calc(var(--base-grid-size) * 50)';
|
|
10
|
+
this.rivTooltipPreferredPosition = 'top-center';
|
|
9
11
|
this.closeDelay = 100;
|
|
10
12
|
}
|
|
11
13
|
onMouseEnter() {
|
|
@@ -21,6 +23,8 @@ export class TooltipDirective {
|
|
|
21
23
|
tooltip.instance.anchor = this.el.nativeElement;
|
|
22
24
|
tooltip.instance.content = this.rivTooltip;
|
|
23
25
|
tooltip.instance.theme = this.rivTooltipTheme;
|
|
26
|
+
tooltip.instance.maxWidth = this.rivTooltipMaxWidth;
|
|
27
|
+
tooltip.instance.preferredPosition = this.rivTooltipPreferredPosition;
|
|
24
28
|
tooltip.instance.onMouseEnter.subscribe(this.cancelClose.bind(this));
|
|
25
29
|
tooltip.instance.onMouseLeave.subscribe(this.initiateClose.bind(this));
|
|
26
30
|
this.tooltipRef = tooltip;
|
|
@@ -40,7 +44,7 @@ export class TooltipDirective {
|
|
|
40
44
|
}
|
|
41
45
|
}
|
|
42
46
|
TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
43
|
-
TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", closeDelay: "closeDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
|
|
47
|
+
TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", rivTooltipMaxWidth: "rivTooltipMaxWidth", rivTooltipPreferredPosition: "rivTooltipPreferredPosition", closeDelay: "closeDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
|
|
44
48
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
45
49
|
type: Directive,
|
|
46
50
|
args: [{
|
|
@@ -50,6 +54,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
50
54
|
type: Input
|
|
51
55
|
}], rivTooltipTheme: [{
|
|
52
56
|
type: Input
|
|
57
|
+
}], rivTooltipMaxWidth: [{
|
|
58
|
+
type: Input
|
|
59
|
+
}], rivTooltipPreferredPosition: [{
|
|
60
|
+
type: Input
|
|
53
61
|
}], closeDelay: [{
|
|
54
62
|
type: Input
|
|
55
63
|
}], onMouseEnter: [{
|
|
@@ -59,4 +67,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
59
67
|
type: HostListener,
|
|
60
68
|
args: ['mouseleave']
|
|
61
69
|
}] } });
|
|
62
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
70
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9tb2RhbC90b29sdGlwL3Rvb2x0aXAuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFHTCxTQUFTLEVBRVQsWUFBWSxFQUNaLEtBQUssRUFFTCxnQkFBZ0IsR0FDakIsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUEyQixnQkFBZ0IsRUFBRSxNQUFNLHFCQUFxQixDQUFDOztBQUtoRixNQUFNLE9BQU8sZ0JBQWdCO0lBQzNCLFlBQ21CLEVBQWMsRUFDZCxjQUE4QjtRQUQ5QixPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQ2QsbUJBQWMsR0FBZCxjQUFjLENBQWdCO1FBT2pELG9CQUFlLEdBQXFCLE1BQU0sQ0FBQztRQUczQyx1QkFBa0IsR0FBRyxrQ0FBa0MsQ0FBQztRQUd4RCxnQ0FBMkIsR0FBNEIsWUFBWSxDQUFDO1FBR3BFLGVBQVUsR0FBVyxHQUFHLENBQUM7SUFmdEIsQ0FBQztJQW9Cd0IsWUFBWTtRQUN0QyxJQUFJLENBQUMsSUFBSSxDQUFDLFVBQVU7WUFBRSxPQUFPO1FBQzdCLElBQUksSUFBSSxDQUFDLFVBQVUsRUFBRTtZQUNuQixJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDcEI7YUFBTTtZQUNMLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsVUFBVSxDQUFDLENBQUMsQ0FBQyxDQUFDLFFBQVE7aUJBQ3ZELEdBQUcsQ0FBQyxnQkFBZ0IsQ0FBQztpQkFDckIsZUFBZSxDQUFDLGdCQUFnQixDQUFDLENBQUM7WUFDckMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUM7WUFDaEQsT0FBTyxDQUFDLFFBQVEsQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQztZQUMzQyxPQUFPLENBQUMsUUFBUSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDO1lBQzlDLE9BQU8sQ0FBQyxRQUFRLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxrQkFBa0IsQ0FBQztZQUNwRCxPQUFPLENBQUMsUUFBUSxDQUFDLGlCQUFpQixHQUFHLElBQUksQ0FBQywyQkFBMkIsQ0FBQztZQUN0RSxPQUFPLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztZQUNyRSxPQUFPLENBQUMsUUFBUSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQztZQUN2RSxJQUFJLENBQUMsVUFBVSxHQUFHLE9BQU8sQ0FBQztTQUMzQjtJQUNILENBQUM7SUFFMkIsWUFBWTtRQUN0QyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7SUFDdkIsQ0FBQztJQUVPLGFBQWE7UUFDbkIsSUFBSSxDQUFDLFlBQVksR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUN6QyxJQUFJLENBQUMsVUFBVSxFQUFFLE9BQU8sRUFBRSxDQUFDO1lBQzNCLElBQUksQ0FBQyxVQUFVLEdBQUcsU0FBUyxDQUFDO1FBQzlCLENBQUMsRUFBRSxJQUFJLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDdEIsQ0FBQztJQUVPLFdBQVc7UUFDakIsTUFBTSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDekMsQ0FBQzs7NkdBeERVLGdCQUFnQjtpR0FBaEIsZ0JBQWdCOzJGQUFoQixnQkFBZ0I7a0JBSDVCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGNBQWM7aUJBQ3pCOzhIQVFDLFVBQVU7c0JBRFQsS0FBSztnQkFJTixlQUFlO3NCQURkLEtBQUs7Z0JBSU4sa0JBQWtCO3NCQURqQixLQUFLO2dCQUlOLDJCQUEyQjtzQkFEMUIsS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUs7Z0JBTXNCLFlBQVk7c0JBQXZDLFlBQVk7dUJBQUMsWUFBWTtnQkFtQkUsWUFBWTtzQkFBdkMsWUFBWTt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQXBwbGljYXRpb25SZWYsXG4gIENvbXBvbmVudFJlZixcbiAgRGlyZWN0aXZlLFxuICBFbGVtZW50UmVmLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBUZW1wbGF0ZVJlZixcbiAgVmlld0NvbnRhaW5lclJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBUb29sdGlwQW5jaG9yZWRQb3NpdGlvbiwgVG9vbHRpcENvbXBvbmVudCB9IGZyb20gJy4vdG9vbHRpcC5jb21wb25lbnQnO1xuXG5ARGlyZWN0aXZlKHtcbiAgc2VsZWN0b3I6ICdbcml2VG9vbHRpcF0nLFxufSlcbmV4cG9ydCBjbGFzcyBUb29sdGlwRGlyZWN0aXZlIHtcbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSByZWFkb25seSBlbDogRWxlbWVudFJlZixcbiAgICBwcml2YXRlIHJlYWRvbmx5IGFwcGxpY2F0aW9uUmVmOiBBcHBsaWNhdGlvblJlZixcbiAgKSB7fVxuXG4gIEBJbnB1dCgpXG4gIHJpdlRvb2x0aXA/OiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjx1bmtub3duPjtcblxuICBASW5wdXQoKVxuICByaXZUb29sdGlwVGhlbWU6ICdkYXJrJyB8ICdsaWdodCcgPSAnZGFyayc7XG5cbiAgQElucHV0KClcbiAgcml2VG9vbHRpcE1heFdpZHRoID0gJ2NhbGModmFyKC0tYmFzZS1ncmlkLXNpemUpICogNTApJztcblxuICBASW5wdXQoKVxuICByaXZUb29sdGlwUHJlZmVycmVkUG9zaXRpb246IFRvb2x0aXBBbmNob3JlZFBvc2l0aW9uID0gJ3RvcC1jZW50ZXInO1xuXG4gIEBJbnB1dCgpXG4gIGNsb3NlRGVsYXk6IG51bWJlciA9IDEwMDtcblxuICBwcml2YXRlIHRvb2x0aXBSZWY/OiBDb21wb25lbnRSZWY8VG9vbHRpcENvbXBvbmVudD47XG4gIHByaXZhdGUgY2xvc2VUaW1lb3V0PzogbnVtYmVyO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInKSBvbk1vdXNlRW50ZXIoKSB7XG4gICAgaWYgKCF0aGlzLnJpdlRvb2x0aXApIHJldHVybjtcbiAgICBpZiAodGhpcy50b29sdGlwUmVmKSB7XG4gICAgICB0aGlzLmNhbmNlbENsb3NlKCk7XG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnN0IHRvb2x0aXAgPSB0aGlzLmFwcGxpY2F0aW9uUmVmLmNvbXBvbmVudHNbMF0uaW5qZWN0b3JcbiAgICAgICAgLmdldChWaWV3Q29udGFpbmVyUmVmKVxuICAgICAgICAuY3JlYXRlQ29tcG9uZW50KFRvb2x0aXBDb21wb25lbnQpO1xuICAgICAgdG9vbHRpcC5pbnN0YW5jZS5hbmNob3IgPSB0aGlzLmVsLm5hdGl2ZUVsZW1lbnQ7XG4gICAgICB0b29sdGlwLmluc3RhbmNlLmNvbnRlbnQgPSB0aGlzLnJpdlRvb2x0aXA7XG4gICAgICB0b29sdGlwLmluc3RhbmNlLnRoZW1lID0gdGhpcy5yaXZUb29sdGlwVGhlbWU7XG4gICAgICB0b29sdGlwLmluc3RhbmNlLm1heFdpZHRoID0gdGhpcy5yaXZUb29sdGlwTWF4V2lkdGg7XG4gICAgICB0b29sdGlwLmluc3RhbmNlLnByZWZlcnJlZFBvc2l0aW9uID0gdGhpcy5yaXZUb29sdGlwUHJlZmVycmVkUG9zaXRpb247XG4gICAgICB0b29sdGlwLmluc3RhbmNlLm9uTW91c2VFbnRlci5zdWJzY3JpYmUodGhpcy5jYW5jZWxDbG9zZS5iaW5kKHRoaXMpKTtcbiAgICAgIHRvb2x0aXAuaW5zdGFuY2Uub25Nb3VzZUxlYXZlLnN1YnNjcmliZSh0aGlzLmluaXRpYXRlQ2xvc2UuYmluZCh0aGlzKSk7XG4gICAgICB0aGlzLnRvb2x0aXBSZWYgPSB0b29sdGlwO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnKSBvbk1vdXNlTGVhdmUoKSB7XG4gICAgdGhpcy5pbml0aWF0ZUNsb3NlKCk7XG4gIH1cblxuICBwcml2YXRlIGluaXRpYXRlQ2xvc2UoKSB7XG4gICAgdGhpcy5jbG9zZVRpbWVvdXQgPSB3aW5kb3cuc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLnRvb2x0aXBSZWY/LmRlc3Ryb3koKTtcbiAgICAgIHRoaXMudG9vbHRpcFJlZiA9IHVuZGVmaW5lZDtcbiAgICB9LCB0aGlzLmNsb3NlRGVsYXkpO1xuICB9XG5cbiAgcHJpdmF0ZSBjYW5jZWxDbG9zZSgpIHtcbiAgICB3aW5kb3cuY2xlYXJUaW1lb3V0KHRoaXMuY2xvc2VUaW1lb3V0KTtcbiAgfVxufVxuIl19
|
|
@@ -32,7 +32,7 @@ export class DonutComponent {
|
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
34
|
DonutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
35
|
-
DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data", displayTooltip: "displayTooltip" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "closeDelay"] }, { kind: "component", type: i3.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35
|
+
DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data", displayTooltip: "displayTooltip" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "closeDelay"] }, { kind: "component", type: i3.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
36
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, decorators: [{
|
|
37
37
|
type: Component,
|
|
38
38
|
args: [{ selector: 'riv-donut', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"] }]
|
|
@@ -16,7 +16,7 @@ export class LegendItemComponent {
|
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
18
|
LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19
|
-
LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n ></i>\n <riv-icon\n *ngIf=\"visibility === 'hidden'\"\n name=\"EyeOff\"\n [size]=\"16\"\n ></riv-icon>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "closeDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19
|
+
LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n ></i>\n <riv-icon\n *ngIf=\"visibility === 'hidden'\"\n name=\"EyeOff\"\n [size]=\"16\"\n ></riv-icon>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "closeDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n ></i>\n <riv-icon\n *ngIf=\"visibility === 'hidden'\"\n name=\"EyeOff\"\n [size]=\"16\"\n ></riv-icon>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"] }]
|
|
@@ -675,13 +675,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
675
675
|
}]
|
|
676
676
|
}], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: CalloutService }]; } });
|
|
677
677
|
|
|
678
|
+
const TooltipAnchoredPositions = [
|
|
679
|
+
'top-center',
|
|
680
|
+
'center-right',
|
|
681
|
+
'bottom-center',
|
|
682
|
+
'center-left',
|
|
683
|
+
];
|
|
678
684
|
class TooltipComponent {
|
|
679
685
|
constructor() {
|
|
680
686
|
this.anchor = null;
|
|
681
687
|
this.theme = 'dark';
|
|
688
|
+
this.maxWidth = 'calc(var(--base-grid-size) * 50)';
|
|
689
|
+
this.preferredPosition = 'top-center';
|
|
682
690
|
this.onMouseEnter = new EventEmitter();
|
|
683
691
|
this.onMouseLeave = new EventEmitter();
|
|
684
692
|
this.isTemplate = isTemplate;
|
|
693
|
+
this.allowedPositions = [...TooltipAnchoredPositions];
|
|
685
694
|
}
|
|
686
695
|
_onMouseLeave(evt) {
|
|
687
696
|
this.onMouseLeave.emit(evt);
|
|
@@ -691,16 +700,20 @@ class TooltipComponent {
|
|
|
691
700
|
}
|
|
692
701
|
}
|
|
693
702
|
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
694
|
-
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, host: { listeners: { "mouseleave": "_onMouseLeave()", "mouseenter": "_onMouseEnter()" } }, ngImport: i0, template: "<riv-callout\n [anchor]=\"anchor\"\n [preferredPosition]=\"
|
|
703
|
+
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme", maxWidth: "maxWidth", preferredPosition: "preferredPosition" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, host: { listeners: { "mouseleave": "_onMouseLeave()", "mouseenter": "_onMouseEnter()" } }, ngImport: i0, template: "<riv-callout\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
695
704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
696
705
|
type: Component,
|
|
697
|
-
args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n [anchor]=\"anchor\"\n [preferredPosition]=\"
|
|
706
|
+
args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small)}\n"] }]
|
|
698
707
|
}], propDecorators: { anchor: [{
|
|
699
708
|
type: Input
|
|
700
709
|
}], content: [{
|
|
701
710
|
type: Input
|
|
702
711
|
}], theme: [{
|
|
703
712
|
type: Input
|
|
713
|
+
}], maxWidth: [{
|
|
714
|
+
type: Input
|
|
715
|
+
}], preferredPosition: [{
|
|
716
|
+
type: Input
|
|
704
717
|
}], onMouseEnter: [{
|
|
705
718
|
type: Output
|
|
706
719
|
}], onMouseLeave: [{
|
|
@@ -721,6 +734,8 @@ class TooltipDirective {
|
|
|
721
734
|
this.el = el;
|
|
722
735
|
this.applicationRef = applicationRef;
|
|
723
736
|
this.rivTooltipTheme = 'dark';
|
|
737
|
+
this.rivTooltipMaxWidth = 'calc(var(--base-grid-size) * 50)';
|
|
738
|
+
this.rivTooltipPreferredPosition = 'top-center';
|
|
724
739
|
this.closeDelay = 100;
|
|
725
740
|
}
|
|
726
741
|
onMouseEnter() {
|
|
@@ -736,6 +751,8 @@ class TooltipDirective {
|
|
|
736
751
|
tooltip.instance.anchor = this.el.nativeElement;
|
|
737
752
|
tooltip.instance.content = this.rivTooltip;
|
|
738
753
|
tooltip.instance.theme = this.rivTooltipTheme;
|
|
754
|
+
tooltip.instance.maxWidth = this.rivTooltipMaxWidth;
|
|
755
|
+
tooltip.instance.preferredPosition = this.rivTooltipPreferredPosition;
|
|
739
756
|
tooltip.instance.onMouseEnter.subscribe(this.cancelClose.bind(this));
|
|
740
757
|
tooltip.instance.onMouseLeave.subscribe(this.initiateClose.bind(this));
|
|
741
758
|
this.tooltipRef = tooltip;
|
|
@@ -756,7 +773,7 @@ class TooltipDirective {
|
|
|
756
773
|
}
|
|
757
774
|
}
|
|
758
775
|
TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
759
|
-
TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", closeDelay: "closeDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
|
|
776
|
+
TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", rivTooltipMaxWidth: "rivTooltipMaxWidth", rivTooltipPreferredPosition: "rivTooltipPreferredPosition", closeDelay: "closeDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
|
|
760
777
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
761
778
|
type: Directive,
|
|
762
779
|
args: [{
|
|
@@ -766,6 +783,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
766
783
|
type: Input
|
|
767
784
|
}], rivTooltipTheme: [{
|
|
768
785
|
type: Input
|
|
786
|
+
}], rivTooltipMaxWidth: [{
|
|
787
|
+
type: Input
|
|
788
|
+
}], rivTooltipPreferredPosition: [{
|
|
789
|
+
type: Input
|
|
769
790
|
}], closeDelay: [{
|
|
770
791
|
type: Input
|
|
771
792
|
}], onMouseEnter: [{
|
|
@@ -872,7 +893,7 @@ class DonutComponent {
|
|
|
872
893
|
}
|
|
873
894
|
}
|
|
874
895
|
DonutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
875
|
-
DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data", displayTooltip: "displayTooltip" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "closeDelay"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
896
|
+
DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data", displayTooltip: "displayTooltip" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "closeDelay"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
876
897
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, decorators: [{
|
|
877
898
|
type: Component,
|
|
878
899
|
args: [{ selector: 'riv-donut', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"100%\"\n [attr.height]=\"HEIGHT\"\n viewBox=\"-128 -128 256 256\"\n >\n <path\n *ngFor=\"let path of arcPaths; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"getFillStyle(i)\"\n ></path>\n </svg>\n <div class=\"display\">\n <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n <div class=\"label\">{{ displayLabel }}</div>\n </div>\n</div>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"] }]
|
|
@@ -899,7 +920,7 @@ class LegendItemComponent {
|
|
|
899
920
|
}
|
|
900
921
|
}
|
|
901
922
|
LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
902
|
-
LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n ></i>\n <riv-icon\n *ngIf=\"visibility === 'hidden'\"\n name=\"EyeOff\"\n [size]=\"16\"\n ></riv-icon>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "closeDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
923
|
+
LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n ></i>\n <riv-icon\n *ngIf=\"visibility === 'hidden'\"\n name=\"EyeOff\"\n [size]=\"16\"\n ></riv-icon>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "closeDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
903
924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
|
|
904
925
|
type: Component,
|
|
905
926
|
args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [style.background-color]=\"backgroundColor\"\n ></i>\n <riv-icon\n *ngIf=\"visibility === 'hidden'\"\n name=\"EyeOff\"\n [size]=\"16\"\n ></riv-icon>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"] }]
|
|
@@ -1480,5 +1501,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
1480
1501
|
* Generated bundle index. Do not edit.
|
|
1481
1502
|
*/
|
|
1482
1503
|
|
|
1483
|
-
export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DaysPipe, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, NumberPipe, PercentagePipe, RivModule, SmallCurrencyPipe, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, TooltipComponent, TooltipDirective, ZeroStateComponent };
|
|
1504
|
+
export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DaysPipe, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, NumberPipe, PercentagePipe, RivModule, SmallCurrencyPipe, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, TooltipAnchoredPositions, TooltipComponent, TooltipDirective, ZeroStateComponent };
|
|
1484
1505
|
//# sourceMappingURL=rivet-health-design-system.mjs.map
|