@rivet-health/design-system 28.12.0 → 28.13.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/lib/input/input-label/input-label.component.mjs +1 -1
- package/esm2020/lib/navigation/link/link.component.mjs +15 -9
- package/esm2020/lib/table/table/table/table.component.mjs +1 -1
- package/esm2020/lib/visualization/chart/chart.component.mjs +1 -1
- package/fesm2015/rivet-health-design-system.mjs +17 -11
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +17 -11
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/navigation/link/link.component.d.ts +4 -1
- package/package.json +1 -1
|
@@ -10,7 +10,7 @@ export class InputLabelComponent {
|
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
12
|
InputLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
InputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InputLabelComponent, selector: "riv-input-label", inputs: { label: "label", help: "help", required: "required", labelActionText: "labelActionText" }, outputs: { labelAction: "labelAction" }, ngImport: i0, template: "<label *ngIf=\"label\">\n <span class=\"title\">\n {{ label }}\n <span *ngIf=\"required\">*</span>\n </span>\n <button\n *ngIf=\"labelActionText\"\n rivLink\n type=\"button\"\n (click)=\"labelAction.emit($event)\"\n type=\"button\"\n >\n {{ labelActionText }}\n </button>\n <riv-help *ngIf=\"help\" [help]=\"help\" [size]=\"12\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n", styles: [":host{max-width:100%;display:flex;flex-direction:column}label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-small);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);color:var(--type-light-high-contrast);margin-bottom:var(--base-grid-size)}label .title{flex-grow:1}label .action{margin:0 var(--size-xxsmall)}label riv-icon{color:var(--type-light-low-contrast)}riv-help{margin-left:var(--size-xsmall)}.content{display:flex;flex-direction:column;flex:1;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i3.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13
|
+
InputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InputLabelComponent, selector: "riv-input-label", inputs: { label: "label", help: "help", required: "required", labelActionText: "labelActionText" }, outputs: { labelAction: "labelAction" }, ngImport: i0, template: "<label *ngIf=\"label\">\n <span class=\"title\">\n {{ label }}\n <span *ngIf=\"required\">*</span>\n </span>\n <button\n *ngIf=\"labelActionText\"\n rivLink\n type=\"button\"\n (click)=\"labelAction.emit($event)\"\n type=\"button\"\n >\n {{ labelActionText }}\n </button>\n <riv-help *ngIf=\"help\" [help]=\"help\" [size]=\"12\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n", styles: [":host{max-width:100%;display:flex;flex-direction:column}label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-small);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);color:var(--type-light-high-contrast);margin-bottom:var(--base-grid-size)}label .title{flex-grow:1}label .action{margin:0 var(--size-xxsmall)}label riv-icon{color:var(--type-light-low-contrast)}riv-help{margin-left:var(--size-xsmall)}.content{display:flex;flex-direction:column;flex:1;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i3.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputLabelComponent, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
16
|
args: [{ selector: 'riv-input-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label *ngIf=\"label\">\n <span class=\"title\">\n {{ label }}\n <span *ngIf=\"required\">*</span>\n </span>\n <button\n *ngIf=\"labelActionText\"\n rivLink\n type=\"button\"\n (click)=\"labelAction.emit($event)\"\n type=\"button\"\n >\n {{ labelActionText }}\n </button>\n <riv-help *ngIf=\"help\" [help]=\"help\" [size]=\"12\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n", styles: [":host{max-width:100%;display:flex;flex-direction:column}label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-small);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);color:var(--type-light-high-contrast);margin-bottom:var(--base-grid-size)}label .title{flex-grow:1}label .action{margin:0 var(--size-xxsmall)}label riv-icon{color:var(--type-light-low-contrast)}riv-help{margin-left:var(--size-xsmall)}.content{display:flex;flex-direction:column;flex:1;justify-content:center}\n"] }]
|
|
@@ -9,21 +9,24 @@ export class LinkComponent {
|
|
|
9
9
|
this.disabled = false;
|
|
10
10
|
this.locked = false;
|
|
11
11
|
this.theme = 'light';
|
|
12
|
+
this.variant = 'basic';
|
|
12
13
|
}
|
|
13
14
|
get classes() {
|
|
14
|
-
return
|
|
15
|
-
this.disabled || this.locked
|
|
16
|
-
this.theme === 'dark' || this.parentCallout?.theme === 'dark'
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
return Object.entries({
|
|
16
|
+
disabled: this.disabled || this.locked,
|
|
17
|
+
theme: this.theme === 'dark' || this.parentCallout?.theme === 'dark',
|
|
18
|
+
[this.variant]: true,
|
|
19
|
+
})
|
|
20
|
+
.filter(([_, v]) => v)
|
|
21
|
+
.map(([k]) => k)
|
|
22
|
+
.join(' ');
|
|
20
23
|
}
|
|
21
24
|
}
|
|
22
25
|
LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LinkComponent, deps: [{ token: i1.CalloutComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
23
|
-
LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LinkComponent, selector: "[rivLink]", inputs: { disabled: "disabled", locked: "locked", theme: "theme" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{text-decoration:none;font:inherit;
|
|
26
|
+
LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LinkComponent, selector: "[rivLink]", inputs: { disabled: "disabled", locked: "locked", theme: "theme", variant: "variant" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{text-decoration:none;font:inherit;cursor:pointer;transition:color var(--short-transition)}:host:hover:not(.disabled){color:var(--type-light-link-hover);text-decoration:underline}:host:active:not(.disabled){color:var(--type-light-link-active);text-decoration:underline}:host.basic{color:var(--type-light-link)}:host.ghost{color:var(--type-light-low-contrast)}:host.basic.disabled,:host.ghost.disabled{color:var(--type-light-disabled);cursor:default}:host.dark{color:var(--type-dark-link)}:host.dark:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.dark:active:not(.disabled){color:var(--type-dark-link-active)}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24
27
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LinkComponent, decorators: [{
|
|
25
28
|
type: Component,
|
|
26
|
-
args: [{ selector: '[rivLink]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{text-decoration:none;font:inherit;
|
|
29
|
+
args: [{ selector: '[rivLink]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{text-decoration:none;font:inherit;cursor:pointer;transition:color var(--short-transition)}:host:hover:not(.disabled){color:var(--type-light-link-hover);text-decoration:underline}:host:active:not(.disabled){color:var(--type-light-link-active);text-decoration:underline}:host.basic{color:var(--type-light-link)}:host.ghost{color:var(--type-light-low-contrast)}:host.basic.disabled,:host.ghost.disabled{color:var(--type-light-disabled);cursor:default}:host.dark{color:var(--type-dark-link)}:host.dark:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.dark:active:not(.disabled){color:var(--type-dark-link-active)}\n"] }]
|
|
27
30
|
}], ctorParameters: function () { return [{ type: i1.CalloutComponent, decorators: [{
|
|
28
31
|
type: Optional
|
|
29
32
|
}] }]; }, propDecorators: { disabled: [{
|
|
@@ -32,11 +35,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
32
35
|
type: Input
|
|
33
36
|
}], theme: [{
|
|
34
37
|
type: Input
|
|
38
|
+
}], variant: [{
|
|
39
|
+
type: Input
|
|
35
40
|
}], classes: [{
|
|
36
41
|
type: HostBinding,
|
|
37
42
|
args: ['class']
|
|
38
43
|
}] } });
|
|
39
44
|
(function (LinkComponent) {
|
|
40
45
|
LinkComponent.Themes = ['light', 'dark'];
|
|
46
|
+
LinkComponent.Variants = ['basic', 'ghost'];
|
|
41
47
|
})(LinkComponent || (LinkComponent = {}));
|
|
42
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
48
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGluay5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9uYXZpZ2F0aW9uL2xpbmsvbGluay5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9uYXZpZ2F0aW9uL2xpbmsvbGluay5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxXQUFXLEVBQ1gsS0FBSyxFQUNMLFFBQVEsR0FDVCxNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFTdkIsTUFBTSxPQUFPLGFBQWE7SUFDeEIsWUFBeUMsYUFBZ0M7UUFBaEMsa0JBQWEsR0FBYixhQUFhLENBQW1CO1FBR3pFLGFBQVEsR0FBWSxLQUFLLENBQUM7UUFHMUIsV0FBTSxHQUFZLEtBQUssQ0FBQztRQUd4QixVQUFLLEdBQXdCLE9BQU8sQ0FBQztRQUdyQyxZQUFPLEdBQTBCLE9BQU8sQ0FBQztJQVptQyxDQUFDO0lBYzdFLElBQ0ksT0FBTztRQUNULE9BQU8sTUFBTSxDQUFDLE9BQU8sQ0FBQztZQUNwQixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVEsSUFBSSxJQUFJLENBQUMsTUFBTTtZQUN0QyxLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUssS0FBSyxNQUFNLElBQUksSUFBSSxDQUFDLGFBQWEsRUFBRSxLQUFLLEtBQUssTUFBTTtZQUNwRSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsRUFBRSxJQUFJO1NBQ3JCLENBQUM7YUFDQyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDO2FBQ3JCLEdBQUcsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUMsQ0FBQzthQUNmLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztJQUNmLENBQUM7OzBHQXpCVSxhQUFhOzhGQUFiLGFBQWEsNExDZjFCLHFHQUVBOzJGRGFhLGFBQWE7a0JBTnpCLFNBQVM7K0JBQ0UsV0FBVyxtQkFHSix1QkFBdUIsQ0FBQyxNQUFNOzswQkFHbEMsUUFBUTs0Q0FHckIsUUFBUTtzQkFEUCxLQUFLO2dCQUlOLE1BQU07c0JBREwsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sT0FBTztzQkFETixLQUFLO2dCQUlGLE9BQU87c0JBRFYsV0FBVzt1QkFBQyxPQUFPOztBQWF0QixXQUFpQixhQUFhO0lBQ2Ysb0JBQU0sR0FBRyxDQUFDLE9BQU8sRUFBRSxNQUFNLENBQVUsQ0FBQztJQUdwQyxzQkFBUSxHQUFHLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBVSxDQUFDO0FBRXRELENBQUMsRUFOZ0IsYUFBYSxLQUFiLGFBQWEsUUFNN0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE9wdGlvbmFsLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENhbGxvdXRDb21wb25lbnQgfSBmcm9tICcuLi8uLi9vdmVybGF5L2NhbGxvdXQvY2FsbG91dC5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdbcml2TGlua10nLFxuICB0ZW1wbGF0ZVVybDogJy4vbGluay5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2xpbmsuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTGlua0NvbXBvbmVudCB7XG4gIGNvbnN0cnVjdG9yKEBPcHRpb25hbCgpIHByaXZhdGUgcmVhZG9ubHkgcGFyZW50Q2FsbG91dD86IENhbGxvdXRDb21wb25lbnQpIHt9XG5cbiAgQElucHV0KClcbiAgZGlzYWJsZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBsb2NrZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICB0aGVtZTogTGlua0NvbXBvbmVudC5UaGVtZSA9ICdsaWdodCc7XG5cbiAgQElucHV0KClcbiAgdmFyaWFudDogTGlua0NvbXBvbmVudC5WYXJpYW50ID0gJ2Jhc2ljJztcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzJylcbiAgZ2V0IGNsYXNzZXMoKSB7XG4gICAgcmV0dXJuIE9iamVjdC5lbnRyaWVzKHtcbiAgICAgIGRpc2FibGVkOiB0aGlzLmRpc2FibGVkIHx8IHRoaXMubG9ja2VkLFxuICAgICAgdGhlbWU6IHRoaXMudGhlbWUgPT09ICdkYXJrJyB8fCB0aGlzLnBhcmVudENhbGxvdXQ/LnRoZW1lID09PSAnZGFyaycsXG4gICAgICBbdGhpcy52YXJpYW50XTogdHJ1ZSxcbiAgICB9KVxuICAgICAgLmZpbHRlcigoW18sIHZdKSA9PiB2KVxuICAgICAgLm1hcCgoW2tdKSA9PiBrKVxuICAgICAgLmpvaW4oJyAnKTtcbiAgfVxufVxuXG5leHBvcnQgbmFtZXNwYWNlIExpbmtDb21wb25lbnQge1xuICBleHBvcnQgY29uc3QgVGhlbWVzID0gWydsaWdodCcsICdkYXJrJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIFRoZW1lID0gKHR5cGVvZiBUaGVtZXMpW251bWJlcl07XG5cbiAgZXhwb3J0IGNvbnN0IFZhcmlhbnRzID0gWydiYXNpYycsICdnaG9zdCddIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBWYXJpYW50ID0gKHR5cGVvZiBWYXJpYW50cylbbnVtYmVyXTtcbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjxyaXYtaWNvbiAqbmdJZj1cImxvY2tlZFwiIFtuYW1lXT1cIidMb2NrJ1wiIFtzaXplXT1cIjE2XCI+PC9yaXYtaWNvbj5cbiJdfQ==
|
|
@@ -187,7 +187,7 @@ export class TableComponent {
|
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
189
|
TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
190
|
-
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary"], descendants: true }, { propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selection"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: ["subheader"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n <riv-callout\n *riv-overlay\n [anchor]=\"position\"\n [isModal]=\"false\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'top-right'\"\n >\n <ng-container\n *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n ></ng-container>\n </riv-callout>\n </ng-container>\n </ng-container>\n <div class=\"loading-container\">\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-loading-cover\n class=\"container-loader-wrapper\"\n [loading]=\"s.load.loading\"\n [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n >\n <div\n class=\"container\"\n [ngClass]=\"{\n 'container-ungrouped': !s.result.isGrouped,\n 'has-header': !s.result.isGrouped && headerTemplate,\n 'without-columns': s.display.columns.length === 0\n }\"\n (rivClientSize)=\"containerSize.next($event)\"\n >\n <riv-zero-state\n *ngIf=\"s.display.columns.length === 0\"\n class=\"no-columns-message\"\n [message]=\"\n 'All columns disabled. Enable at least one column to view table data.'\n \"\n ></riv-zero-state>\n <ng-container\n *ngFor=\"\n let group of s.result.isGrouped\n ? s.result.rowGroups\n : [s.result.rowsAsGroup];\n trackBy: trackByGroup;\n let last = last\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n subheaderTemplate || null;\n context: { state: s, group }\n \"\n ></ng-container>\n <div [ngClass]=\"{ 'subcontainer-grouped': s.result.isGrouped }\">\n <table>\n <thead>\n <tr>\n <th\n *ngIf=\"!!s.selection.allowSelection\"\n class=\"selection-head\"\n >\n <div\n *ngIf=\"\n s.selection.allowSelection !== 'individual' &&\n s.selection.allowSelection === true\n \"\n class=\"checkbox-wrapper\"\n >\n <riv-checkbox\n *ngIf=\"!s.result.isGrouped\"\n [value]=\"s.selection.isAllSelected === true\"\n [indeterminate]=\"\n s.selection.isAllSelected === 'indeterminate'\n \"\n (valueChange)=\"\n manager?.actions?.next({ type: 'allSelectedChange' })\n \"\n ></riv-checkbox>\n <riv-checkbox\n *ngIf=\"s.result.isGrouped\"\n [value]=\"group.selected === true\"\n [indeterminate]=\"group.selected === 'indeterminate'\"\n (valueChange)=\"\n manager?.actions?.next({\n type: 'groupSelectionChange',\n payload: group\n })\n \"\n ></riv-checkbox>\n </div>\n </th>\n <th\n *ngFor=\"let column of s.display.columns; let i = index\"\n [class.pinned]=\"column.pinned\"\n [style.left.px]=\"column.left\"\n [style.width.px]=\"getWidth(column)\"\n draggable=\"true\"\n droppable=\"true\"\n class=\"drop-zone\"\n (dragstart)=\"dragStart(i, column.key)\"\n (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n (drop)=\"drop(i, getEnabledCount(s.display.columns))\"\n [class.dragged-over-left]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx > i\n \"\n [class.dragged-over-right]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx < i\n \"\n >\n <div\n *ngIf=\"\n !column.orderable &&\n !column.filterable &&\n !s.display.columnsAreFreezable &&\n !s.display.columnsAreHideable\n \"\n class=\"header-wrapper\"\n [class.left]=\"column.alignment === 'left'\"\n [class.right]=\"column.alignment === 'right'\"\n >\n {{ s.display.columnNameMap.get(column.key) }}\n </div>\n <riv-menu\n *ngIf=\"\n column.orderable ||\n column.filterable ||\n s.display.columnsAreFreezable ||\n s.display.columnsAreHideable\n \"\n >\n <ng-template #trigger>\n <button\n type=\"button\"\n class=\"header-wrapper\"\n [class.left]=\"column.alignment === 'left'\"\n [class.right]=\"column.alignment === 'right'\"\n [class.active]=\"s.query.order?.column === column.key\"\n >\n {{ s.display.columnNameMap.get(column.key) }}\n <span class=\"icon-container\">\n <riv-icon\n [size]=\"12\"\n [name]=\"\n s.query.order?.direction === 'desc'\n ? 'ArrowDown'\n : 'ArrowUp'\n \"\n ></riv-icon>\n </span>\n </button>\n <riv-table-header-resize-handle\n (dragResize)=\"setWidth(column.key, $event)\"\n ></riv-table-header-resize-handle>\n </ng-template>\n <ng-container *ngIf=\"column.orderable\">\n <button\n *ngIf=\"\n !(\n s.query.order?.column === column.key &&\n s.query.order?.direction === 'asc'\n )\n \"\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'orderChange',\n source: 'headerMenu',\n payload: {\n direction: 'asc',\n column: column.key\n }\n })\n \"\n >\n Sort ascending\n </button>\n <button\n *ngIf=\"s.query.order?.column === column.key\"\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'orderChange',\n source: 'headerMenu',\n payload: null\n })\n \"\n >\n Remove sort\n </button>\n <button\n *ngIf=\"\n !(\n s.query.order?.column === column.key &&\n s.query.order?.direction === 'desc'\n )\n \"\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'orderChange',\n source: 'headerMenu',\n payload: {\n direction: 'desc',\n column: column.key\n }\n })\n \"\n >\n Sort descending\n </button>\n </ng-container>\n <riv-menu-divider\n *ngIf=\"column.orderable && column.filterable\"\n ></riv-menu-divider>\n <button\n *ngIf=\"column.filterable\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'filterAdd',\n columnKey: column.key\n })\n \"\n >\n Add a filter\n </button>\n <riv-menu-divider\n *ngIf=\"\n (column.orderable || column.filterable) &&\n (s.display.columnsAreFreezable ||\n s.display.columnsAreHideable)\n \"\n ></riv-menu-divider>\n <ng-container *ngIf=\"s.display.columnsAreFreezable\">\n <button\n *ngIf=\"!column.pinned\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'columnsFreezeUpToChange',\n freeze: true,\n index: i,\n source: 'headerMenu',\n column: column.key\n })\n \"\n >\n Freeze up to column\n </button>\n <button\n *ngIf=\"column.pinned\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'columnsFreezeUpToChange',\n freeze: false,\n index: 0,\n source: 'headerMenu',\n column: column.key\n })\n \"\n >\n Un-freeze columns\n </button>\n </ng-container>\n <button\n *ngIf=\"s.display.columnsAreHideable\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'columnEnabledChange',\n column: column.key,\n enabled: false,\n source: 'headerMenu'\n })\n \"\n >\n Hide column\n </button>\n </riv-menu>\n </th>\n <th *ngIf=\"menuTemplate\" class=\"menu-head\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n >\n <ng-container\n *ngFor=\"\n let row of group.rows;\n let rowIndex = index;\n trackBy: trackByRow\n \"\n >\n <ng-template #rowBody>\n <td\n *ngIf=\"\n s.selection.allowSelection === true ||\n s.selection.allowSelection === 'individual'\n \"\n class=\"selection-body\"\n (click)=\"$event.preventDefault()\"\n >\n <label\n class=\"checkbox-wrapper\"\n (click)=\"$event.stopPropagation()\"\n >\n <riv-checkbox\n [identifier]=\"'riv-table-selection-' + row.id\"\n [value]=\"row.selected\"\n (valueChange)=\"selectionChange(row.id, $event)\"\n ></riv-checkbox>\n </label>\n </td>\n <ng-container\n *ngFor=\"\n let column of s.display.columns;\n trackBy: trackByColumn\n \"\n >\n <ng-container\n *ngIf=\"\n s.display.cellRowSpan(rowIndex, column.key) as span\n \"\n >\n <td\n *ngIf=\"span > 0\"\n [attr.rowspan]=\"span\"\n [class.pinned]=\"column.pinned\"\n [class.advanced]=\"column.dataType === 'advanced'\"\n [style.left.px]=\"column.left\"\n [style.text-align]=\"column.alignment\"\n (click)=\"handleClick($event, column)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate || null;\n context: { row: row, column: column }\n \"\n ></ng-container>\n </td>\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"menuTemplate\"\n class=\"menu-body\"\n (click)=\"\n $event.stopPropagation(); $event.preventDefault()\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n menuTemplate || null;\n context: { row: row }\n \"\n ></ng-container>\n </td>\n </ng-template>\n <ng-container *ngIf=\"row.rowLink; let rl\">\n <a\n *ngIf=\"isExternalRowLink(rl)\"\n [href]=\"rl.href\"\n class=\"row-link\"\n [class.grayed]=\"s.display.rowsAreGrayed\"\n >\n <ng-container\n *ngTemplateOutlet=\"rowBody\"\n ></ng-container>\n </a>\n <a\n *ngIf=\"isInternalRowLink(rl)\"\n [routerLink]=\"rl.routerLink\"\n [queryParams]=\"rl.queryParams\"\n [queryParamsHandling]=\"rl.queryParamsHandling\"\n class=\"row-link\"\n [class.grayed]=\"s.display.rowsAreGrayed\"\n >\n <ng-container\n *ngTemplateOutlet=\"rowBody\"\n ></ng-container>\n </a>\n </ng-container>\n <tr\n *ngIf=\"!row.rowLink\"\n [class.grayed]=\"s.display.rowsAreGrayed\"\n >\n <ng-container *ngTemplateOutlet=\"rowBody\"></ng-container>\n </tr>\n </ng-container>\n <tr *ngIf=\"s.display.customSummaryRow\">\n <td\n *ngFor=\"\n let column of s.display.columns;\n trackBy: trackByColumn\n \"\n [class.pinned]=\"column.pinned\"\n [class.advanced]=\"column.dataType === 'advanced'\"\n [style.left.px]=\"column.left\"\n [style.text-align]=\"column.alignment\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n summaryTemplate || null;\n context: { column: column }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n <ng-template #empty>\n <tr>\n <td [attr.colspan]=\"s.display.columns.length\">\n <riv-zero-state\n *ngIf=\"s.display.zeroStateMessage; let message\"\n [message]=\"message\"\n ></riv-zero-state>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n </div>\n <div\n class=\"footer\"\n *ngIf=\"\n s.result.isGrouped &&\n group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n group.rows.length === s.query.grouping.countPerGroup\n \"\n >\n <span\n rivLink\n class=\"footer-link\"\n (click)=\"\n manager?.actions?.next({\n type: 'viewMoreKeyChange',\n viewMoreKey: group.groupData.key.toString()\n })\n \"\n >View all {{ group.totalMatchingRowCount }}</span\n >\n </div>\n <br *ngIf=\"!last\" />\n </ng-container>\n </div>\n <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n <div class=\"page-size-controls\">\n <ng-container *ngIf=\"!s.result.isGrouped\">\n <span> Results per page: </span>\n <riv-simple-select\n [selectedOption]=\"{\n id: s.query.pagination.pageSize.toString(),\n title: s.query.pagination.pageSize.toString(),\n value: s.query.pagination.pageSize\n }\"\n (selectedOptionChange)=\"\n manager?.actions?.next({\n type: 'pageSizeChange',\n size: $event?.value || 25\n })\n \"\n [optionGroups]=\"pageSizeOptions\"\n [size]=\"'small'\"\n ></riv-simple-select>\n </ng-container>\n </div>\n <span\n *ngIf=\"s.result.totalMatchingRowCount > 0 && !s.result.isGrouped\"\n class=\"page-data-indicator\"\n >\n {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n s.query.pagination.pageRowEnd | rivNumber\n }}\n of\n {{ s.result.totalMatchingRowCount | rivNumber }}\n </span>\n <div\n *ngIf=\"s.query.pagination.showControls\"\n class=\"pagination-controls\"\n >\n <button\n rivButton\n [variant]=\"'basic'\"\n [size]=\"'small'\"\n [icon]=\"'ArrowLeft'\"\n type=\"button\"\n [disabled]=\"s.query.pagination.previous === null\"\n (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n ></button>\n <span\n *ngIf=\"s.query.pagination.pages[0] > 0\"\n class=\"truncated-pages left\"\n >\n …\n </span>\n <button\n *ngFor=\"let page of s.query.pagination.pages\"\n class=\"page\"\n type=\"button\"\n [disabled]=\"page === s.query.pagination.page\"\n (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n >\n {{ page + 1 }}\n </button>\n <span\n *ngIf=\"\n s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n s.query.pagination.pageCount - 1\n \"\n class=\"truncated-pages right\"\n >\n …\n </span>\n <button\n rivButton\n [variant]=\"'basic'\"\n [size]=\"'small'\"\n [icon]=\"'ArrowRight'\"\n type=\"button\"\n [disabled]=\"s.query.pagination.next === null\"\n (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n ></button>\n </div>\n </div>\n </riv-loading-cover>\n </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover,.loading-container{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header:has(+ div > .subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+ .footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th>riv-menu{width:100%}.header-wrapper{font-size:calc(var(--base-grid-size) * 2.75);font-weight:var(--font-weight-heavy);line-height:1;text-transform:uppercase;letter-spacing:calc(var(--base-grid-size) / 4);padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}button.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}button.header-wrapper:hover{background-color:var(--black-20)}button.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}button.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}button.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}button.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit}a.row-link td{transition:background-color var(--short-transition)}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+ td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body{padding:0;vertical-align:middle}td.selection-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required"], outputs: ["valueChange"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme"] }, { kind: "component", type: i8.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }, { kind: "component", type: i9.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: i10.MenuDividerComponent, selector: "riv-menu-divider" }, { kind: "component", type: i11.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: i12.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i13.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i14.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i15.TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: i16.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i17.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
190
|
+
TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary"], descendants: true }, { propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selection"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: ["subheader"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n <riv-callout\n *riv-overlay\n [anchor]=\"position\"\n [isModal]=\"false\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'top-right'\"\n >\n <ng-container\n *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n ></ng-container>\n </riv-callout>\n </ng-container>\n </ng-container>\n <div class=\"loading-container\">\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-loading-cover\n class=\"container-loader-wrapper\"\n [loading]=\"s.load.loading\"\n [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n >\n <div\n class=\"container\"\n [ngClass]=\"{\n 'container-ungrouped': !s.result.isGrouped,\n 'has-header': !s.result.isGrouped && headerTemplate,\n 'without-columns': s.display.columns.length === 0\n }\"\n (rivClientSize)=\"containerSize.next($event)\"\n >\n <riv-zero-state\n *ngIf=\"s.display.columns.length === 0\"\n class=\"no-columns-message\"\n [message]=\"\n 'All columns disabled. Enable at least one column to view table data.'\n \"\n ></riv-zero-state>\n <ng-container\n *ngFor=\"\n let group of s.result.isGrouped\n ? s.result.rowGroups\n : [s.result.rowsAsGroup];\n trackBy: trackByGroup;\n let last = last\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n subheaderTemplate || null;\n context: { state: s, group }\n \"\n ></ng-container>\n <div [ngClass]=\"{ 'subcontainer-grouped': s.result.isGrouped }\">\n <table>\n <thead>\n <tr>\n <th\n *ngIf=\"!!s.selection.allowSelection\"\n class=\"selection-head\"\n >\n <div\n *ngIf=\"\n s.selection.allowSelection !== 'individual' &&\n s.selection.allowSelection === true\n \"\n class=\"checkbox-wrapper\"\n >\n <riv-checkbox\n *ngIf=\"!s.result.isGrouped\"\n [value]=\"s.selection.isAllSelected === true\"\n [indeterminate]=\"\n s.selection.isAllSelected === 'indeterminate'\n \"\n (valueChange)=\"\n manager?.actions?.next({ type: 'allSelectedChange' })\n \"\n ></riv-checkbox>\n <riv-checkbox\n *ngIf=\"s.result.isGrouped\"\n [value]=\"group.selected === true\"\n [indeterminate]=\"group.selected === 'indeterminate'\"\n (valueChange)=\"\n manager?.actions?.next({\n type: 'groupSelectionChange',\n payload: group\n })\n \"\n ></riv-checkbox>\n </div>\n </th>\n <th\n *ngFor=\"let column of s.display.columns; let i = index\"\n [class.pinned]=\"column.pinned\"\n [style.left.px]=\"column.left\"\n [style.width.px]=\"getWidth(column)\"\n draggable=\"true\"\n droppable=\"true\"\n class=\"drop-zone\"\n (dragstart)=\"dragStart(i, column.key)\"\n (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n (drop)=\"drop(i, getEnabledCount(s.display.columns))\"\n [class.dragged-over-left]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx > i\n \"\n [class.dragged-over-right]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx < i\n \"\n >\n <div\n *ngIf=\"\n !column.orderable &&\n !column.filterable &&\n !s.display.columnsAreFreezable &&\n !s.display.columnsAreHideable\n \"\n class=\"header-wrapper\"\n [class.left]=\"column.alignment === 'left'\"\n [class.right]=\"column.alignment === 'right'\"\n >\n {{ s.display.columnNameMap.get(column.key) }}\n </div>\n <riv-menu\n *ngIf=\"\n column.orderable ||\n column.filterable ||\n s.display.columnsAreFreezable ||\n s.display.columnsAreHideable\n \"\n >\n <ng-template #trigger>\n <button\n type=\"button\"\n class=\"header-wrapper\"\n [class.left]=\"column.alignment === 'left'\"\n [class.right]=\"column.alignment === 'right'\"\n [class.active]=\"s.query.order?.column === column.key\"\n >\n {{ s.display.columnNameMap.get(column.key) }}\n <span class=\"icon-container\">\n <riv-icon\n [size]=\"12\"\n [name]=\"\n s.query.order?.direction === 'desc'\n ? 'ArrowDown'\n : 'ArrowUp'\n \"\n ></riv-icon>\n </span>\n </button>\n <riv-table-header-resize-handle\n (dragResize)=\"setWidth(column.key, $event)\"\n ></riv-table-header-resize-handle>\n </ng-template>\n <ng-container *ngIf=\"column.orderable\">\n <button\n *ngIf=\"\n !(\n s.query.order?.column === column.key &&\n s.query.order?.direction === 'asc'\n )\n \"\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'orderChange',\n source: 'headerMenu',\n payload: {\n direction: 'asc',\n column: column.key\n }\n })\n \"\n >\n Sort ascending\n </button>\n <button\n *ngIf=\"s.query.order?.column === column.key\"\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'orderChange',\n source: 'headerMenu',\n payload: null\n })\n \"\n >\n Remove sort\n </button>\n <button\n *ngIf=\"\n !(\n s.query.order?.column === column.key &&\n s.query.order?.direction === 'desc'\n )\n \"\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'orderChange',\n source: 'headerMenu',\n payload: {\n direction: 'desc',\n column: column.key\n }\n })\n \"\n >\n Sort descending\n </button>\n </ng-container>\n <riv-menu-divider\n *ngIf=\"column.orderable && column.filterable\"\n ></riv-menu-divider>\n <button\n *ngIf=\"column.filterable\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'filterAdd',\n columnKey: column.key\n })\n \"\n >\n Add a filter\n </button>\n <riv-menu-divider\n *ngIf=\"\n (column.orderable || column.filterable) &&\n (s.display.columnsAreFreezable ||\n s.display.columnsAreHideable)\n \"\n ></riv-menu-divider>\n <ng-container *ngIf=\"s.display.columnsAreFreezable\">\n <button\n *ngIf=\"!column.pinned\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'columnsFreezeUpToChange',\n freeze: true,\n index: i,\n source: 'headerMenu',\n column: column.key\n })\n \"\n >\n Freeze up to column\n </button>\n <button\n *ngIf=\"column.pinned\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'columnsFreezeUpToChange',\n freeze: false,\n index: 0,\n source: 'headerMenu',\n column: column.key\n })\n \"\n >\n Un-freeze columns\n </button>\n </ng-container>\n <button\n *ngIf=\"s.display.columnsAreHideable\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'columnEnabledChange',\n column: column.key,\n enabled: false,\n source: 'headerMenu'\n })\n \"\n >\n Hide column\n </button>\n </riv-menu>\n </th>\n <th *ngIf=\"menuTemplate\" class=\"menu-head\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n >\n <ng-container\n *ngFor=\"\n let row of group.rows;\n let rowIndex = index;\n trackBy: trackByRow\n \"\n >\n <ng-template #rowBody>\n <td\n *ngIf=\"\n s.selection.allowSelection === true ||\n s.selection.allowSelection === 'individual'\n \"\n class=\"selection-body\"\n (click)=\"$event.preventDefault()\"\n >\n <label\n class=\"checkbox-wrapper\"\n (click)=\"$event.stopPropagation()\"\n >\n <riv-checkbox\n [identifier]=\"'riv-table-selection-' + row.id\"\n [value]=\"row.selected\"\n (valueChange)=\"selectionChange(row.id, $event)\"\n ></riv-checkbox>\n </label>\n </td>\n <ng-container\n *ngFor=\"\n let column of s.display.columns;\n trackBy: trackByColumn\n \"\n >\n <ng-container\n *ngIf=\"\n s.display.cellRowSpan(rowIndex, column.key) as span\n \"\n >\n <td\n *ngIf=\"span > 0\"\n [attr.rowspan]=\"span\"\n [class.pinned]=\"column.pinned\"\n [class.advanced]=\"column.dataType === 'advanced'\"\n [style.left.px]=\"column.left\"\n [style.text-align]=\"column.alignment\"\n (click)=\"handleClick($event, column)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate || null;\n context: { row: row, column: column }\n \"\n ></ng-container>\n </td>\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"menuTemplate\"\n class=\"menu-body\"\n (click)=\"\n $event.stopPropagation(); $event.preventDefault()\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n menuTemplate || null;\n context: { row: row }\n \"\n ></ng-container>\n </td>\n </ng-template>\n <ng-container *ngIf=\"row.rowLink; let rl\">\n <a\n *ngIf=\"isExternalRowLink(rl)\"\n [href]=\"rl.href\"\n class=\"row-link\"\n [class.grayed]=\"s.display.rowsAreGrayed\"\n >\n <ng-container\n *ngTemplateOutlet=\"rowBody\"\n ></ng-container>\n </a>\n <a\n *ngIf=\"isInternalRowLink(rl)\"\n [routerLink]=\"rl.routerLink\"\n [queryParams]=\"rl.queryParams\"\n [queryParamsHandling]=\"rl.queryParamsHandling\"\n class=\"row-link\"\n [class.grayed]=\"s.display.rowsAreGrayed\"\n >\n <ng-container\n *ngTemplateOutlet=\"rowBody\"\n ></ng-container>\n </a>\n </ng-container>\n <tr\n *ngIf=\"!row.rowLink\"\n [class.grayed]=\"s.display.rowsAreGrayed\"\n >\n <ng-container *ngTemplateOutlet=\"rowBody\"></ng-container>\n </tr>\n </ng-container>\n <tr *ngIf=\"s.display.customSummaryRow\">\n <td\n *ngFor=\"\n let column of s.display.columns;\n trackBy: trackByColumn\n \"\n [class.pinned]=\"column.pinned\"\n [class.advanced]=\"column.dataType === 'advanced'\"\n [style.left.px]=\"column.left\"\n [style.text-align]=\"column.alignment\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n summaryTemplate || null;\n context: { column: column }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n <ng-template #empty>\n <tr>\n <td [attr.colspan]=\"s.display.columns.length\">\n <riv-zero-state\n *ngIf=\"s.display.zeroStateMessage; let message\"\n [message]=\"message\"\n ></riv-zero-state>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n </div>\n <div\n class=\"footer\"\n *ngIf=\"\n s.result.isGrouped &&\n group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n group.rows.length === s.query.grouping.countPerGroup\n \"\n >\n <span\n rivLink\n class=\"footer-link\"\n (click)=\"\n manager?.actions?.next({\n type: 'viewMoreKeyChange',\n viewMoreKey: group.groupData.key.toString()\n })\n \"\n >View all {{ group.totalMatchingRowCount }}</span\n >\n </div>\n <br *ngIf=\"!last\" />\n </ng-container>\n </div>\n <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n <div class=\"page-size-controls\">\n <ng-container *ngIf=\"!s.result.isGrouped\">\n <span> Results per page: </span>\n <riv-simple-select\n [selectedOption]=\"{\n id: s.query.pagination.pageSize.toString(),\n title: s.query.pagination.pageSize.toString(),\n value: s.query.pagination.pageSize\n }\"\n (selectedOptionChange)=\"\n manager?.actions?.next({\n type: 'pageSizeChange',\n size: $event?.value || 25\n })\n \"\n [optionGroups]=\"pageSizeOptions\"\n [size]=\"'small'\"\n ></riv-simple-select>\n </ng-container>\n </div>\n <span\n *ngIf=\"s.result.totalMatchingRowCount > 0 && !s.result.isGrouped\"\n class=\"page-data-indicator\"\n >\n {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n s.query.pagination.pageRowEnd | rivNumber\n }}\n of\n {{ s.result.totalMatchingRowCount | rivNumber }}\n </span>\n <div\n *ngIf=\"s.query.pagination.showControls\"\n class=\"pagination-controls\"\n >\n <button\n rivButton\n [variant]=\"'basic'\"\n [size]=\"'small'\"\n [icon]=\"'ArrowLeft'\"\n type=\"button\"\n [disabled]=\"s.query.pagination.previous === null\"\n (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n ></button>\n <span\n *ngIf=\"s.query.pagination.pages[0] > 0\"\n class=\"truncated-pages left\"\n >\n …\n </span>\n <button\n *ngFor=\"let page of s.query.pagination.pages\"\n class=\"page\"\n type=\"button\"\n [disabled]=\"page === s.query.pagination.page\"\n (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n >\n {{ page + 1 }}\n </button>\n <span\n *ngIf=\"\n s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n s.query.pagination.pageCount - 1\n \"\n class=\"truncated-pages right\"\n >\n …\n </span>\n <button\n rivButton\n [variant]=\"'basic'\"\n [size]=\"'small'\"\n [icon]=\"'ArrowRight'\"\n type=\"button\"\n [disabled]=\"s.query.pagination.next === null\"\n (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n ></button>\n </div>\n </div>\n </riv-loading-cover>\n </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover,.loading-container{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header:has(+ div > .subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+ .footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th>riv-menu{width:100%}.header-wrapper{font-size:calc(var(--base-grid-size) * 2.75);font-weight:var(--font-weight-heavy);line-height:1;text-transform:uppercase;letter-spacing:calc(var(--base-grid-size) / 4);padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}button.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}button.header-wrapper:hover{background-color:var(--black-20)}button.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}button.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}button.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}button.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit}a.row-link td{transition:background-color var(--short-transition)}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+ td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body{padding:0;vertical-align:middle}td.selection-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "active"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required"], outputs: ["valueChange"] }, { kind: "component", type: i6.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: i7.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: i8.LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }, { kind: "component", type: i9.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: i10.MenuDividerComponent, selector: "riv-menu-divider" }, { kind: "component", type: i11.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: i12.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i13.SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: i14.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: i15.TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: i16.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i17.NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
191
191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
|
|
192
192
|
type: Component,
|
|
193
193
|
args: [{ selector: 'riv-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n <riv-callout\n *riv-overlay\n [anchor]=\"position\"\n [isModal]=\"false\"\n [theme]=\"'light'\"\n [showCaret]=\"false\"\n [preferredPosition]=\"'top-right'\"\n >\n <ng-container\n *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n ></ng-container>\n </riv-callout>\n </ng-container>\n </ng-container>\n <div class=\"loading-container\">\n <header *ngIf=\"headerTemplate\">\n <ng-container\n *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n ></ng-container>\n </header>\n <riv-loading-cover\n class=\"container-loader-wrapper\"\n [loading]=\"s.load.loading\"\n [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n >\n <div\n class=\"container\"\n [ngClass]=\"{\n 'container-ungrouped': !s.result.isGrouped,\n 'has-header': !s.result.isGrouped && headerTemplate,\n 'without-columns': s.display.columns.length === 0\n }\"\n (rivClientSize)=\"containerSize.next($event)\"\n >\n <riv-zero-state\n *ngIf=\"s.display.columns.length === 0\"\n class=\"no-columns-message\"\n [message]=\"\n 'All columns disabled. Enable at least one column to view table data.'\n \"\n ></riv-zero-state>\n <ng-container\n *ngFor=\"\n let group of s.result.isGrouped\n ? s.result.rowGroups\n : [s.result.rowsAsGroup];\n trackBy: trackByGroup;\n let last = last\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n subheaderTemplate || null;\n context: { state: s, group }\n \"\n ></ng-container>\n <div [ngClass]=\"{ 'subcontainer-grouped': s.result.isGrouped }\">\n <table>\n <thead>\n <tr>\n <th\n *ngIf=\"!!s.selection.allowSelection\"\n class=\"selection-head\"\n >\n <div\n *ngIf=\"\n s.selection.allowSelection !== 'individual' &&\n s.selection.allowSelection === true\n \"\n class=\"checkbox-wrapper\"\n >\n <riv-checkbox\n *ngIf=\"!s.result.isGrouped\"\n [value]=\"s.selection.isAllSelected === true\"\n [indeterminate]=\"\n s.selection.isAllSelected === 'indeterminate'\n \"\n (valueChange)=\"\n manager?.actions?.next({ type: 'allSelectedChange' })\n \"\n ></riv-checkbox>\n <riv-checkbox\n *ngIf=\"s.result.isGrouped\"\n [value]=\"group.selected === true\"\n [indeterminate]=\"group.selected === 'indeterminate'\"\n (valueChange)=\"\n manager?.actions?.next({\n type: 'groupSelectionChange',\n payload: group\n })\n \"\n ></riv-checkbox>\n </div>\n </th>\n <th\n *ngFor=\"let column of s.display.columns; let i = index\"\n [class.pinned]=\"column.pinned\"\n [style.left.px]=\"column.left\"\n [style.width.px]=\"getWidth(column)\"\n draggable=\"true\"\n droppable=\"true\"\n class=\"drop-zone\"\n (dragstart)=\"dragStart(i, column.key)\"\n (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n (drop)=\"drop(i, getEnabledCount(s.display.columns))\"\n [class.dragged-over-left]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx > i\n \"\n [class.dragged-over-right]=\"\n draggedOverColumnIdx === i &&\n draggedColumnIdx !== null &&\n draggedColumnIdx < i\n \"\n >\n <div\n *ngIf=\"\n !column.orderable &&\n !column.filterable &&\n !s.display.columnsAreFreezable &&\n !s.display.columnsAreHideable\n \"\n class=\"header-wrapper\"\n [class.left]=\"column.alignment === 'left'\"\n [class.right]=\"column.alignment === 'right'\"\n >\n {{ s.display.columnNameMap.get(column.key) }}\n </div>\n <riv-menu\n *ngIf=\"\n column.orderable ||\n column.filterable ||\n s.display.columnsAreFreezable ||\n s.display.columnsAreHideable\n \"\n >\n <ng-template #trigger>\n <button\n type=\"button\"\n class=\"header-wrapper\"\n [class.left]=\"column.alignment === 'left'\"\n [class.right]=\"column.alignment === 'right'\"\n [class.active]=\"s.query.order?.column === column.key\"\n >\n {{ s.display.columnNameMap.get(column.key) }}\n <span class=\"icon-container\">\n <riv-icon\n [size]=\"12\"\n [name]=\"\n s.query.order?.direction === 'desc'\n ? 'ArrowDown'\n : 'ArrowUp'\n \"\n ></riv-icon>\n </span>\n </button>\n <riv-table-header-resize-handle\n (dragResize)=\"setWidth(column.key, $event)\"\n ></riv-table-header-resize-handle>\n </ng-template>\n <ng-container *ngIf=\"column.orderable\">\n <button\n *ngIf=\"\n !(\n s.query.order?.column === column.key &&\n s.query.order?.direction === 'asc'\n )\n \"\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'orderChange',\n source: 'headerMenu',\n payload: {\n direction: 'asc',\n column: column.key\n }\n })\n \"\n >\n Sort ascending\n </button>\n <button\n *ngIf=\"s.query.order?.column === column.key\"\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'orderChange',\n source: 'headerMenu',\n payload: null\n })\n \"\n >\n Remove sort\n </button>\n <button\n *ngIf=\"\n !(\n s.query.order?.column === column.key &&\n s.query.order?.direction === 'desc'\n )\n \"\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'orderChange',\n source: 'headerMenu',\n payload: {\n direction: 'desc',\n column: column.key\n }\n })\n \"\n >\n Sort descending\n </button>\n </ng-container>\n <riv-menu-divider\n *ngIf=\"column.orderable && column.filterable\"\n ></riv-menu-divider>\n <button\n *ngIf=\"column.filterable\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'filterAdd',\n columnKey: column.key\n })\n \"\n >\n Add a filter\n </button>\n <riv-menu-divider\n *ngIf=\"\n (column.orderable || column.filterable) &&\n (s.display.columnsAreFreezable ||\n s.display.columnsAreHideable)\n \"\n ></riv-menu-divider>\n <ng-container *ngIf=\"s.display.columnsAreFreezable\">\n <button\n *ngIf=\"!column.pinned\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'columnsFreezeUpToChange',\n freeze: true,\n index: i,\n source: 'headerMenu',\n column: column.key\n })\n \"\n >\n Freeze up to column\n </button>\n <button\n *ngIf=\"column.pinned\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'columnsFreezeUpToChange',\n freeze: false,\n index: 0,\n source: 'headerMenu',\n column: column.key\n })\n \"\n >\n Un-freeze columns\n </button>\n </ng-container>\n <button\n *ngIf=\"s.display.columnsAreHideable\"\n riv-menu-item\n (click)=\"\n this.manager?.actions?.next({\n type: 'columnEnabledChange',\n column: column.key,\n enabled: false,\n source: 'headerMenu'\n })\n \"\n >\n Hide column\n </button>\n </riv-menu>\n </th>\n <th *ngIf=\"menuTemplate\" class=\"menu-head\"></th>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n >\n <ng-container\n *ngFor=\"\n let row of group.rows;\n let rowIndex = index;\n trackBy: trackByRow\n \"\n >\n <ng-template #rowBody>\n <td\n *ngIf=\"\n s.selection.allowSelection === true ||\n s.selection.allowSelection === 'individual'\n \"\n class=\"selection-body\"\n (click)=\"$event.preventDefault()\"\n >\n <label\n class=\"checkbox-wrapper\"\n (click)=\"$event.stopPropagation()\"\n >\n <riv-checkbox\n [identifier]=\"'riv-table-selection-' + row.id\"\n [value]=\"row.selected\"\n (valueChange)=\"selectionChange(row.id, $event)\"\n ></riv-checkbox>\n </label>\n </td>\n <ng-container\n *ngFor=\"\n let column of s.display.columns;\n trackBy: trackByColumn\n \"\n >\n <ng-container\n *ngIf=\"\n s.display.cellRowSpan(rowIndex, column.key) as span\n \"\n >\n <td\n *ngIf=\"span > 0\"\n [attr.rowspan]=\"span\"\n [class.pinned]=\"column.pinned\"\n [class.advanced]=\"column.dataType === 'advanced'\"\n [style.left.px]=\"column.left\"\n [style.text-align]=\"column.alignment\"\n (click)=\"handleClick($event, column)\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n cellTemplate || null;\n context: { row: row, column: column }\n \"\n ></ng-container>\n </td>\n </ng-container>\n </ng-container>\n <td\n *ngIf=\"menuTemplate\"\n class=\"menu-body\"\n (click)=\"\n $event.stopPropagation(); $event.preventDefault()\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n menuTemplate || null;\n context: { row: row }\n \"\n ></ng-container>\n </td>\n </ng-template>\n <ng-container *ngIf=\"row.rowLink; let rl\">\n <a\n *ngIf=\"isExternalRowLink(rl)\"\n [href]=\"rl.href\"\n class=\"row-link\"\n [class.grayed]=\"s.display.rowsAreGrayed\"\n >\n <ng-container\n *ngTemplateOutlet=\"rowBody\"\n ></ng-container>\n </a>\n <a\n *ngIf=\"isInternalRowLink(rl)\"\n [routerLink]=\"rl.routerLink\"\n [queryParams]=\"rl.queryParams\"\n [queryParamsHandling]=\"rl.queryParamsHandling\"\n class=\"row-link\"\n [class.grayed]=\"s.display.rowsAreGrayed\"\n >\n <ng-container\n *ngTemplateOutlet=\"rowBody\"\n ></ng-container>\n </a>\n </ng-container>\n <tr\n *ngIf=\"!row.rowLink\"\n [class.grayed]=\"s.display.rowsAreGrayed\"\n >\n <ng-container *ngTemplateOutlet=\"rowBody\"></ng-container>\n </tr>\n </ng-container>\n <tr *ngIf=\"s.display.customSummaryRow\">\n <td\n *ngFor=\"\n let column of s.display.columns;\n trackBy: trackByColumn\n \"\n [class.pinned]=\"column.pinned\"\n [class.advanced]=\"column.dataType === 'advanced'\"\n [style.left.px]=\"column.left\"\n [style.text-align]=\"column.alignment\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n summaryTemplate || null;\n context: { column: column }\n \"\n ></ng-container>\n </td>\n </tr>\n </ng-container>\n <ng-template #empty>\n <tr>\n <td [attr.colspan]=\"s.display.columns.length\">\n <riv-zero-state\n *ngIf=\"s.display.zeroStateMessage; let message\"\n [message]=\"message\"\n ></riv-zero-state>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n </div>\n <div\n class=\"footer\"\n *ngIf=\"\n s.result.isGrouped &&\n group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n group.rows.length === s.query.grouping.countPerGroup\n \"\n >\n <span\n rivLink\n class=\"footer-link\"\n (click)=\"\n manager?.actions?.next({\n type: 'viewMoreKeyChange',\n viewMoreKey: group.groupData.key.toString()\n })\n \"\n >View all {{ group.totalMatchingRowCount }}</span\n >\n </div>\n <br *ngIf=\"!last\" />\n </ng-container>\n </div>\n <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n <div class=\"page-size-controls\">\n <ng-container *ngIf=\"!s.result.isGrouped\">\n <span> Results per page: </span>\n <riv-simple-select\n [selectedOption]=\"{\n id: s.query.pagination.pageSize.toString(),\n title: s.query.pagination.pageSize.toString(),\n value: s.query.pagination.pageSize\n }\"\n (selectedOptionChange)=\"\n manager?.actions?.next({\n type: 'pageSizeChange',\n size: $event?.value || 25\n })\n \"\n [optionGroups]=\"pageSizeOptions\"\n [size]=\"'small'\"\n ></riv-simple-select>\n </ng-container>\n </div>\n <span\n *ngIf=\"s.result.totalMatchingRowCount > 0 && !s.result.isGrouped\"\n class=\"page-data-indicator\"\n >\n {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n s.query.pagination.pageRowEnd | rivNumber\n }}\n of\n {{ s.result.totalMatchingRowCount | rivNumber }}\n </span>\n <div\n *ngIf=\"s.query.pagination.showControls\"\n class=\"pagination-controls\"\n >\n <button\n rivButton\n [variant]=\"'basic'\"\n [size]=\"'small'\"\n [icon]=\"'ArrowLeft'\"\n type=\"button\"\n [disabled]=\"s.query.pagination.previous === null\"\n (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n ></button>\n <span\n *ngIf=\"s.query.pagination.pages[0] > 0\"\n class=\"truncated-pages left\"\n >\n …\n </span>\n <button\n *ngFor=\"let page of s.query.pagination.pages\"\n class=\"page\"\n type=\"button\"\n [disabled]=\"page === s.query.pagination.page\"\n (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n >\n {{ page + 1 }}\n </button>\n <span\n *ngIf=\"\n s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n s.query.pagination.pageCount - 1\n \"\n class=\"truncated-pages right\"\n >\n …\n </span>\n <button\n rivButton\n [variant]=\"'basic'\"\n [size]=\"'small'\"\n [icon]=\"'ArrowRight'\"\n type=\"button\"\n [disabled]=\"s.query.pagination.next === null\"\n (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n ></button>\n </div>\n </div>\n </riv-loading-cover>\n </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover,.loading-container{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header:has(+ div > .subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+ .footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th>riv-menu{width:100%}.header-wrapper{font-size:calc(var(--base-grid-size) * 2.75);font-weight:var(--font-weight-heavy);line-height:1;text-transform:uppercase;letter-spacing:calc(var(--base-grid-size) / 4);padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}button.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}button.header-wrapper:hover{background-color:var(--black-20)}button.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}button.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}button.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}button.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit}a.row-link td{transition:background-color var(--short-transition)}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+ td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body{padding:0;vertical-align:middle}td.selection-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}\n"] }]
|
|
@@ -140,7 +140,7 @@ export class ChartComponent {
|
|
|
140
140
|
}
|
|
141
141
|
}
|
|
142
142
|
ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
143
|
-
ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"(empty$ | async) === false; else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"!!hover\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\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 <circle\n class=\"marker\"\n *ngIf=\"\n !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"!!hover\">\n <riv-callout\n *riv-overlay\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></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 </div>\n <legend>\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\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\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 < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n *riv-overlay\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\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\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\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 #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke: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)}.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}.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)}\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.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: "component", type: i4.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme"] }, { kind: "directive", type: i5.OverlayDirective, selector: "[riv-overlay]" }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
143
|
+
ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"(empty$ | async) === false; else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"!!hover\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\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 <circle\n class=\"marker\"\n *ngIf=\"\n !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"!!hover\">\n <riv-callout\n *riv-overlay\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></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 </div>\n <legend>\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\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\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 < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n *riv-overlay\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\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\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\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 #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke: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)}.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}.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)}\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.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: "component", type: i4.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "directive", type: i5.OverlayDirective, selector: "[riv-overlay]" }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
144
144
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, decorators: [{
|
|
145
145
|
type: Component,
|
|
146
146
|
args: [{ selector: 'riv-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"container\"\n (rivClientSize)=\"width = $event.width\"\n *ngIf=\"(empty$ | async) === false; else zeroState\"\n>\n <ng-container *ngIf=\"drawData$ | async; let d\">\n <div\n (mousemove)=\"mousemove($event, d.hover)\"\n (mouseleave)=\"mouseleave($event)\"\n (click)=\"click()\"\n #container\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" [attr.viewBox]=\"d.viewBox\">\n <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"tick.x\"\n [attr.x2]=\"tick.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n ></line>\n <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngFor=\"let tick of d.yTicks\">\n <line\n class=\"tick-line\"\n [attr.y1]=\"tick.y\"\n [attr.y2]=\"tick.y\"\n x1=\"0\"\n [attr.x2]=\"width\"\n ></line>\n <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n {{ tick.label }}\n </text>\n </g>\n <g *ngIf=\"!!hover\">\n <line\n class=\"tick-line\"\n [attr.x1]=\"hover.x\"\n [attr.x2]=\"hover.x\"\n y1=\"0\"\n [attr.y2]=\"HEIGHT - 16\"\n stroke-width=\"2\"\n stroke-dasharray=\"4\"\n />\n </g>\n <g *ngFor=\"let bar of d.bars; let i = index\">\n <rect\n *ngFor=\"let rect of bar\"\n [attr.x]=\"rect.x\"\n [attr.y]=\"rect.y\"\n [attr.width]=\"rect.width\"\n [attr.height]=\"rect.height\"\n [attr.fill]=\"varColor(d.colors, i)\"\n ></rect>\n </g>\n <g *ngFor=\"let line of d.lines; let i = index\">\n <path\n [attr.d]=\"line\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n fill=\"none\"\n stroke-width=\"2\"\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 <circle\n class=\"marker\"\n *ngIf=\"\n !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n </g>\n <g *ngFor=\"let area of d.areas; let i = index\">\n <circle\n class=\"marker\"\n *ngIf=\"\n !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n \"\n [attr.cx]=\"hover.x\"\n [attr.cy]=\"hover.ys[i]\"\n r=\"3.5\"\n stroke-width=\"2\"\n [attr.stroke]=\"varColor(d.colors, i)\"\n ></circle>\n </g>\n </svg>\n <ng-container *ngIf=\"!!hover\">\n <riv-callout\n *riv-overlay\n [anchor]=\"hover.tooltip.anchor\"\n [isModal]=\"false\"\n [preferredPosition]=\"'center-right'\"\n [theme]=\"'light'\"\n >\n <div class=\"callout-content\">\n <div class=\"callout-row\">\n {{ hover.tooltip.date }}\n </div>\n <div\n class=\"callout-row\"\n *ngFor=\"let metric of hover.tooltip.metrics\"\n >\n <span class=\"series-label\">\n <riv-legend-item [colorToken]=\"metric.color\"></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 </div>\n <legend>\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\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\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 < d.data.ys.length\"\n >\n <span rivLink class=\"more-text\">\n +\n {{ d.data.ys.length - fi }} more\n </span>\n </div>\n <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n <riv-callout\n *riv-overlay\n [anchor]=\"moreTextContainer?.nativeElement\"\n [isModal]=\"lockShowMoreTooltip\"\n (close)=\"lockShowMoreTooltip = false\"\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\"\n [label]=\"item.label\"\n [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n [clickable]=\"config.allowLegendToggle\"\n [colorToken]=\"config.colors[i % config.colors.length]\"\n (itemClick)=\"toggleLegend(item.label)\"\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 #zeroState>\n <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke: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)}.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}.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)}\n"] }]
|