@rivet-health/design-system 41.0.1 → 41.1.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/fesm2022/rivet-health-design-system.mjs +143 -7
- package/fesm2022/rivet-health-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/global.css +19 -0
- package/styles/illustrations/searching.svg +86 -0
- package/styles/illustrations/unplugged.svg +106 -0
- package/types/rivet-health-design-system.d.ts +53 -3
|
@@ -3897,8 +3897,8 @@ var LoadingCoverComponent = class LoadingCoverComponent {
|
|
|
3897
3897
|
errorMessage: "errorMessage"
|
|
3898
3898
|
},
|
|
3899
3899
|
ngImport: i0,
|
|
3900
|
-
template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n *ngIf=\"errorMessage\"\n class=\"cover\"\n [style.z-index]=\"zIndexOverride ?? null\"\n>\n <
|
|
3901
|
-
styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error
|
|
3900
|
+
template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n *ngIf=\"errorMessage\"\n class=\"cover error\"\n [style.z-index]=\"zIndexOverride ?? null\"\n>\n <div class=\"illustration riv-illustration-unplugged\"></div>\n <span>{{ errorMessage }}</span>\n</div>\n",
|
|
3901
|
+
styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error{container-type:size;gap:var(--size-medium)}.illustration{width:min(100%,calc(var(--base-grid-size) * 60));max-height:50%;aspect-ratio:657 / 483}@container (height < 200px){.illustration{display:none}}\n"],
|
|
3902
3902
|
dependencies: [{
|
|
3903
3903
|
kind: "directive",
|
|
3904
3904
|
type: i1.NgIf,
|
|
@@ -3929,8 +3929,8 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
3929
3929
|
selector: "riv-loading-cover",
|
|
3930
3930
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
3931
3931
|
standalone: false,
|
|
3932
|
-
template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n *ngIf=\"errorMessage\"\n class=\"cover\"\n [style.z-index]=\"zIndexOverride ?? null\"\n>\n <
|
|
3933
|
-
styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error
|
|
3932
|
+
template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n *ngIf=\"errorMessage\"\n class=\"cover error\"\n [style.z-index]=\"zIndexOverride ?? null\"\n>\n <div class=\"illustration riv-illustration-unplugged\"></div>\n <span>{{ errorMessage }}</span>\n</div>\n",
|
|
3933
|
+
styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error{container-type:size;gap:var(--size-medium)}.illustration{width:min(100%,calc(var(--base-grid-size) * 60));max-height:50%;aspect-ratio:657 / 483}@container (height < 200px){.illustration{display:none}}\n"]
|
|
3934
3934
|
}]
|
|
3935
3935
|
}],
|
|
3936
3936
|
propDecorators: {
|
|
@@ -12220,6 +12220,138 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
12220
12220
|
"info"
|
|
12221
12221
|
];
|
|
12222
12222
|
})(BannerComponent || (BannerComponent = {}));
|
|
12223
|
+
var ErrorPageComponent = class ErrorPageComponent {
|
|
12224
|
+
constructor() {
|
|
12225
|
+
this.status = 500;
|
|
12226
|
+
this.retry = new EventEmitter();
|
|
12227
|
+
this.contactSupport = new EventEmitter();
|
|
12228
|
+
}
|
|
12229
|
+
get page() {
|
|
12230
|
+
return ErrorPageComponent.Pages[this.status];
|
|
12231
|
+
}
|
|
12232
|
+
get illustration() {
|
|
12233
|
+
return ErrorPageComponent.illustrationFor(this.status);
|
|
12234
|
+
}
|
|
12235
|
+
static {
|
|
12236
|
+
this.ɵfac = i0.ɵɵngDeclareFactory({
|
|
12237
|
+
minVersion: "12.0.0",
|
|
12238
|
+
version: "22.2.4",
|
|
12239
|
+
ngImport: i0,
|
|
12240
|
+
type: ErrorPageComponent,
|
|
12241
|
+
deps: [],
|
|
12242
|
+
target: i0.ɵɵFactoryTarget.Component
|
|
12243
|
+
});
|
|
12244
|
+
}
|
|
12245
|
+
static {
|
|
12246
|
+
this.ɵcmp = i0.ɵɵngDeclareComponent({
|
|
12247
|
+
minVersion: "14.0.0",
|
|
12248
|
+
version: "22.2.4",
|
|
12249
|
+
type: ErrorPageComponent,
|
|
12250
|
+
isStandalone: false,
|
|
12251
|
+
selector: "riv-error-page",
|
|
12252
|
+
inputs: { status: "status" },
|
|
12253
|
+
outputs: {
|
|
12254
|
+
retry: "retry",
|
|
12255
|
+
contactSupport: "contactSupport"
|
|
12256
|
+
},
|
|
12257
|
+
ngImport: i0,
|
|
12258
|
+
template: "<div class=\"content\">\n <h1 class=\"heading\">\n <span class=\"status\">{{ status }}</span>\n <span class=\"title\">{{ page.title }}</span>\n </h1>\n <div class=\"body\">\n <p class=\"message\">{{ page.message }}</p>\n <div class=\"actions\">\n <button\n *ngIf=\"page.retryable\"\n type=\"button\"\n rivButton\n (click)=\"retry.emit()\"\n >\n Try again\n </button>\n <button type=\"button\" rivButton (click)=\"contactSupport.emit()\">\n Contact support\n </button>\n </div>\n </div>\n</div>\n<div class=\"illustration riv-illustration-{{ illustration }}\"></div>\n",
|
|
12259
|
+
styles: [":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--size-xlarge);padding:var(--size-xxlarge);background-color:var(--purp-10)}.content{display:flex;flex-direction:column;gap:var(--size-xlarge);max-width:calc(var(--base-grid-size) * 88)}.heading{display:flex;flex-direction:column;gap:var(--size-xsmall)}.status{font:var(--font-weight-heavy) calc(var(--base-grid-size) * 41) / 1 var(--font-stack);color:#9980c1}.title{font:var(--title-06)}.body{display:flex;flex-direction:column;gap:var(--size-large)}.message{font:var(--body-medium)}.actions{display:flex;flex-wrap:wrap;gap:var(--size-small)}.illustration{flex:1 1 calc(var(--base-grid-size) * 75)}.riv-illustration-searching{max-width:461px;aspect-ratio:461 / 451}.riv-illustration-unplugged{max-width:657px;aspect-ratio:657 / 483}\n"],
|
|
12260
|
+
dependencies: [{
|
|
12261
|
+
kind: "directive",
|
|
12262
|
+
type: i1.NgIf,
|
|
12263
|
+
selector: "[ngIf]",
|
|
12264
|
+
inputs: [
|
|
12265
|
+
"ngIf",
|
|
12266
|
+
"ngIfThen",
|
|
12267
|
+
"ngIfElse"
|
|
12268
|
+
]
|
|
12269
|
+
}, {
|
|
12270
|
+
kind: "component",
|
|
12271
|
+
type: ButtonComponent,
|
|
12272
|
+
selector: "[rivButton]",
|
|
12273
|
+
inputs: [
|
|
12274
|
+
"locked",
|
|
12275
|
+
"disabled",
|
|
12276
|
+
"loading",
|
|
12277
|
+
"full",
|
|
12278
|
+
"size",
|
|
12279
|
+
"variant",
|
|
12280
|
+
"icon",
|
|
12281
|
+
"iconPosition",
|
|
12282
|
+
"current"
|
|
12283
|
+
]
|
|
12284
|
+
}],
|
|
12285
|
+
changeDetection: i0.ChangeDetectionStrategy.OnPush
|
|
12286
|
+
});
|
|
12287
|
+
}
|
|
12288
|
+
};
|
|
12289
|
+
i0.ɵɵngDeclareClassMetadata({
|
|
12290
|
+
minVersion: "12.0.0",
|
|
12291
|
+
version: "22.2.4",
|
|
12292
|
+
ngImport: i0,
|
|
12293
|
+
type: ErrorPageComponent,
|
|
12294
|
+
decorators: [{
|
|
12295
|
+
type: Component,
|
|
12296
|
+
args: [{
|
|
12297
|
+
selector: "riv-error-page",
|
|
12298
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
12299
|
+
standalone: false,
|
|
12300
|
+
template: "<div class=\"content\">\n <h1 class=\"heading\">\n <span class=\"status\">{{ status }}</span>\n <span class=\"title\">{{ page.title }}</span>\n </h1>\n <div class=\"body\">\n <p class=\"message\">{{ page.message }}</p>\n <div class=\"actions\">\n <button\n *ngIf=\"page.retryable\"\n type=\"button\"\n rivButton\n (click)=\"retry.emit()\"\n >\n Try again\n </button>\n <button type=\"button\" rivButton (click)=\"contactSupport.emit()\">\n Contact support\n </button>\n </div>\n </div>\n</div>\n<div class=\"illustration riv-illustration-{{ illustration }}\"></div>\n",
|
|
12301
|
+
styles: [":host{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--size-xlarge);padding:var(--size-xxlarge);background-color:var(--purp-10)}.content{display:flex;flex-direction:column;gap:var(--size-xlarge);max-width:calc(var(--base-grid-size) * 88)}.heading{display:flex;flex-direction:column;gap:var(--size-xsmall)}.status{font:var(--font-weight-heavy) calc(var(--base-grid-size) * 41) / 1 var(--font-stack);color:#9980c1}.title{font:var(--title-06)}.body{display:flex;flex-direction:column;gap:var(--size-large)}.message{font:var(--body-medium)}.actions{display:flex;flex-wrap:wrap;gap:var(--size-small)}.illustration{flex:1 1 calc(var(--base-grid-size) * 75)}.riv-illustration-searching{max-width:461px;aspect-ratio:461 / 451}.riv-illustration-unplugged{max-width:657px;aspect-ratio:657 / 483}\n"]
|
|
12302
|
+
}]
|
|
12303
|
+
}],
|
|
12304
|
+
propDecorators: {
|
|
12305
|
+
status: [{ type: Input }],
|
|
12306
|
+
retry: [{ type: Output }],
|
|
12307
|
+
contactSupport: [{ type: Output }]
|
|
12308
|
+
}
|
|
12309
|
+
});
|
|
12310
|
+
(function(ErrorPageComponent) {
|
|
12311
|
+
ErrorPageComponent.Statuses = [
|
|
12312
|
+
400,
|
|
12313
|
+
403,
|
|
12314
|
+
404,
|
|
12315
|
+
500,
|
|
12316
|
+
503
|
|
12317
|
+
];
|
|
12318
|
+
ErrorPageComponent.Illustrations = ["searching", "unplugged"];
|
|
12319
|
+
ErrorPageComponent.Pages = {
|
|
12320
|
+
400: {
|
|
12321
|
+
title: "Bad page request",
|
|
12322
|
+
message: "We ran into a problem with your request, likely due to incorrect or missing information. Try refreshing the page, submitting your request again, or clearing your browser cache.",
|
|
12323
|
+
retryable: true
|
|
12324
|
+
},
|
|
12325
|
+
403: {
|
|
12326
|
+
title: "Access denied",
|
|
12327
|
+
message: "You don't have access to this page. If you think you should, ask your account admin for access or contact support.",
|
|
12328
|
+
retryable: false
|
|
12329
|
+
},
|
|
12330
|
+
404: {
|
|
12331
|
+
title: "Page not found",
|
|
12332
|
+
message: "We couldn't find that page. It may have moved, been renamed, or the link is outdated. Double check the URL or return to Rivet to keep going.",
|
|
12333
|
+
retryable: false
|
|
12334
|
+
},
|
|
12335
|
+
500: {
|
|
12336
|
+
title: "Internal server error",
|
|
12337
|
+
message: "We hit an unexpected error processing your request. Our engineering team has been automatically alerted. Don't worry - any actions you've taken or data you've submitted haven't been lost.",
|
|
12338
|
+
retryable: true
|
|
12339
|
+
},
|
|
12340
|
+
503: {
|
|
12341
|
+
title: "Service unavailable",
|
|
12342
|
+
message: "The app is temporarily unavailable due to scheduled maintenance or high traffic. It should be back up shortly.",
|
|
12343
|
+
retryable: true
|
|
12344
|
+
}
|
|
12345
|
+
};
|
|
12346
|
+
function statusFor(httpStatus) {
|
|
12347
|
+
return ErrorPageComponent.Statuses.find((status) => status === httpStatus) ?? (httpStatus >= 400 && httpStatus < 500 ? 400 : 500);
|
|
12348
|
+
}
|
|
12349
|
+
ErrorPageComponent.statusFor = statusFor;
|
|
12350
|
+
function illustrationFor(status) {
|
|
12351
|
+
return status < 500 ? "searching" : "unplugged";
|
|
12352
|
+
}
|
|
12353
|
+
ErrorPageComponent.illustrationFor = illustrationFor;
|
|
12354
|
+
})(ErrorPageComponent || (ErrorPageComponent = {}));
|
|
12223
12355
|
const mapIndicators = {
|
|
12224
12356
|
SingleSmall: `<svg aria-label="single small map-indicator" width="12" height="16" viewBox="0 0 12 16" fill="none" xmlns="http://www.w3.org/2000/svg" filter="drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25))"><path d="M11.9949 6.4C11.8159 10.8779 5.99968 16 5.99968 16C5.99968 16 0.174787 10.968 0.00444185 6.4C-0.12727 2.86798 2.6886 0 5.99968 0C9.31074 0 12.1361 2.86837 11.9949 6.4Z" fill="white"/></svg>`,
|
|
12225
12357
|
SingleRegular: `<svg aria-label="single regular map-indicator" width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg" filter="drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.25))"><path d="M18 8.8C18 14.08 9 22 9 22C9 22 0 14.08 0 8.8C0 3.93989 4.02943 0 9 0C13.9705 0 18 3.93989 18 8.8Z" fill="white"/></svg>`,
|
|
@@ -20363,7 +20495,7 @@ var ChartComponent = class ChartComponent {
|
|
|
20363
20495
|
}],
|
|
20364
20496
|
ngImport: i0,
|
|
20365
20497
|
template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"{ d: drawData$ | async } as vm\"\n [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n <ng-container\n *ngIf=\"\n !checkForNonDisplayState(vm.d) && (drawData$ | async);\n let d;\n else: nonDisplayState\n \"\n >\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n class=\"sub-container\"\n [class.clickable]=\"isHoverClickable\"\n tabIndex=\"0\"\n [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n [ngStyle]=\"{\n height: getSubcontainerHeight(d),\n width: getSubcontainerWidth(d)\n }\"\n >\n <svg:svg\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.viewBox]=\"d.viewBox\"\n [attr.height]=\"d.chartHeight\"\n [attr.width]=\"d.chartWidth\"\n >\n <defs>\n <!-- Stripe pattern -->\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"10\"\n [attr.height]=\"10\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n [attr.x1]=\"0\"\n [attr.y1]=\"10\"\n [attr.x2]=\"10\"\n [attr.y2]=\"0\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"getBottomLabelY(d)\"\n >\n {{ tick.label }}\n </text>\n </g>\n </ng-container>\n <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"d.chartSizingValues.fontSize\"\n >\n {{ tick.label }}\n </text>\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"d.chartHeight\"\n ></line>\n <text\n *ngIf=\"tick.secondaryLabel\"\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"getBottomLabelY(d)\"\n >\n {{ tick.secondaryLabel }}\n </text>\n </g>\n </ng-container>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n *ngIf=\"!(config.type === 'horizontal-bar')\"\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"d.chartWidth\"\n ></line>\n <text\n rivSVGTextTruncate\n [text]=\"tick.label\"\n [width]=\"\n config.type === 'horizontal-bar'\n ? d.chartSizingValues.leftBucketLabel\n : d.chartSizingValues.leftPadding\n \"\n class=\"tick-label\"\n [attr.y]=\"tick.y\"\n [attr.x]=\"0\"\n >\n {{ tick.label }}\n </text>\n <text\n *ngIf=\"tick.secondaryLabel\"\n rivSVGTextTruncate\n [text]=\"tick.secondaryLabel\"\n [width]=\"d.chartSizingValues.rightPadding\"\n class=\"tick-label\"\n [attr.y]=\"tick.y\"\n [attr.x]=\"d.chartWidth\"\n text-anchor=\"end\"\n >\n {{ tick.secondaryLabel }}\n </text>\n </g>\n <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n <g\n *ngIf=\"config.type !== 'horizontal-bar' && config.type !== 'donut'\"\n >\n <line\n class=\"tick-line\"\n [attr.x1]=\"hoverData?.x\"\n [attr.x2]=\"hoverData?.x\"\n y1=\"0\"\n [attr.y2]=\"d.chartHeight\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n </ng-container>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <ng-container *ngFor=\"let rect of bar; let j = index\">\n <defs *ngIf=\"rect.pattern === 'dots'\">\n <pattern\n [attr.id]=\"'dots-' + i + '-' + j\"\n patternUnits=\"userSpaceOnUse\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n width=\"4\"\n height=\"4\"\n >\n <circle\n cx=\"2\"\n cy=\"2\"\n r=\"1.5\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></circle>\n </pattern>\n </defs>\n\n <rect\n *ngIf=\"rect.nonDisplay !== true\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"\n rect.pattern === 'dots'\n ? 'url(#dots-' + i + '-' + j + ')'\n : getBarColor(rect, d.colors, i, hover)\n \"\n [attr.stroke]=\"\n showBarBorders(rect, hover) ? varWrap('--black-100') : undefined\n \"\n [attr.stroke-width]=\"showBarBorders(rect, hover) ? 1 : undefined\"\n ></rect>\n <rect\n *ngIf=\"showNonDisplayRect(rect, hover)\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"transparent\"\n [attr.stroke]=\"varWrap('--black-100')\"\n [attr.stroke-width]=\"1\"\n ></rect>\n <rect\n *ngIf=\"rect.pattern === 'striped'\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"url(#stripes)\"\n ></rect>\n </ng-container>\n </g>\n <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n <ng-container *ngFor=\"let indBar of bar; let j = index\">\n <defs *ngIf=\"indBar.pattern === 'dots'\">\n <pattern\n [attr.id]=\"'dots-' + i + '-' + j\"\n patternUnits=\"userSpaceOnUse\"\n [attr.x]=\"indBar.x\"\n [attr.y]=\"indBar.y\"\n width=\"4\"\n height=\"4\"\n >\n <circle\n cx=\"2\"\n cy=\"2\"\n r=\"1.5\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></circle>\n </pattern>\n </defs>\n <path\n [attr.d]=\"indBar.horizontalBar\"\n [attr.fill]=\"\n indBar.pattern === 'dots'\n ? 'url(#dots-' + i + '-' + j + ')'\n : varColor(d.colors, i)\n \"\n [attr.stroke]=\"\n indBar.pattern === 'dots' ? 'none' : varColor(d.colors, i)\n \"\n [attr.stroke-width]=\"indBar.pattern === 'dots' ? 0 : 2\"\n />\n <path\n *ngIf=\"indBar.pattern === 'striped'\"\n [attr.d]=\"indBar.horizontalBar\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"url(#stripes)\"\n stroke-width=\"0\"\n />\n </ng-container>\n </g>\n <g *ngFor=\"let gradient of d.gradients; let i = index\">\n <ng-container *ngFor=\"let rect of gradient; let j = index\">\n <defs>\n <linearGradient\n [attr.id]=\"'grad-' + i + '-' + j\"\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"1\"\n >\n <stop offset=\"0%\" [attr.stop-color]=\"varColor(d.colors, i)\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </linearGradient>\n </defs>\n <rect\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"'url(#grad-' + i + '-' + j + ')'\"\n opacity=\"0.4\"\n ></rect>\n </ng-container>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line.line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n [attr.stroke-linecap]=\"\n line.pattern === 'dots' ? 'round' : undefined\n \"\n [attr.stroke-linejoin]=\"\n line.pattern === 'dots' ? 'round' : undefined\n \"\n [attr.stroke-dasharray]=\"\n line.pattern === 'striped'\n ? '10 10'\n : line.pattern === 'dots'\n ? '0.25 7'\n : undefined\n \"\n ></path>\n </g>\n <g *ngFor=\"let lineSinglePointFallback of d.circles; let i = index\">\n <circle\n class=\"marker\"\n [attr.cx]=\"lineSinglePointFallback.cx\"\n [attr.cy]=\"lineSinglePointFallback.cy\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n <circle\n class=\"marker\"\n *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n [attr.cx]=\"hoverData?.x\"\n [attr.cy]=\"hoverData?.ys?.[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </ng-container>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area.area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n <path\n *ngIf=\"area.pattern === 'striped'\"\n [attr.d]=\"area.area\"\n fill=\"url(#stripes)\"\n ></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n <circle\n class=\"marker\"\n *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n [attr.cx]=\"hoverData?.x\"\n [attr.cy]=\"hoverData?.ys?.[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </ng-container>\n </g>\n <g *ngFor=\"let wLine of d.waterfallLines\">\n <line\n class=\"waterfall-line\"\n [attr.x1]=\"wLine.x1\"\n [attr.x2]=\"wLine.x2\"\n [attr.y1]=\"wLine.y1\"\n [attr.y2]=\"wLine.y2\"\n stroke-width=\"1\"\n stroke-dasharray=\"6\"\n />\n </g>\n <path\n *ngFor=\"let path of d.arcs; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></path>\n <g *ngFor=\"let dataLabel of d.dataLabels; let i = index\">\n <text\n *ngIf=\"config.showDataLabels && dataLabel.label\"\n [ngClass]=\"getDataLabelClass(dataLabel, config, hover)\"\n [attr.y]=\"dataLabel.yPos\"\n [attr.x]=\"dataLabel.xPos\"\n [attr.text-anchor]=\"dataLabel.anchor\"\n [attr.font-weight]=\"\n dataLabel.bold\n ? 'var(--font-weight-heavy)'\n : 'var(--font-weight-normal)'\n \"\n [attr.opacity]=\"getDataLabelOpacity(dataLabel, config, hover)\"\n >\n {{ dataLabel.label }}\n </text>\n <line\n *ngIf=\"dataLabel.line && config.showDataLabels\"\n [attr.y1]=\"dataLabel.line.y1\"\n [attr.y2]=\"dataLabel.line.y2\"\n [attr.x1]=\"dataLabel.line.x1\"\n [attr.x2]=\"dataLabel.line.x2\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></line>\n </g>\n <g *ngFor=\"let connection of d.flowConnections\">\n <path\n [attr.d]=\"connection.path\"\n [attr.fill]=\"getConnectionColor()\"\n [attr.opacity]=\"getConnectionOpacity(connection, hover)\"\n />\n </g>\n </svg:svg>\n <div *ngIf=\"config.type === 'donut'\" class=\"donut-display\">\n <div class=\"donut-value\" [ngClass]=\"config.donutDisplayInfo.size\">\n {{ config.donutDisplayInfo.displayValue }}\n </div>\n <div class=\"donut-label\">\n {{ config.donutDisplayInfo.displayLabel }}\n </div>\n </div>\n <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n <riv-callout\n *riv-overlay\n [anchor]=\"\n hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n \"\n [isModal]=\"false\"\n [preferredPosition]=\"\n hoverData?.tooltip?.preferredPosition ?? 'center-right'\n \"\n [theme]=\"'light'\"\n >\n <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n <ng-container\n [ngTemplateOutlet]=\"tooltipTemplate\"\n [ngTemplateOutletContext]=\"{\n xIndex: hoverData.xIndex,\n yIndex: hoverData.yIndex,\n isSuppValue: hoverData.isSuppValue,\n suppYIndex: hoverData.suppYIndex,\n isDropOff: hoverData.isDropOff\n }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultTooltip>\n <div class=\"callout-content\">\n <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n {{ hoverData?.tooltip?.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item\n [colorToken]=\"metric.color\"\n [style]=\"metric.pattern || 'solid'\"\n ></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </ng-template>\n </riv-callout>\n </ng-container>\n <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n <riv-callout\n *riv-overlay\n [anchor]=\"\n hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n \"\n [isModal]=\"false\"\n [preferredPosition]=\"'top-center'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n <ng-container\n *ngIf=\"\n getBucketConfigInfo(hoverData, 'startId') as startConfig\n \"\n >\n <riv-issue\n [label]=\"startConfig.title\"\n [colorToken]=\"startConfig.color\"\n ></riv-issue>\n </ng-container>\n ->\n <ng-container\n *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n >\n <riv-issue\n [label]=\"endConfig.title\"\n [colorToken]=\"endConfig.color\"\n ></riv-issue>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n <ng-container\n *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n >\n <riv-issue\n [label]=\"barConfig.title\"\n [colorToken]=\"barConfig.color\"\n ></riv-issue>\n </ng-container>\n </ng-container>\n </div>\n <div\n *ngIf=\"hoverData?.tooltip?.subtitle\"\n class=\"callout-row flow-subtitle\"\n >\n {{ hoverData?.tooltip?.subtitle }}\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend *ngIf=\"d.data.type !== 'flow'\">\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n [label]=\"item.label\"\n [style]=\"item.pattern || 'solid'\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n [colorToken]=\"getItemColor(item, i)\"\n (itemClick)=\"toggleLegend(item, i)\"\n ></riv-legend-item>\n </ng-container>\n <ng-container\n *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n >\n <riv-legend-item\n *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n [label]=\"item.label\"\n [style]=\"item.pattern || 'solid'\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n [colorToken]=\"getItemColor(item, i)\"\n (itemClick)=\"toggleLegend(item, i)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi.hiddenCount\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ fi.hiddenCount }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n *riv-overlay\n [anchor]=\"\n $safeNavigationMigration(moreTextContainer?.nativeElement)\n \"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"closeHandler()\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n [label]=\"item.label\"\n [style]=\"item.pattern || 'solid'\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n [colorToken]=\"getItemColor(item, i)\"\n (itemClick)=\"toggleLegend(item, i)\"\n ></riv-legend-item>\n </ng-container>\n <ng-container\n *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n >\n <riv-legend-item\n *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n [label]=\"item.label\"\n [style]=\"item.pattern || 'solid'\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [colorToken]=\"getItemColor(item, i)\"\n [clickable]=\"config.allowLegendToggle\"\n [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n (itemClick)=\"toggleLegend(item, i)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n <riv-zero-state\n *ngIf=\"type === 'zeroState'\"\n [message]=\"config.zeroStateMessage\"\n ></riv-zero-state>\n <riv-zero-state\n *ngIf=\"type === 'sizingErrorState'\"\n [message]=\"config.sizingErrorStateMessage\"\n ></riv-zero-state>\n </ng-container>\n</ng-template>\n",
|
|
20366
|
-
styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-
|
|
20498
|
+
styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-xlarge)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"],
|
|
20367
20499
|
dependencies: [
|
|
20368
20500
|
{
|
|
20369
20501
|
kind: "directive",
|
|
@@ -20507,7 +20639,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
20507
20639
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
20508
20640
|
standalone: false,
|
|
20509
20641
|
template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"{ d: drawData$ | async } as vm\"\n [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n <ng-container\n *ngIf=\"\n !checkForNonDisplayState(vm.d) && (drawData$ | async);\n let d;\n else: nonDisplayState\n \"\n >\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n class=\"sub-container\"\n [class.clickable]=\"isHoverClickable\"\n tabIndex=\"0\"\n [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n [ngStyle]=\"{\n height: getSubcontainerHeight(d),\n width: getSubcontainerWidth(d)\n }\"\n >\n <svg:svg\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.viewBox]=\"d.viewBox\"\n [attr.height]=\"d.chartHeight\"\n [attr.width]=\"d.chartWidth\"\n >\n <defs>\n <!-- Stripe pattern -->\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"10\"\n [attr.height]=\"10\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n [attr.x1]=\"0\"\n [attr.y1]=\"10\"\n [attr.x2]=\"10\"\n [attr.y2]=\"0\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"getBottomLabelY(d)\"\n >\n {{ tick.label }}\n </text>\n </g>\n </ng-container>\n <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"d.chartSizingValues.fontSize\"\n >\n {{ tick.label }}\n </text>\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"d.chartHeight\"\n ></line>\n <text\n *ngIf=\"tick.secondaryLabel\"\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"getBottomLabelY(d)\"\n >\n {{ tick.secondaryLabel }}\n </text>\n </g>\n </ng-container>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n *ngIf=\"!(config.type === 'horizontal-bar')\"\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"d.chartWidth\"\n ></line>\n <text\n rivSVGTextTruncate\n [text]=\"tick.label\"\n [width]=\"\n config.type === 'horizontal-bar'\n ? d.chartSizingValues.leftBucketLabel\n : d.chartSizingValues.leftPadding\n \"\n class=\"tick-label\"\n [attr.y]=\"tick.y\"\n [attr.x]=\"0\"\n >\n {{ tick.label }}\n </text>\n <text\n *ngIf=\"tick.secondaryLabel\"\n rivSVGTextTruncate\n [text]=\"tick.secondaryLabel\"\n [width]=\"d.chartSizingValues.rightPadding\"\n class=\"tick-label\"\n [attr.y]=\"tick.y\"\n [attr.x]=\"d.chartWidth\"\n text-anchor=\"end\"\n >\n {{ tick.secondaryLabel }}\n </text>\n </g>\n <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n <g\n *ngIf=\"config.type !== 'horizontal-bar' && config.type !== 'donut'\"\n >\n <line\n class=\"tick-line\"\n [attr.x1]=\"hoverData?.x\"\n [attr.x2]=\"hoverData?.x\"\n y1=\"0\"\n [attr.y2]=\"d.chartHeight\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n </ng-container>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <ng-container *ngFor=\"let rect of bar; let j = index\">\n <defs *ngIf=\"rect.pattern === 'dots'\">\n <pattern\n [attr.id]=\"'dots-' + i + '-' + j\"\n patternUnits=\"userSpaceOnUse\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n width=\"4\"\n height=\"4\"\n >\n <circle\n cx=\"2\"\n cy=\"2\"\n r=\"1.5\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></circle>\n </pattern>\n </defs>\n\n <rect\n *ngIf=\"rect.nonDisplay !== true\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"\n rect.pattern === 'dots'\n ? 'url(#dots-' + i + '-' + j + ')'\n : getBarColor(rect, d.colors, i, hover)\n \"\n [attr.stroke]=\"\n showBarBorders(rect, hover) ? varWrap('--black-100') : undefined\n \"\n [attr.stroke-width]=\"showBarBorders(rect, hover) ? 1 : undefined\"\n ></rect>\n <rect\n *ngIf=\"showNonDisplayRect(rect, hover)\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"transparent\"\n [attr.stroke]=\"varWrap('--black-100')\"\n [attr.stroke-width]=\"1\"\n ></rect>\n <rect\n *ngIf=\"rect.pattern === 'striped'\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"url(#stripes)\"\n ></rect>\n </ng-container>\n </g>\n <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n <ng-container *ngFor=\"let indBar of bar; let j = index\">\n <defs *ngIf=\"indBar.pattern === 'dots'\">\n <pattern\n [attr.id]=\"'dots-' + i + '-' + j\"\n patternUnits=\"userSpaceOnUse\"\n [attr.x]=\"indBar.x\"\n [attr.y]=\"indBar.y\"\n width=\"4\"\n height=\"4\"\n >\n <circle\n cx=\"2\"\n cy=\"2\"\n r=\"1.5\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></circle>\n </pattern>\n </defs>\n <path\n [attr.d]=\"indBar.horizontalBar\"\n [attr.fill]=\"\n indBar.pattern === 'dots'\n ? 'url(#dots-' + i + '-' + j + ')'\n : varColor(d.colors, i)\n \"\n [attr.stroke]=\"\n indBar.pattern === 'dots' ? 'none' : varColor(d.colors, i)\n \"\n [attr.stroke-width]=\"indBar.pattern === 'dots' ? 0 : 2\"\n />\n <path\n *ngIf=\"indBar.pattern === 'striped'\"\n [attr.d]=\"indBar.horizontalBar\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"url(#stripes)\"\n stroke-width=\"0\"\n />\n </ng-container>\n </g>\n <g *ngFor=\"let gradient of d.gradients; let i = index\">\n <ng-container *ngFor=\"let rect of gradient; let j = index\">\n <defs>\n <linearGradient\n [attr.id]=\"'grad-' + i + '-' + j\"\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"1\"\n >\n <stop offset=\"0%\" [attr.stop-color]=\"varColor(d.colors, i)\" />\n <stop offset=\"100%\" stop-color=\"white\" />\n </linearGradient>\n </defs>\n <rect\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"'url(#grad-' + i + '-' + j + ')'\"\n opacity=\"0.4\"\n ></rect>\n </ng-container>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line.line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\n [attr.stroke-linecap]=\"\n line.pattern === 'dots' ? 'round' : undefined\n \"\n [attr.stroke-linejoin]=\"\n line.pattern === 'dots' ? 'round' : undefined\n \"\n [attr.stroke-dasharray]=\"\n line.pattern === 'striped'\n ? '10 10'\n : line.pattern === 'dots'\n ? '0.25 7'\n : undefined\n \"\n ></path>\n </g>\n <g *ngFor=\"let lineSinglePointFallback of d.circles; let i = index\">\n <circle\n class=\"marker\"\n [attr.cx]=\"lineSinglePointFallback.cx\"\n [attr.cy]=\"lineSinglePointFallback.cy\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n <circle\n class=\"marker\"\n *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n [attr.cx]=\"hoverData?.x\"\n [attr.cy]=\"hoverData?.ys?.[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </ng-container>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area.area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n <path\n *ngIf=\"area.pattern === 'striped'\"\n [attr.d]=\"area.area\"\n fill=\"url(#stripes)\"\n ></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n <circle\n class=\"marker\"\n *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n [attr.cx]=\"hoverData?.x\"\n [attr.cy]=\"hoverData?.ys?.[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </ng-container>\n </g>\n <g *ngFor=\"let wLine of d.waterfallLines\">\n <line\n class=\"waterfall-line\"\n [attr.x1]=\"wLine.x1\"\n [attr.x2]=\"wLine.x2\"\n [attr.y1]=\"wLine.y1\"\n [attr.y2]=\"wLine.y2\"\n stroke-width=\"1\"\n stroke-dasharray=\"6\"\n />\n </g>\n <path\n *ngFor=\"let path of d.arcs; let i = index\"\n [attr.d]=\"path\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></path>\n <g *ngFor=\"let dataLabel of d.dataLabels; let i = index\">\n <text\n *ngIf=\"config.showDataLabels && dataLabel.label\"\n [ngClass]=\"getDataLabelClass(dataLabel, config, hover)\"\n [attr.y]=\"dataLabel.yPos\"\n [attr.x]=\"dataLabel.xPos\"\n [attr.text-anchor]=\"dataLabel.anchor\"\n [attr.font-weight]=\"\n dataLabel.bold\n ? 'var(--font-weight-heavy)'\n : 'var(--font-weight-normal)'\n \"\n [attr.opacity]=\"getDataLabelOpacity(dataLabel, config, hover)\"\n >\n {{ dataLabel.label }}\n </text>\n <line\n *ngIf=\"dataLabel.line && config.showDataLabels\"\n [attr.y1]=\"dataLabel.line.y1\"\n [attr.y2]=\"dataLabel.line.y2\"\n [attr.x1]=\"dataLabel.line.x1\"\n [attr.x2]=\"dataLabel.line.x2\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></line>\n </g>\n <g *ngFor=\"let connection of d.flowConnections\">\n <path\n [attr.d]=\"connection.path\"\n [attr.fill]=\"getConnectionColor()\"\n [attr.opacity]=\"getConnectionOpacity(connection, hover)\"\n />\n </g>\n </svg:svg>\n <div *ngIf=\"config.type === 'donut'\" class=\"donut-display\">\n <div class=\"donut-value\" [ngClass]=\"config.donutDisplayInfo.size\">\n {{ config.donutDisplayInfo.displayValue }}\n </div>\n <div class=\"donut-label\">\n {{ config.donutDisplayInfo.displayLabel }}\n </div>\n </div>\n <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n <riv-callout\n *riv-overlay\n [anchor]=\"\n hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n \"\n [isModal]=\"false\"\n [preferredPosition]=\"\n hoverData?.tooltip?.preferredPosition ?? 'center-right'\n \"\n [theme]=\"'light'\"\n >\n <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n <ng-container\n [ngTemplateOutlet]=\"tooltipTemplate\"\n [ngTemplateOutletContext]=\"{\n xIndex: hoverData.xIndex,\n yIndex: hoverData.yIndex,\n isSuppValue: hoverData.isSuppValue,\n suppYIndex: hoverData.suppYIndex,\n isDropOff: hoverData.isDropOff\n }\"\n ></ng-container>\n </ng-container>\n <ng-template #defaultTooltip>\n <div class=\"callout-content\">\n <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n {{ hoverData?.tooltip?.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item\n [colorToken]=\"metric.color\"\n [style]=\"metric.pattern || 'solid'\"\n ></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </ng-template>\n </riv-callout>\n </ng-container>\n <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n <riv-callout\n *riv-overlay\n [anchor]=\"\n hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n \"\n [isModal]=\"false\"\n [preferredPosition]=\"'top-center'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n <ng-container\n *ngIf=\"\n getBucketConfigInfo(hoverData, 'startId') as startConfig\n \"\n >\n <riv-issue\n [label]=\"startConfig.title\"\n [colorToken]=\"startConfig.color\"\n ></riv-issue>\n </ng-container>\n ->\n <ng-container\n *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n >\n <riv-issue\n [label]=\"endConfig.title\"\n [colorToken]=\"endConfig.color\"\n ></riv-issue>\n </ng-container>\n </ng-container>\n <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n <ng-container\n *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n >\n <riv-issue\n [label]=\"barConfig.title\"\n [colorToken]=\"barConfig.color\"\n ></riv-issue>\n </ng-container>\n </ng-container>\n </div>\n <div\n *ngIf=\"hoverData?.tooltip?.subtitle\"\n class=\"callout-row flow-subtitle\"\n >\n {{ hoverData?.tooltip?.subtitle }}\n </div>\n </div>\n </riv-callout>\n </ng-container>\n </div>\n <legend *ngIf=\"d.data.type !== 'flow'\">\n <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n [label]=\"item.label\"\n [style]=\"item.pattern || 'solid'\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n [colorToken]=\"getItemColor(item, i)\"\n (itemClick)=\"toggleLegend(item, i)\"\n ></riv-legend-item>\n </ng-container>\n <ng-container\n *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n >\n <riv-legend-item\n *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n [label]=\"item.label\"\n [style]=\"item.pattern || 'solid'\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n [colorToken]=\"getItemColor(item, i)\"\n (itemClick)=\"toggleLegend(item, i)\"\n ></riv-legend-item>\n </ng-container>\n <div\n #moreTextContainer\n class=\"more-text-container\"\n (mouseover)=\"mouseoverLegend()\"\n (mouseleave)=\"mouseleaveLegend()\"\n (click)=\"moreClick()\"\n *ngIf=\"fi.hiddenCount\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ fi.hiddenCount }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n *riv-overlay\n [anchor]=\"\n $safeNavigationMigration(moreTextContainer?.nativeElement)\n \"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"closeHandler()\"\n [preferredPosition]=\"'bottom-right'\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n >\n <div class=\"legend-tooltip\">\n <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n <riv-legend-item\n *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n [label]=\"item.label\"\n [style]=\"item.pattern || 'solid'\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n [colorToken]=\"getItemColor(item, i)\"\n (itemClick)=\"toggleLegend(item, i)\"\n ></riv-legend-item>\n </ng-container>\n <ng-container\n *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n >\n <riv-legend-item\n *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n [label]=\"item.label\"\n [style]=\"item.pattern || 'solid'\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [colorToken]=\"getItemColor(item, i)\"\n [clickable]=\"config.allowLegendToggle\"\n [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n (itemClick)=\"toggleLegend(item, i)\"\n ></riv-legend-item>\n </ng-container>\n </div>\n </riv-callout>\n </ng-container>\n </ng-container>\n </legend>\n </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n <riv-zero-state\n *ngIf=\"type === 'zeroState'\"\n [message]=\"config.zeroStateMessage\"\n ></riv-zero-state>\n <riv-zero-state\n *ngIf=\"type === 'sizingErrorState'\"\n [message]=\"config.sizingErrorStateMessage\"\n ></riv-zero-state>\n </ng-container>\n</ng-template>\n",
|
|
20510
|
-
styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-
|
|
20642
|
+
styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-xlarge)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"]
|
|
20511
20643
|
}]
|
|
20512
20644
|
}],
|
|
20513
20645
|
ctorParameters: () => [{ type: i0.ChangeDetectorRef }],
|
|
@@ -22873,6 +23005,7 @@ var RivModule = class RivModule {
|
|
|
22873
23005
|
DonutComponent,
|
|
22874
23006
|
EditableHeadingComponent,
|
|
22875
23007
|
EditViewComponent,
|
|
23008
|
+
ErrorPageComponent,
|
|
22876
23009
|
FilterChipComponent,
|
|
22877
23010
|
FilterDropdownComponent,
|
|
22878
23011
|
FormDialogComponent,
|
|
@@ -22989,6 +23122,7 @@ var RivModule = class RivModule {
|
|
|
22989
23122
|
DonutComponent,
|
|
22990
23123
|
EditableHeadingComponent,
|
|
22991
23124
|
EditViewComponent,
|
|
23125
|
+
ErrorPageComponent,
|
|
22992
23126
|
FilterChipComponent,
|
|
22993
23127
|
FilterDropdownComponent,
|
|
22994
23128
|
FormDialogComponent,
|
|
@@ -23122,6 +23256,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
23122
23256
|
DonutComponent,
|
|
23123
23257
|
EditableHeadingComponent,
|
|
23124
23258
|
EditViewComponent,
|
|
23259
|
+
ErrorPageComponent,
|
|
23125
23260
|
FilterChipComponent,
|
|
23126
23261
|
FilterDropdownComponent,
|
|
23127
23262
|
FormDialogComponent,
|
|
@@ -23237,6 +23372,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
23237
23372
|
DonutComponent,
|
|
23238
23373
|
EditableHeadingComponent,
|
|
23239
23374
|
EditViewComponent,
|
|
23375
|
+
ErrorPageComponent,
|
|
23240
23376
|
FilterChipComponent,
|
|
23241
23377
|
FilterDropdownComponent,
|
|
23242
23378
|
FormDialogComponent,
|
|
@@ -23320,6 +23456,6 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
23320
23456
|
}]
|
|
23321
23457
|
}]
|
|
23322
23458
|
});
|
|
23323
|
-
export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardActionsComponent, CardCheckboxComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardLinkComponent, CardMediaComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, EditableHeadingComponent, FilterChipComponent, FilterDropdownComponent, FormDialogComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SettingRowComponent, SideSheetComponent, SimpleSelectComponent, SimpleTabComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SimpleTabsComponent, SizeDirective, SmallCurrencyPipe, SmallNumberPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableCollapseAllComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
|
|
23459
|
+
export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardActionsComponent, CardCheckboxComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardLinkComponent, CardMediaComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, EditableHeadingComponent, ErrorPageComponent, FilterChipComponent, FilterDropdownComponent, FormDialogComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SettingRowComponent, SideSheetComponent, SimpleSelectComponent, SimpleTabComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SimpleTabsComponent, SizeDirective, SmallCurrencyPipe, SmallNumberPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableCollapseAllComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
|
|
23324
23460
|
|
|
23325
23461
|
//# sourceMappingURL=rivet-health-design-system.mjs.map
|