@rivet-health/design-system 40.44.2 → 40.44.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/accessibility/sr-only/sr-only.component.mjs +3 -3
- package/esm2022/lib/download/download.service.mjs +3 -3
- package/esm2022/lib/format/pipes/date.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/days.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/dollars.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/number.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/percentage.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/sentence-case.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/small-currency.pipe.mjs +3 -3
- package/esm2022/lib/format/pipes/small-number.pipe.mjs +3 -3
- package/esm2022/lib/format/svg-text-truncate/svg-text-truncate.directive.mjs +3 -3
- package/esm2022/lib/format/truncate/truncate.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/input/alphabetic-field/alphabetic-field.component.mjs +3 -3
- package/esm2022/lib/input/auto-focus/auto-focus.directive.mjs +3 -3
- package/esm2022/lib/input/button/button.component.mjs +3 -3
- package/esm2022/lib/input/button-group/button-group.component.mjs +3 -3
- package/esm2022/lib/input/calendar/calendar.component.mjs +3 -3
- package/esm2022/lib/input/card-checkbox/card-checkbox.component.mjs +3 -3
- package/esm2022/lib/input/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/input/currency-field/currency-field.component.mjs +3 -3
- package/esm2022/lib/input/date/date.component.mjs +3 -3
- package/esm2022/lib/input/date-range/date-range.component.mjs +3 -3
- package/esm2022/lib/input/filter-chip/filter-chip.component.mjs +3 -3
- package/esm2022/lib/input/filter-dropdown/filter-dropdown.component.mjs +3 -3
- package/esm2022/lib/input/input-label/input-label.component.mjs +3 -3
- package/esm2022/lib/input/mentions-input/mentions-input.component.mjs +3 -3
- package/esm2022/lib/input/number-field/number-field.component.mjs +3 -3
- package/esm2022/lib/input/percentage-field/percentage-field.component.mjs +3 -3
- package/esm2022/lib/input/phone-field/phone-field.component.mjs +3 -3
- package/esm2022/lib/input/radio/radio.component.mjs +3 -3
- package/esm2022/lib/input/search/search.component.mjs +3 -3
- package/esm2022/lib/input/search-select/search-select.component.mjs +3 -3
- package/esm2022/lib/input/select/select/select.component.mjs +3 -3
- package/esm2022/lib/input/select/select-node/select-node.component.mjs +3 -3
- package/esm2022/lib/input/simple-select/option-group.pipe.mjs +3 -3
- package/esm2022/lib/input/simple-select/simple-select.component.mjs +3 -3
- package/esm2022/lib/input/switch-checkbox/switch-checkbox.component.mjs +3 -3
- package/esm2022/lib/input/text-field/text-field.component.mjs +3 -3
- package/esm2022/lib/input/textarea-field/textarea-field.component.mjs +3 -3
- package/esm2022/lib/input/validation-message/validation-message.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-actions.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-content.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-header.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-link.component.mjs +3 -3
- package/esm2022/lib/layout/card/card-media.component.mjs +3 -3
- package/esm2022/lib/layout/card/card.component.mjs +3 -3
- package/esm2022/lib/layout/setting-row/setting-row.component.mjs +3 -3
- package/esm2022/lib/load/loading/loading.component.mjs +3 -3
- package/esm2022/lib/load/loading-cover/loading-cover.component.mjs +3 -3
- package/esm2022/lib/navigation/editable-heading/editable-heading.component.mjs +3 -3
- package/esm2022/lib/navigation/link/link.component.mjs +3 -3
- package/esm2022/lib/navigation/page-header/page-header.component.mjs +3 -3
- package/esm2022/lib/navigation/simple-tabs/simple-tab/simple-tab.component.mjs +3 -3
- package/esm2022/lib/navigation/simple-tabs/simple-tabs/simple-tabs.component.mjs +3 -3
- package/esm2022/lib/navigation/tabs/tab/tab.component.mjs +3 -3
- package/esm2022/lib/navigation/tabs/tabs/tabs.component.mjs +3 -3
- package/esm2022/lib/navigation/views/all-views-modal/all-views-modal.component.mjs +3 -3
- package/esm2022/lib/navigation/views/edit-view/edit-view.component.mjs +3 -3
- package/esm2022/lib/navigation/views/permission-picker/permission-picker.component.mjs +3 -3
- package/esm2022/lib/navigation/views/view-menu/view-menu.component.mjs +3 -3
- package/esm2022/lib/navigation/views/views/views.component.mjs +3 -3
- package/esm2022/lib/notification/badge/badge.component.mjs +3 -3
- package/esm2022/lib/notification/banner/banner-action.component.mjs +3 -3
- package/esm2022/lib/notification/banner/banner.component.mjs +3 -3
- package/esm2022/lib/notification/map-indicator/map-indicator.component.mjs +3 -3
- package/esm2022/lib/notification/notification-badge/notification-badge.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/callout.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/help/help.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/lock-scroll.directive.mjs +6 -6
- package/esm2022/lib/overlay/callout/menu/menu-item/menu-item.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/menu/menu.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/tooltip/locked-tooltip.directive.mjs +3 -3
- package/esm2022/lib/overlay/callout/tooltip/tooltip.component.mjs +3 -3
- package/esm2022/lib/overlay/callout/tooltip/tooltip.directive.mjs +3 -3
- package/esm2022/lib/overlay/modal/dialog/dialog.component.mjs +3 -3
- package/esm2022/lib/overlay/modal/dialog-stack.service.mjs +3 -3
- package/esm2022/lib/overlay/modal/form-dialog/form-dialog.component.mjs +3 -3
- package/esm2022/lib/overlay/modal/modal.component.mjs +3 -3
- package/esm2022/lib/overlay/modal/side-sheet/side-sheet.component.mjs +3 -3
- package/esm2022/lib/overlay/overlay-outlet.component.mjs +3 -3
- package/esm2022/lib/overlay/overlay.directive.mjs +3 -3
- package/esm2022/lib/overlay/overlay.service.mjs +3 -3
- package/esm2022/lib/overlay/toast/toast-action.component.mjs +3 -3
- package/esm2022/lib/overlay/toast/toast.component.mjs +3 -3
- package/esm2022/lib/riv.module.mjs +4 -4
- package/esm2022/lib/size/size.directive.mjs +3 -3
- package/esm2022/lib/table/simple-table/simple-table-cell.component.mjs +3 -3
- package/esm2022/lib/table/simple-table/simple-table-header-cell.component.mjs +3 -3
- package/esm2022/lib/table/simple-table/simple-table-row.component.mjs +3 -3
- package/esm2022/lib/table/simple-table/simple-table.component.mjs +3 -3
- package/esm2022/lib/table/table/table/table.component.mjs +3 -3
- package/esm2022/lib/table/table/table-collapse-all/table-collapse-all.component.mjs +3 -3
- package/esm2022/lib/table/table/table-column-settings/table-column-settings-side-sheet.component.mjs +3 -3
- package/esm2022/lib/table/table/table-column-settings/table-column-settings.component.mjs +3 -3
- package/esm2022/lib/table/table/table-csv-export/table-csv-export.component.mjs +3 -3
- package/esm2022/lib/table/table/table-header-resize-handle/table-header-resize-handle.component.mjs +3 -3
- package/esm2022/lib/table/table/table-search/table-search.component.mjs +3 -3
- package/esm2022/lib/table/table/table-search-columns/table-search-columns.component.mjs +3 -3
- package/esm2022/lib/visibility/visibility.directive.mjs +3 -3
- package/esm2022/lib/visualization/chart/chart.component.mjs +3 -3
- package/esm2022/lib/visualization/data-table/data-table-cell.component.mjs +3 -3
- package/esm2022/lib/visualization/data-table/data-table-header-cell.component.mjs +3 -3
- package/esm2022/lib/visualization/data-table/data-table-row.component.mjs +3 -3
- package/esm2022/lib/visualization/data-table/data-table.component.mjs +3 -3
- package/esm2022/lib/visualization/donut/donut.component.mjs +3 -3
- package/esm2022/lib/visualization/funnel-chart/funnel-chart.component.mjs +3 -3
- package/esm2022/lib/visualization/highlight/highlight.component.mjs +3 -3
- package/esm2022/lib/visualization/issue/issue.component.mjs +3 -3
- package/esm2022/lib/visualization/legend-item/legend-item.component.mjs +3 -3
- package/esm2022/lib/visualization/metric/metric.component.mjs +3 -3
- package/esm2022/lib/visualization/mini-pie/mini-pie.component.mjs +3 -3
- package/esm2022/lib/visualization/progress/progress.component.mjs +3 -3
- package/esm2022/lib/visualization/stacked-column/stacked-column.component.mjs +3 -3
- package/esm2022/lib/visualization/stacked-row/stacked-row.component.mjs +3 -3
- package/esm2022/lib/visualization/time-series/time-series.component.mjs +3 -3
- package/esm2022/lib/visualization/trend/trend.component.mjs +3 -3
- package/esm2022/lib/visualization/zero-state/zero-state.component.mjs +3 -3
- package/fesm2022/rivet-health-design-system.mjs +360 -360
- package/fesm2022/rivet-health-design-system.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -53,10 +53,10 @@ export class FunnelChartComponent {
|
|
|
53
53
|
.y1(([_, y]) => y)
|
|
54
54
|
.y0(this.graphHeight)(points);
|
|
55
55
|
}
|
|
56
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
57
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
56
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] !== null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light);border-radius:var(--size-xsmall);padding:var(--size-medium);width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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: "component", type: i2.MetricComponent, selector: "riv-metric", inputs: ["label", "value", "size", "compact", "card", "help", "align", "valueColorToken"] }, { kind: "component", type: i3.TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
58
58
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FunnelChartComponent, decorators: [{
|
|
60
60
|
type: Component,
|
|
61
61
|
args: [{ selector: 'riv-funnel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"funnel-chart\">\n <div class=\"header\">\n <!-- allocate space for the header -->\n <riv-metric\n class=\"metric-placeholder\"\n label=\"placeholder\"\n value=\"0\"\n ></riv-metric>\n <!-- center each metric over vertical lines -->\n <riv-metric\n *ngFor=\"let value of aggregatedValues; let ix = index\"\n class=\"metric\"\n [label]=\"data[ix]?.label ?? ''\"\n [value]=\"value.toString()\"\n [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n ></riv-metric>\n </div>\n\n <div class=\"chart\">\n <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n <div class=\"vertical-line\"></div>\n\n <div>\n <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n {{ step }}% converted\n <riv-trend\n *ngIf=\"trends[ix] !== null\"\n [label]=\"trends[ix]! + '%'\"\n [value]=\"trends[ix]!\"\n ></riv-trend>\n </div>\n\n <!-- allocate space for the graph -->\n <div\n class=\"graph-placeholder\"\n [style.width.px]=\"sectionWidth\"\n [style.height.px]=\"graphHeight\"\n ></div>\n </div>\n </ng-container>\n\n <div class=\"vertical-line\"></div>\n\n <svg\n *ngIf=\"path\"\n class=\"graph\"\n xmlns=\"http://www.w3.org/2000/svg\"\n [attr.width]=\"graphWidth\"\n [attr.height]=\"graphHeight\"\n >\n <linearGradient id=\"gradient\">\n <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n </linearGradient>\n <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n </svg>\n </div>\n</div>\n", styles: [".funnel-chart{width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light);border-radius:var(--size-xsmall);padding:var(--size-medium);width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\n"] }]
|
|
62
62
|
}], propDecorators: { data: [{
|
|
@@ -10,10 +10,10 @@ export class HighlightComponent {
|
|
|
10
10
|
getChunks() {
|
|
11
11
|
return chunks(this.text, this.indices);
|
|
12
12
|
}
|
|
13
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
14
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
13
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: HighlightComponent, selector: "riv-highlight", inputs: { text: "text", indices: "indices" }, ngImport: i0, template: "<span *ngFor=\"let chunk of getChunks()\" [class.highlight]=\"chunk.highlight\">{{\n chunk.text\n}}</span>\n", styles: [".highlight{background-color:var(--baloo-10);border-radius:var(--border-radius-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15
15
|
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HighlightComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
18
|
args: [{ selector: 'riv-highlight', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span *ngFor=\"let chunk of getChunks()\" [class.highlight]=\"chunk.highlight\">{{\n chunk.text\n}}</span>\n", styles: [".highlight{background-color:var(--baloo-10);border-radius:var(--border-radius-medium)}\n"] }]
|
|
19
19
|
}], propDecorators: { text: [{
|
|
@@ -14,10 +14,10 @@ export class IssueComponent {
|
|
|
14
14
|
? this.textColorOverride
|
|
15
15
|
: '--type-light-high-contrast'})`;
|
|
16
16
|
}
|
|
17
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
17
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IssueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: IssueComponent, selector: "riv-issue", inputs: { label: "label", colorToken: "colorToken", textColorOverride: "textColorOverride" }, ngImport: i0, template: "<i [style.background-color]=\"backgroundColor\"></i>\n<span *ngIf=\"label\" [style.color]=\"textColor\" rivTruncate>{{ label }}</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--size-xsmall)}i{width:var(--size-small);min-width:var(--size-small);height:var(--size-small);min-height:var(--size-small);border-radius:var(--border-radius-small)}span{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19
19
|
}
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IssueComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{ selector: 'riv-issue', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [style.background-color]=\"backgroundColor\"></i>\n<span *ngIf=\"label\" [style.color]=\"textColor\" rivTruncate>{{ label }}</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--size-xsmall)}i{width:var(--size-small);min-width:var(--size-small);height:var(--size-small);min-height:var(--size-small);border-radius:var(--border-radius-small)}span{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}\n"] }]
|
|
23
23
|
}], propDecorators: { label: [{
|
|
@@ -19,10 +19,10 @@ export class LegendItemComponent {
|
|
|
19
19
|
isLegendItemClickable() {
|
|
20
20
|
return this.clickable && this.visibility !== 'locked';
|
|
21
21
|
}
|
|
22
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
22
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip", clickable: "clickable", showCheckWhenClickable: "showCheckWhenClickable" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n (click)=\"isLegendItemClickable() ? itemClick.emit($event) : null\"\n [rivTooltip]=\"iconTooltip\"\n type=\"button\"\n [disabled]=\"visibility === 'locked'\"\n [attr.aria-disabled]=\"visibility === 'locked' ? 'true' : null\"\n [class.clickable]=\"clickable\"\n>\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [class.dots]=\"style === 'dots'\"\n [style.background-color]=\"style === 'dots' ? null : backgroundColor\"\n [style.--dot-color]=\"backgroundColor\"\n class=\"opacity-hover\"\n >\n <riv-icon\n *ngIf=\"clickable && showCheckWhenClickable\"\n name=\"Check\"\n [size]=\"16\"\n [strokeWidth]=\"3\"\n style=\"color: var(--white-100)\"\n ></riv-icon>\n </i>\n <i\n *ngIf=\"visibility === 'hidden'\"\n class=\"hidden-legend-item opacity-hover\"\n [class.striped]=\"style === 'striped'\"\n [class.dots]=\"style === 'dots'\"\n [style.border-color]=\"backgroundColor\"\n [style.--background-color-hover]=\"backgroundColor\"\n [style.--dot-color]=\"backgroundColor\"\n ></i>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n <span\n *ngIf=\"label\"\n [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n >\n {{ label }}\n </span>\n</button>\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)}i.dots{background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}.hidden-legend-item.dots{background-image:none}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:hover.clickable .hidden-legend-item.dots{border:none;background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .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", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LegendItemComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
27
|
args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n (click)=\"isLegendItemClickable() ? itemClick.emit($event) : null\"\n [rivTooltip]=\"iconTooltip\"\n type=\"button\"\n [disabled]=\"visibility === 'locked'\"\n [attr.aria-disabled]=\"visibility === 'locked' ? 'true' : null\"\n [class.clickable]=\"clickable\"\n>\n <i\n *ngIf=\"visibility === 'visible'\"\n [class.striped]=\"style === 'striped'\"\n [class.dots]=\"style === 'dots'\"\n [style.background-color]=\"style === 'dots' ? null : backgroundColor\"\n [style.--dot-color]=\"backgroundColor\"\n class=\"opacity-hover\"\n >\n <riv-icon\n *ngIf=\"clickable && showCheckWhenClickable\"\n name=\"Check\"\n [size]=\"16\"\n [strokeWidth]=\"3\"\n style=\"color: var(--white-100)\"\n ></riv-icon>\n </i>\n <i\n *ngIf=\"visibility === 'hidden'\"\n class=\"hidden-legend-item opacity-hover\"\n [class.striped]=\"style === 'striped'\"\n [class.dots]=\"style === 'dots'\"\n [style.border-color]=\"backgroundColor\"\n [style.--background-color-hover]=\"backgroundColor\"\n [style.--dot-color]=\"backgroundColor\"\n ></i>\n <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n <span\n *ngIf=\"label\"\n [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n >\n {{ label }}\n </span>\n</button>\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)}i.dots{background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}.hidden-legend-item.dots{background-image:none}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:hover.clickable .hidden-legend-item.dots{border:none;background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"] }]
|
|
28
28
|
}], propDecorators: { label: [{
|
|
@@ -16,10 +16,10 @@ export class MetricComponent {
|
|
|
16
16
|
get valueColor() {
|
|
17
17
|
return `var(${this.valueColorToken})`;
|
|
18
18
|
}
|
|
19
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
20
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
19
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", compact: "compact", card: "card", help: "help", align: "align", valueColorToken: "valueColorToken" }, host: { properties: { "class.compact": "this.compact", "class.card": "this.card" } }, ngImport: i0, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
21
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MetricComponent, decorators: [{
|
|
23
23
|
type: Component,
|
|
24
24
|
args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"] }]
|
|
25
25
|
}], propDecorators: { label: [{
|
|
@@ -29,10 +29,10 @@ export class MiniPieComponent {
|
|
|
29
29
|
const largeArc = pct > 0.5 ? 1 : 0;
|
|
30
30
|
return `M 0 0 L 0 -8 A 8 8 0 ${largeArc} 1 ${x} ${y} Z`;
|
|
31
31
|
}
|
|
32
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
33
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
32
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MiniPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
33
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MiniPieComponent, selector: "riv-mini-pie", inputs: { value: "value", size: "size", colorToken: "colorToken" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-10 -10 20 20\">\n <circle cx=\"0\" cy=\"0\" r=\"8\" class=\"track\" />\n <circle *ngIf=\"isFull\" cx=\"0\" cy=\"0\" r=\"8\" [attr.fill]=\"fillColor\" />\n <path\n *ngIf=\"clampedValue > 0 && !isFull\"\n [attr.d]=\"wedgePath\"\n [attr.fill]=\"fillColor\"\n />\n</svg>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}:host.small{width:20px;height:20px}:host.medium{width:24px;height:24px}:host.large{width:32px;height:32px}svg{width:100%;height:100%}.track{fill:var(--border-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
34
34
|
}
|
|
35
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
35
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MiniPieComponent, decorators: [{
|
|
36
36
|
type: Component,
|
|
37
37
|
args: [{ selector: 'riv-mini-pie', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-10 -10 20 20\">\n <circle cx=\"0\" cy=\"0\" r=\"8\" class=\"track\" />\n <circle *ngIf=\"isFull\" cx=\"0\" cy=\"0\" r=\"8\" [attr.fill]=\"fillColor\" />\n <path\n *ngIf=\"clampedValue > 0 && !isFull\"\n [attr.d]=\"wedgePath\"\n [attr.fill]=\"fillColor\"\n />\n</svg>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}:host.small{width:20px;height:20px}:host.medium{width:24px;height:24px}:host.large{width:32px;height:32px}svg{width:100%;height:100%}.track{fill:var(--border-light)}\n"] }]
|
|
38
38
|
}], propDecorators: { value: [{
|
|
@@ -10,10 +10,10 @@ export class ProgressComponent {
|
|
|
10
10
|
return '0%';
|
|
11
11
|
return 100 * Math.min(this.value / this.max, 1) + '%';
|
|
12
12
|
}
|
|
13
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
14
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
13
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProgressComponent, selector: "riv-progress", inputs: { value: "value", max: "max" }, ngImport: i0, template: "<div class=\"track\">\n <span class=\"value\" [style.width]=\"getWidth()\"></span>\n</div>\n", styles: [":host{--host-height: calc(var(--base-grid-size) * 4);--host-padding: var(--size-xxsmall);display:flex;border:var(--border-width) solid var(--border-light);padding:var(--host-padding);height:var(--host-height);border-radius:var(--host-height)}.track{--track-height: calc(var(--host-height) - var(--host-padding) * 2);border-radius:var(--track-height);align-self:stretch;flex-grow:1;background-color:var(--gray-30);display:flex}.value{border-radius:var(--track-height);align-self:stretch;justify-self:flex-start;background:linear-gradient(270deg,#5f10dd,#5f10dd87)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15
15
|
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
18
|
args: [{ selector: 'riv-progress', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"track\">\n <span class=\"value\" [style.width]=\"getWidth()\"></span>\n</div>\n", styles: [":host{--host-height: calc(var(--base-grid-size) * 4);--host-padding: var(--size-xxsmall);display:flex;border:var(--border-width) solid var(--border-light);padding:var(--host-padding);height:var(--host-height);border-radius:var(--host-height)}.track{--track-height: calc(var(--host-height) - var(--host-padding) * 2);border-radius:var(--track-height);align-self:stretch;flex-grow:1;background-color:var(--gray-30);display:flex}.value{border-radius:var(--track-height);align-self:stretch;justify-self:flex-start;background:linear-gradient(270deg,#5f10dd,#5f10dd87)}\n"] }]
|
|
19
19
|
}], propDecorators: { value: [{
|
|
@@ -351,10 +351,10 @@ export class StackedColumnComponent {
|
|
|
351
351
|
if (option)
|
|
352
352
|
this.interval = option.id;
|
|
353
353
|
}
|
|
354
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
355
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
354
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StackedColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
355
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StackedColumnComponent, selector: "riv-stacked-column", inputs: { input: "input", valueFormatter: "valueFormatter", interval: "interval" }, outputs: { intervalChanged: "intervalChanged", stackClicked: "stackClicked" }, queries: [{ propertyName: "calloutHeaderTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"(empty$ | async) === false; else zeroState\"\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <defs>\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"d.columnWidth\"\n [attr.height]=\"d.columnWidth\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n x1=\"0\"\n [attr.y1]=\"d.columnWidth\"\n [attr.x2]=\"d.columnWidth\"\n y2=\"0\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <g *ngFor=\"let tick of d.xMinorTicks\">\n <rect\n class=\"tick-background\"\n [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n [attr.x]=\"tick.x - 20\"\n [attr.y]=\"d.yScale(0) + 3\"\n width=\"40\"\n height=\"12\"\n rx=\"2\"\n ></rect>\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"d.yScale(0) + 12\"\n text-anchor=\"middle\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.xMajorTicks\">\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"d.yScale(0) + 24\"\n text-anchor=\"middle\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n {{ valueFormatter(tick) }}\n </text>\n </g>\n <g *ngFor=\"let rect of d.rects\">\n <rect\n class=\"column\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"rect.fill\"\n [class.blurred]=\"\n (hoveredBand$ | async) !== null &&\n (hoveredBand$ | async)?.dateValue !== rect.dateValue\n \"\n ></rect>\n <rect\n *ngIf=\"rect.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 </g>\n <ng-container *ngIf=\"getRange$ | async; let getRange\">\n <rect\n *ngFor=\"let rect of d.hoverBands\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"transparent\"\n (mouseenter)=\"\n hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n \"\n (mouseleave)=\"hoveredBand$.next(null)\"\n (click)=\"\n stackClicked.emit(getRange(rect.dateValue)); hoveredBand$.next(null)\n \"\n ></rect>\n </ng-container>\n </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-overlay\n [anchor]=\"callout?.anchor ?? null\"\n [theme]=\"'light'\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [allowedPositions]=\"[\n 'center-right',\n 'center-left',\n 'top-center',\n 'bottom-center'\n ]\"\n >\n <div class=\"callout-content\">\n <ng-container\n [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n ></ng-container>\n <div class=\"callout-stack\" *ngFor=\"let stack of callout?.content\">\n <div *ngIf=\"stack.title; let title\" class=\"callout-row\">\n <span class=\"series-label\">{{ title }}</span>\n <span>{{ stack.total }}</span>\n </div>\n <div *ngFor=\"let series of stack.series\" class=\"callout-row\">\n <span class=\"series-label\">\n <riv-legend-item\n [colorToken]=\"series.colorToken\"\n [style]=\"series.style\"\n ></riv-legend-item>\n <span>{{ series.label }}</span>\n </span>\n <span>{{ series.formattedValue }}</span>\n </div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n <riv-simple-select\n [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n [orderBy]=\"'source'\"\n [selectedOption]=\"selectedIntervalOption$ | async\"\n (selectedOptionChange)=\"setIntervalOption($event)\"\n ></riv-simple-select>\n</ng-template>\n", styles: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-stack{display:flex;flex-direction:column;padding:var(--size-medium) 0;gap:var(--size-medium)}.callout-stack:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.callout-row{display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\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: 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"] }, { kind: "component", type: i3.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: i4.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i5.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i6.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i7.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
356
356
|
}
|
|
357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
357
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StackedColumnComponent, decorators: [{
|
|
358
358
|
type: Component,
|
|
359
359
|
args: [{ selector: 'riv-stacked-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"(empty$ | async) === false; else zeroState\"\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <defs>\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"d.columnWidth\"\n [attr.height]=\"d.columnWidth\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n x1=\"0\"\n [attr.y1]=\"d.columnWidth\"\n [attr.x2]=\"d.columnWidth\"\n y2=\"0\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <g *ngFor=\"let tick of d.xMinorTicks\">\n <rect\n class=\"tick-background\"\n [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n [attr.x]=\"tick.x - 20\"\n [attr.y]=\"d.yScale(0) + 3\"\n width=\"40\"\n height=\"12\"\n rx=\"2\"\n ></rect>\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"d.yScale(0) + 12\"\n text-anchor=\"middle\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.xMajorTicks\">\n <text\n class=\"tick-label\"\n [attr.x]=\"tick.x\"\n [attr.y]=\"d.yScale(0) + 24\"\n text-anchor=\"middle\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n {{ valueFormatter(tick) }}\n </text>\n </g>\n <g *ngFor=\"let rect of d.rects\">\n <rect\n class=\"column\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"rect.fill\"\n [class.blurred]=\"\n (hoveredBand$ | async) !== null &&\n (hoveredBand$ | async)?.dateValue !== rect.dateValue\n \"\n ></rect>\n <rect\n *ngIf=\"rect.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 </g>\n <ng-container *ngIf=\"getRange$ | async; let getRange\">\n <rect\n *ngFor=\"let rect of d.hoverBands\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n fill=\"transparent\"\n (mouseenter)=\"\n hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n \"\n (mouseleave)=\"hoveredBand$.next(null)\"\n (click)=\"\n stackClicked.emit(getRange(rect.dateValue)); hoveredBand$.next(null)\n \"\n ></rect>\n </ng-container>\n </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-overlay\n [anchor]=\"callout?.anchor ?? null\"\n [theme]=\"'light'\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [allowedPositions]=\"[\n 'center-right',\n 'center-left',\n 'top-center',\n 'bottom-center'\n ]\"\n >\n <div class=\"callout-content\">\n <ng-container\n [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n ></ng-container>\n <div class=\"callout-stack\" *ngFor=\"let stack of callout?.content\">\n <div *ngIf=\"stack.title; let title\" class=\"callout-row\">\n <span class=\"series-label\">{{ title }}</span>\n <span>{{ stack.total }}</span>\n </div>\n <div *ngFor=\"let series of stack.series\" class=\"callout-row\">\n <span class=\"series-label\">\n <riv-legend-item\n [colorToken]=\"series.colorToken\"\n [style]=\"series.style\"\n ></riv-legend-item>\n <span>{{ series.label }}</span>\n </span>\n <span>{{ series.formattedValue }}</span>\n </div>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n <riv-simple-select\n [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n [orderBy]=\"'source'\"\n [selectedOption]=\"selectedIntervalOption$ | async\"\n (selectedOptionChange)=\"setIntervalOption($event)\"\n ></riv-simple-select>\n</ng-template>\n", styles: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-stack{display:flex;flex-direction:column;padding:var(--size-medium) 0;gap:var(--size-medium)}.callout-stack:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.callout-row{display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\n"] }]
|
|
360
360
|
}], propDecorators: { input: [{
|
|
@@ -249,10 +249,10 @@ export class StackedRowComponent {
|
|
|
249
249
|
};
|
|
250
250
|
});
|
|
251
251
|
}
|
|
252
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
253
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
252
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StackedRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
253
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: StackedRowComponent, selector: "riv-stacked-row", inputs: { input: "input", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, outputs: { stackClicked: "stackClicked" }, queries: [{ propertyName: "calloutHeaderTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"(empty$ | async) === false; else zeroState\"\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let draw\"\n [attr.viewBox]=\"draw.viewBox\"\n >\n <defs>\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"draw.rowHeight\"\n [attr.height]=\"draw.rowHeight\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n [attr.x1]=\"0\"\n [attr.y1]=\"0\"\n [attr.x2]=\"draw.rowHeight\"\n [attr.y2]=\"draw.rowHeight\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n <text\n rivSVGTextTruncate\n [text]=\"rowNameToDraw.label\"\n [width]=\"SECTION_WIDTHS.ROW_NAME\"\n class=\"row-title\"\n [attr.x]=\"rowNameToDraw.x\"\n [attr.y]=\"rowNameToDraw.y\"\n ></text>\n </g>\n <g *ngFor=\"let tick of draw.xTicks\">\n <rect\n class=\"tick\"\n [attr.x]=\"draw.xScale(tick)\"\n y=\"0\"\n width=\"1\"\n height=\"100%\"\n ></rect>\n <text\n class=\"tick-label\"\n [attr.x]=\"draw.xScale(tick)\"\n [attr.y]=\"locationOfXAxisTick()\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ valueFormatter(tick) }}\n </text>\n </g>\n <g\n *ngFor=\"let rect of draw.rects\"\n (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n (mouseleave)=\"hoveredBand$.next(null)\"\n (click)=\"\n stackClicked.emit({ stackIndex: rect.stackIndex });\n hoveredBand$.next(null)\n \"\n >\n <rect\n class=\"row\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"rect.fill\"\n [class.blurred]=\"\n (hoveredBand$ | async) !== null &&\n (hoveredBand$ | async)?.rowName !== rect.rowName\n \"\n ></rect>\n <rect\n *ngIf=\"rect.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 </g>\n <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n <text\n class=\"row-total\"\n [attr.x]=\"rowTotalToDraw.x\"\n [attr.y]=\"rowTotalToDraw.y\"\n text-anchor=\"end\"\n >\n {{ rowTotalToDraw.label }}\n </text>\n </g>\n </svg>\n <legend *ngIf=\"drawData$ | async; let draw\">\n <riv-legend-item\n *ngFor=\"let item of draw.legendItems\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n [style]=\"item.style ? item.style : 'solid'\"\n ></riv-legend-item>\n </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-overlay\n [anchor]=\"callout?.anchor ?? null\"\n [isModal]=\"false\"\n [preferredPosition]=\"'bottom-center'\"\n [allowedPositions]=\"[\n 'center-right',\n 'center-left',\n 'top-center',\n 'bottom-center'\n ]\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <ng-container\n [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n ></ng-container>\n <div *ngFor=\"let metric of callout?.metrics\" class=\"callout-row\">\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.callout-content{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{padding:var(--size-medium) 0;display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\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: 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"] }, { kind: "component", type: i3.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: i4.OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: i5.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "directive", type: i6.SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: i7.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
254
254
|
}
|
|
255
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StackedRowComponent, decorators: [{
|
|
256
256
|
type: Component,
|
|
257
257
|
args: [{ selector: 'riv-stacked-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"(empty$ | async) === false; else zeroState\"\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let draw\"\n [attr.viewBox]=\"draw.viewBox\"\n >\n <defs>\n <pattern\n id=\"stripes\"\n x=\"0\"\n y=\"0\"\n [attr.width]=\"draw.rowHeight\"\n [attr.height]=\"draw.rowHeight\"\n patternUnits=\"userSpaceOnUse\"\n >\n <line\n [attr.x1]=\"0\"\n [attr.y1]=\"0\"\n [attr.x2]=\"draw.rowHeight\"\n [attr.y2]=\"draw.rowHeight\"\n stroke=\"var(--white-100)\"\n stroke-width=\"1\"\n ></line>\n </pattern>\n </defs>\n <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n <text\n rivSVGTextTruncate\n [text]=\"rowNameToDraw.label\"\n [width]=\"SECTION_WIDTHS.ROW_NAME\"\n class=\"row-title\"\n [attr.x]=\"rowNameToDraw.x\"\n [attr.y]=\"rowNameToDraw.y\"\n ></text>\n </g>\n <g *ngFor=\"let tick of draw.xTicks\">\n <rect\n class=\"tick\"\n [attr.x]=\"draw.xScale(tick)\"\n y=\"0\"\n width=\"1\"\n height=\"100%\"\n ></rect>\n <text\n class=\"tick-label\"\n [attr.x]=\"draw.xScale(tick)\"\n [attr.y]=\"locationOfXAxisTick()\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ valueFormatter(tick) }}\n </text>\n </g>\n <g\n *ngFor=\"let rect of draw.rects\"\n (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n (mouseleave)=\"hoveredBand$.next(null)\"\n (click)=\"\n stackClicked.emit({ stackIndex: rect.stackIndex });\n hoveredBand$.next(null)\n \"\n >\n <rect\n class=\"row\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"rect.fill\"\n [class.blurred]=\"\n (hoveredBand$ | async) !== null &&\n (hoveredBand$ | async)?.rowName !== rect.rowName\n \"\n ></rect>\n <rect\n *ngIf=\"rect.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 </g>\n <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n <text\n class=\"row-total\"\n [attr.x]=\"rowTotalToDraw.x\"\n [attr.y]=\"rowTotalToDraw.y\"\n text-anchor=\"end\"\n >\n {{ rowTotalToDraw.label }}\n </text>\n </g>\n </svg>\n <legend *ngIf=\"drawData$ | async; let draw\">\n <riv-legend-item\n *ngFor=\"let item of draw.legendItems\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n [style]=\"item.style ? item.style : 'solid'\"\n ></riv-legend-item>\n </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-overlay\n [anchor]=\"callout?.anchor ?? null\"\n [isModal]=\"false\"\n [preferredPosition]=\"'bottom-center'\"\n [allowedPositions]=\"[\n 'center-right',\n 'center-left',\n 'top-center',\n 'bottom-center'\n ]\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <ng-container\n [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n ></ng-container>\n <div *ngFor=\"let metric of callout?.metrics\" class=\"callout-row\">\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.callout-content{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{padding:var(--size-medium) 0;display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\n"] }]
|
|
258
258
|
}], propDecorators: { input: [{
|
|
@@ -347,10 +347,10 @@ export class TimeSeriesComponent {
|
|
|
347
347
|
y,
|
|
348
348
|
};
|
|
349
349
|
}
|
|
350
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
351
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
350
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TimeSeriesComponent, selector: "riv-time-series", inputs: { input: "input", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle", groupedTooltips: "groupedTooltips" }, outputs: { intervalChanged: "intervalChanged", markerClicked: "markerClicked" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], ngImport: i0, template: "<div\n *ngIf=\"(empty$ | async) === false; else zeroState\"\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <g *ngFor=\"let tick of d.x.xMajorTicks\">\n <text\n *ngIf=\"d.x.xScale(tick.value) >= 0\"\n class=\"x-major-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"HEIGHT - BOTTOM_OFFSET\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.x.xMinorTicks\">\n <text\n class=\"x-minor-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"HEIGHT - BOTTOM_OFFSET\"\n text-anchor=\"middle\"\n dominant-baseline=\"hanging\"\n dy=\"8\"\n >\n {{ tick.label }}\n <title>{{ tick.value | date }}</title>\n </text>\n </g>\n <g *ngFor=\"let tick of d.y1.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.y1.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"y-tick-label\" x=\"0\" [attr.y]=\"d.y1.yScale(tick)\" dy=\"-4\">\n {{ d.y1.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngFor=\"let tick of d.y2?.yTicks\">\n <text\n class=\"y-tick-label\"\n [attr.x]=\"width\"\n [attr.y]=\"d.y2?.yScale(tick)\"\n text-anchor=\"end\"\n dy=\"-4\"\n >\n {{ d.y2?.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngIf=\"hoveredMarker$ | async; let hoveredMarker\">\n <line\n class=\"hover-rule\"\n [attr.x1]=\"hoveredMarker.marker.x\"\n [attr.y1]=\"d.y1.yScale(d.y1.yMin)\"\n [attr.x2]=\"hoveredMarker.marker.x\"\n [attr.y2]=\"d.y1.yScale(d.y1.yMax)\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n\n <ng-template #seriesTpl let-series=\"series\" let-index=\"index\" let-y=\"y\">\n <path\n *ngIf=\"series.visibility !== 'hidden'\"\n class=\"data path\"\n [class.marker-hovered]=\"!!(hoveredMarker$ | async)\"\n [attr.d]=\"series.path\"\n fill=\"none\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n [attr.stroke-dasharray]=\"series.style === 'dashed' ? '4' : null\"\n ></path>\n <ng-container *ngIf=\"getRange$ | async; let getRange\">\n <ng-container *ngFor=\"let marker of series.markers\">\n <circle\n *ngIf=\"series.visibility !== 'hidden'\"\n class=\"data marker\"\n [class.focused]=\"\n (hoveredMarker$ | async)?.marker?.x === marker.x &&\n (groupedTooltips ||\n ((hoveredMarker$ | async)?.seriesIndex === index &&\n (hoveredMarker$ | async)?.y === y))\n \"\n [class.blurred]=\"\n (hoveredMarker$ | async) !== null &&\n ((hoveredMarker$ | async)?.marker?.x !== marker.x ||\n ((hoveredMarker$ | async)?.marker?.x === marker.x &&\n !groupedTooltips &&\n ((hoveredMarker$ | async)?.seriesIndex !== index ||\n (hoveredMarker$ | async)?.y !== y)))\n \"\n [attr.cx]=\"marker.x\"\n [attr.cy]=\"marker.y\"\n [attr.r]=\"POINT_RADIUS\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n (mouseover)=\"\n hoveredMarker$.next({\n event: $event,\n marker: marker,\n seriesIndex: index,\n y: y\n })\n \"\n (mouseleave)=\"hoveredMarker$.next(null)\"\n (click)=\"\n markerClicked.emit(\n getMarkerClicked(getRange(marker.date), index, y)\n );\n hoveredMarker$.next(null)\n \"\n ></circle>\n </ng-container>\n </ng-container>\n </ng-template>\n <g *ngFor=\"let series of d.y1.series; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n seriesTpl;\n context: { series: series, index: i, y: 'y1' }\n \"\n ></ng-container>\n </g>\n <g *ngFor=\"let series of d.y2?.series; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n seriesTpl;\n context: { series: series, index: i, y: 'y2' }\n \"\n ></ng-container>\n </g>\n </svg>\n <legend>\n <riv-legend-item\n *ngFor=\"let item of legend$ | async\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n [visibility]=\"item.visibility\"\n [clickable]=\"allowLegendToggle\"\n (itemClick)=\"\n allowLegendToggle\n ? toggleVisibility$.next({\n label: item.label,\n visibility: item.visibility === 'hidden' ? 'visible' : 'hidden'\n })\n : null\n \"\n ></riv-legend-item>\n </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-overlay\n [anchor]=\"callout?.anchor ?? null\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\" *ngFor=\"let metric of callout?.metrics\">\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n <riv-simple-select\n [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n [orderBy]=\"'source'\"\n [selectedOption]=\"selectedIntervalOption$ | async\"\n (selectedOptionChange)=\"setIntervalOption($event)\"\n ></riv-simple-select>\n</ng-template>\n", styles: [".container{display:flex;flex-direction:column;gap:var(--size-xlarge)}.y-tick-label,.x-major-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);fill:var(--type-light-low-contrast);text-anchor:middle}.tick{fill:var(--gray-20)}.data.path{transition:stroke-opacity var(--short-transition)}.data.path.marker-hovered{stroke-opacity:.4}.data.marker{fill:var(--surface-light-0);transition:stroke-opacity var(--short-transition)}.data.marker.focused{stroke-opacity:1;filter:drop-shadow(0 1px 1px rgba(10,2,22,.15))}.data.marker.blurred{stroke-opacity:.4}.hover-rule{stroke:var(--gray-20)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.callout-content{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{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)}\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: 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"] }, { kind: "component", type: i3.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: i4.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i5.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i6.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i7.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i8.OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
352
352
|
}
|
|
353
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
353
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeSeriesComponent, decorators: [{
|
|
354
354
|
type: Component,
|
|
355
355
|
args: [{ selector: 'riv-time-series', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"(empty$ | async) === false; else zeroState\"\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n *ngIf=\"drawData$ | async; let d\"\n [attr.viewBox]=\"d.viewBox\"\n >\n <g *ngFor=\"let tick of d.x.xMajorTicks\">\n <text\n *ngIf=\"d.x.xScale(tick.value) >= 0\"\n class=\"x-major-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"HEIGHT - BOTTOM_OFFSET\"\n dx=\"4\"\n dy=\"-4\"\n >\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.x.xMinorTicks\">\n <text\n class=\"x-minor-tick-label\"\n [attr.x]=\"d.x.xScale(tick.value)\"\n [attr.y]=\"HEIGHT - BOTTOM_OFFSET\"\n text-anchor=\"middle\"\n dominant-baseline=\"hanging\"\n dy=\"8\"\n >\n {{ tick.label }}\n <title>{{ tick.value | date }}</title>\n </text>\n </g>\n <g *ngFor=\"let tick of d.y1.yTicks\">\n <rect\n class=\"tick\"\n x=\"0\"\n [attr.y]=\"d.y1.yScale(tick)\"\n width=\"100%\"\n height=\"1\"\n ></rect>\n <text class=\"y-tick-label\" x=\"0\" [attr.y]=\"d.y1.yScale(tick)\" dy=\"-4\">\n {{ d.y1.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngFor=\"let tick of d.y2?.yTicks\">\n <text\n class=\"y-tick-label\"\n [attr.x]=\"width\"\n [attr.y]=\"d.y2?.yScale(tick)\"\n text-anchor=\"end\"\n dy=\"-4\"\n >\n {{ d.y2?.valueFormatter(tick) }}\n </text>\n </g>\n\n <g *ngIf=\"hoveredMarker$ | async; let hoveredMarker\">\n <line\n class=\"hover-rule\"\n [attr.x1]=\"hoveredMarker.marker.x\"\n [attr.y1]=\"d.y1.yScale(d.y1.yMin)\"\n [attr.x2]=\"hoveredMarker.marker.x\"\n [attr.y2]=\"d.y1.yScale(d.y1.yMax)\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n\n <ng-template #seriesTpl let-series=\"series\" let-index=\"index\" let-y=\"y\">\n <path\n *ngIf=\"series.visibility !== 'hidden'\"\n class=\"data path\"\n [class.marker-hovered]=\"!!(hoveredMarker$ | async)\"\n [attr.d]=\"series.path\"\n fill=\"none\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n [attr.stroke-dasharray]=\"series.style === 'dashed' ? '4' : null\"\n ></path>\n <ng-container *ngIf=\"getRange$ | async; let getRange\">\n <ng-container *ngFor=\"let marker of series.markers\">\n <circle\n *ngIf=\"series.visibility !== 'hidden'\"\n class=\"data marker\"\n [class.focused]=\"\n (hoveredMarker$ | async)?.marker?.x === marker.x &&\n (groupedTooltips ||\n ((hoveredMarker$ | async)?.seriesIndex === index &&\n (hoveredMarker$ | async)?.y === y))\n \"\n [class.blurred]=\"\n (hoveredMarker$ | async) !== null &&\n ((hoveredMarker$ | async)?.marker?.x !== marker.x ||\n ((hoveredMarker$ | async)?.marker?.x === marker.x &&\n !groupedTooltips &&\n ((hoveredMarker$ | async)?.seriesIndex !== index ||\n (hoveredMarker$ | async)?.y !== y)))\n \"\n [attr.cx]=\"marker.x\"\n [attr.cy]=\"marker.y\"\n [attr.r]=\"POINT_RADIUS\"\n stroke-width=\"2\"\n [attr.stroke]=\"series.stroke\"\n (mouseover)=\"\n hoveredMarker$.next({\n event: $event,\n marker: marker,\n seriesIndex: index,\n y: y\n })\n \"\n (mouseleave)=\"hoveredMarker$.next(null)\"\n (click)=\"\n markerClicked.emit(\n getMarkerClicked(getRange(marker.date), index, y)\n );\n hoveredMarker$.next(null)\n \"\n ></circle>\n </ng-container>\n </ng-container>\n </ng-template>\n <g *ngFor=\"let series of d.y1.series; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n seriesTpl;\n context: { series: series, index: i, y: 'y1' }\n \"\n ></ng-container>\n </g>\n <g *ngFor=\"let series of d.y2?.series; let i = index\">\n <ng-container\n *ngTemplateOutlet=\"\n seriesTpl;\n context: { series: series, index: i, y: 'y2' }\n \"\n ></ng-container>\n </g>\n </svg>\n <legend>\n <riv-legend-item\n *ngFor=\"let item of legend$ | async\"\n [label]=\"item.label\"\n [colorToken]=\"item.colorToken\"\n [visibility]=\"item.visibility\"\n [clickable]=\"allowLegendToggle\"\n (itemClick)=\"\n allowLegendToggle\n ? toggleVisibility$.next({\n label: item.label,\n visibility: item.visibility === 'hidden' ? 'visible' : 'hidden'\n })\n : null\n \"\n ></riv-legend-item>\n </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n <riv-callout\n *riv-overlay\n [anchor]=\"callout?.anchor ?? null\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\" *ngFor=\"let metric of callout?.metrics\">\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n <span>{{ metric.label }}</span>\n </span>\n <span>{{ metric.value }}</span>\n </div>\n </div>\n </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n <riv-zero-state [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n <riv-simple-select\n [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n [orderBy]=\"'source'\"\n [selectedOption]=\"selectedIntervalOption$ | async\"\n (selectedOptionChange)=\"setIntervalOption($event)\"\n ></riv-simple-select>\n</ng-template>\n", styles: [".container{display:flex;flex-direction:column;gap:var(--size-xlarge)}.y-tick-label,.x-major-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);fill:var(--type-light-low-contrast);text-anchor:middle}.tick{fill:var(--gray-20)}.data.path{transition:stroke-opacity var(--short-transition)}.data.path.marker-hovered{stroke-opacity:.4}.data.marker{fill:var(--surface-light-0);transition:stroke-opacity var(--short-transition)}.data.marker.focused{stroke-opacity:1;filter:drop-shadow(0 1px 1px rgba(10,2,22,.15))}.data.marker.blurred{stroke-opacity:.4}.hover-rule{stroke:var(--gray-20)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.callout-content{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{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)}\n"] }]
|
|
356
356
|
}], propDecorators: { input: [{
|
|
@@ -19,10 +19,10 @@ export class TrendComponent {
|
|
|
19
19
|
: 'danger';
|
|
20
20
|
return 'trend ' + conditionalClass;
|
|
21
21
|
}
|
|
22
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
22
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TrendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TrendComponent, selector: "riv-trend", inputs: { label: "label", value: "value", successCondition: "successCondition" }, ngImport: i0, template: "<span [class]=\"getClasses()\">\n <riv-icon\n class=\"icon\"\n [name]=\"\n value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n \"\n [size]=\"16\"\n ></riv-icon>\n <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"], dependencies: [{ kind: "component", type: i1.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24
24
|
}
|
|
25
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
25
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TrendComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
27
|
args: [{ selector: 'riv-trend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"getClasses()\">\n <riv-icon\n class=\"icon\"\n [name]=\"\n value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n \"\n [size]=\"16\"\n ></riv-icon>\n <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"] }]
|
|
28
28
|
}], propDecorators: { label: [{
|
|
@@ -6,10 +6,10 @@ export class ZeroStateComponent {
|
|
|
6
6
|
constructor() {
|
|
7
7
|
this.message = 'No data to display.';
|
|
8
8
|
}
|
|
9
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
10
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "
|
|
9
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ZeroStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ZeroStateComponent, selector: "riv-zero-state", inputs: { message: "message", title: "title", icon: "icon" }, ngImport: i0, template: "<riv-icon *ngIf=\"icon; let i\" [name]=\"i\" [customSize]=\"40\"></riv-icon>\n<span *ngIf=\"title; let t\" class=\"title\">{{ t }}</span>\n<span class=\"message\">{{ message }}</span>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--size-medium);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-large);min-height:100%}.title{font:var(--title-02)}.message{color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11
11
|
}
|
|
12
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
12
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ZeroStateComponent, decorators: [{
|
|
13
13
|
type: Component,
|
|
14
14
|
args: [{ selector: 'riv-zero-state', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon *ngIf=\"icon; let i\" [name]=\"i\" [customSize]=\"40\"></riv-icon>\n<span *ngIf=\"title; let t\" class=\"title\">{{ t }}</span>\n<span class=\"message\">{{ message }}</span>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--size-medium);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-large);min-height:100%}.title{font:var(--title-02)}.message{color:var(--type-light-low-contrast)}\n"] }]
|
|
15
15
|
}], propDecorators: { message: [{
|