@rivet-health/design-system 40.20.0 → 40.21.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/navigation/page-header/page-header.component.mjs +13 -4
- package/esm2020/lib/overlay/callout/tooltip/tooltip.component.mjs +2 -2
- package/fesm2015/rivet-health-design-system.mjs +14 -5
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +14 -5
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/navigation/page-header/page-header.component.d.ts +6 -2
- package/package.json +1 -1
|
@@ -6,7 +6,8 @@ import * as i2 from "../../icon/icon.component";
|
|
|
6
6
|
* Page header used to display the page/product the user is on.
|
|
7
7
|
*
|
|
8
8
|
* It has two mutually-exclusive left-side modes:
|
|
9
|
-
* - `title` mode (default): shows a plain page title
|
|
9
|
+
* - `title` mode (default): shows a plain page title, with an optional
|
|
10
|
+
* `description` beneath it.
|
|
10
11
|
* - `back` mode: when `backTo` is provided, the title is replaced by a
|
|
11
12
|
* "Back to <previous page>" button that emits `back` when activated. This is
|
|
12
13
|
* intended for when the user navigates a level deeper (e.g. worklist →
|
|
@@ -40,14 +41,19 @@ export class PageHeaderComponent {
|
|
|
40
41
|
get isBack() {
|
|
41
42
|
return this.backTo != null;
|
|
42
43
|
}
|
|
44
|
+
get hasDescription() {
|
|
45
|
+
return !this.isBack && !!this.description;
|
|
46
|
+
}
|
|
43
47
|
}
|
|
44
48
|
PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
45
|
-
PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PageHeaderComponent, selector: "riv-page-header", inputs: { title: "title", backTo: "backTo" }, outputs: { back: "back" }, host: { properties: { "class.back": "this.isBack" } }, ngImport: i0, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
49
|
+
PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PageHeaderComponent, selector: "riv-page-header", inputs: { title: "title", description: "description", backTo: "backTo" }, outputs: { back: "back" }, host: { properties: { "class.back": "this.isBack", "class.has-description": "this.hasDescription" } }, ngImport: i0, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n <p *ngIf=\"description\" class=\"description\">{{ description }}</p>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.has-description{align-items:flex-start}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.description{margin:var(--size-small) 0 0;max-width:100ch;font:var(--body-small);color:var(--type-light-low-contrast)}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
46
50
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
47
51
|
type: Component,
|
|
48
|
-
args: [{ selector: 'riv-page-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"] }]
|
|
52
|
+
args: [{ selector: 'riv-page-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n <p *ngIf=\"description\" class=\"description\">{{ description }}</p>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.has-description{align-items:flex-start}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.description{margin:var(--size-small) 0 0;max-width:100ch;font:var(--body-small);color:var(--type-light-low-contrast)}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"] }]
|
|
49
53
|
}], propDecorators: { title: [{
|
|
50
54
|
type: Input
|
|
55
|
+
}], description: [{
|
|
56
|
+
type: Input
|
|
51
57
|
}], backTo: [{
|
|
52
58
|
type: Input
|
|
53
59
|
}], back: [{
|
|
@@ -55,5 +61,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
55
61
|
}], isBack: [{
|
|
56
62
|
type: HostBinding,
|
|
57
63
|
args: ['class.back']
|
|
64
|
+
}], hasDescription: [{
|
|
65
|
+
type: HostBinding,
|
|
66
|
+
args: ['class.has-description']
|
|
58
67
|
}] } });
|
|
59
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGFnZS1oZWFkZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvbmF2aWdhdGlvbi9wYWdlLWhlYWRlci9wYWdlLWhlYWRlci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9uYXZpZ2F0aW9uL3BhZ2UtaGVhZGVyL3BhZ2UtaGVhZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixXQUFXLEVBQ1gsS0FBSyxFQUNMLE1BQU0sR0FDUCxNQUFNLGVBQWUsQ0FBQzs7OztBQUV2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBOEJHO0FBT0gsTUFBTSxPQUFPLG1CQUFtQjtJQU5oQztRQXNCRSxrRUFBa0U7UUFFbEUsU0FBSSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0FXakM7SUFUQyxJQUNJLE1BQU07UUFDUixPQUFPLElBQUksQ0FBQyxNQUFNLElBQUksSUFBSSxDQUFDO0lBQzdCLENBQUM7SUFFRCxJQUNJLGNBQWM7UUFDaEIsT0FBTyxDQUFDLElBQUksQ0FBQyxNQUFNLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUM7SUFDNUMsQ0FBQzs7aUhBNUJVLG1CQUFtQjtxR0FBbkIsbUJBQW1CLG1RQzlDaEMsZ2pCQWdCQTs0RkQ4QmEsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNFLGlCQUFpQixtQkFHVix1QkFBdUIsQ0FBQyxNQUFNOzhCQUsvQyxLQUFLO3NCQURKLEtBQUs7Z0JBS04sV0FBVztzQkFEVixLQUFLO2dCQVFOLE1BQU07c0JBREwsS0FBSztnQkFLTixJQUFJO3NCQURILE1BQU07Z0JBSUgsTUFBTTtzQkFEVCxXQUFXO3VCQUFDLFlBQVk7Z0JBTXJCLGNBQWM7c0JBRGpCLFdBQVc7dUJBQUMsdUJBQXVCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbi8qKlxuICogUGFnZSBoZWFkZXIgdXNlZCB0byBkaXNwbGF5IHRoZSBwYWdlL3Byb2R1Y3QgdGhlIHVzZXIgaXMgb24uXG4gKlxuICogSXQgaGFzIHR3byBtdXR1YWxseS1leGNsdXNpdmUgbGVmdC1zaWRlIG1vZGVzOlxuICogLSBgdGl0bGVgIG1vZGUgKGRlZmF1bHQpOiBzaG93cyBhIHBsYWluIHBhZ2UgdGl0bGUsIHdpdGggYW4gb3B0aW9uYWxcbiAqICAgYGRlc2NyaXB0aW9uYCBiZW5lYXRoIGl0LlxuICogLSBgYmFja2AgbW9kZTogd2hlbiBgYmFja1RvYCBpcyBwcm92aWRlZCwgdGhlIHRpdGxlIGlzIHJlcGxhY2VkIGJ5IGFcbiAqICAgXCJCYWNrIHRvIDxwcmV2aW91cyBwYWdlPlwiIGJ1dHRvbiB0aGF0IGVtaXRzIGBiYWNrYCB3aGVuIGFjdGl2YXRlZC4gVGhpcyBpc1xuICogICBpbnRlbmRlZCBmb3Igd2hlbiB0aGUgdXNlciBuYXZpZ2F0ZXMgYSBsZXZlbCBkZWVwZXIgKGUuZy4gd29ya2xpc3Qg4oaSXG4gKiAgIGRldGFpbCB2aWV3KS5cbiAqXG4gKiBUaGUgcmlnaHQgc2lkZSBpcyBhIGZsZXhpYmxlIGNvbnRlbnQtcHJvamVjdGlvbiBzbG90OiBjb25zdW1lcnMgcHJvamVjdCBhbnlcbiAqIGFjdGlvbnMgdGhleSBuZWVkIChlLmcuIGByaXZCdXR0b25gLCBgcml2LW1lbnVgLCBuYXZpZ2F0aW9uIGFycm93cykgaW50byB0aGVcbiAqIGBbYWN0aW9uc11gIHNsb3QuXG4gKlxuICogVGhlIGNvbXBvbmVudCBvd25zIGl0cyBvd24gaG9yaXpvbnRhbCBndXR0ZXIgKGAtLXNpemUtbGFyZ2VgKSBzbyBpdCBjYW4gYmVcbiAqIGRyb3BwZWQgZGlyZWN0bHkgYXQgdGhlIHRvcCBvZiBhIHBhZ2Ugd2l0aG91dCBhIHdyYXBwZXIuIFBsYWNlIGl0IGFzIGFcbiAqIHNpYmxpbmcgb2YgKG5vdCBuZXN0ZWQgaW5zaWRlKSB0aGUgcGFnZSBib2R5IOKAlCB0aGUgYm9keSdzIG93biBwYWRkaW5nIHdpbGxcbiAqIGFsaWduIHdpdGggdGhlIGhlYWRlcidzLlxuICpcbiAqIEZvciB2aXN1YWwgY29uc2lzdGVuY3kgYWNyb3NzIHBhZ2VzLCBwcmVmZXIgYGdob3N0YC12YXJpYW50IGByaXZCdXR0b25gcyBmb3JcbiAqIGFjdGlvbnMgc28gdGhleSByZWFkIGFzIGVxdWFsLXdlaWdodCwgbG93LWVtcGhhc2lzIGNvbnRyb2xzLiBSZXNlcnZlIGhlYXZpZXJcbiAqIHZhcmlhbnRzIChgcHJpbWFyeWAsIGBkYW5nZXJgKSBmb3IgYSBnZW51aW5lIHByaW1hcnkgYWN0aW9uLlxuICpcbiAqIGBgYGh0bWxcbiAqIDxyaXYtcGFnZS1oZWFkZXIgdGl0bGU9XCJQYXRpZW50c1wiPlxuICogICA8YnV0dG9uIHJpdkJ1dHRvbiBbdmFyaWFudF09XCInZ2hvc3QnXCIgYWN0aW9ucz5BZGQgcGF0aWVudDwvYnV0dG9uPlxuICogICA8YnV0dG9uIHJpdkJ1dHRvbiBbdmFyaWFudF09XCInZ2hvc3QnXCIgYWN0aW9ucz5TZXR0aW5nczwvYnV0dG9uPlxuICogPC9yaXYtcGFnZS1oZWFkZXI+XG4gKiBgYGBcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LXBhZ2UtaGVhZGVyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3BhZ2UtaGVhZGVyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcGFnZS1oZWFkZXIuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgUGFnZUhlYWRlckNvbXBvbmVudCB7XG4gIC8qKiBQYWdlIHRpdGxlLCBzaG93biB3aGVuIG5vdCBpbiBiYWNrIG1vZGUuICovXG4gIEBJbnB1dCgpXG4gIHRpdGxlPzogc3RyaW5nO1xuXG4gIC8qKiBUZXh0IHNob3duIGJlbmVhdGggdGhlIHRpdGxlICh0aXRsZSBtb2RlIG9ubHkpLiAqL1xuICBASW5wdXQoKVxuICBkZXNjcmlwdGlvbj86IHN0cmluZztcblxuICAvKipcbiAgICogTGFiZWwgb2YgdGhlIHByZXZpb3VzIHBhZ2UuIFdoZW4gc2V0LCB0aGUgaGVhZGVyIHJlbmRlcnMgYSBiYWNrIGJ1dHRvblxuICAgKiAoXCJCYWNrIHRvIHt7IGJhY2tUbyB9fVwiKSBpbnN0ZWFkIG9mIHRoZSB0aXRsZSBhbmQgZW1pdHMgYGJhY2tgIG9uIGNsaWNrLlxuICAgKi9cbiAgQElucHV0KClcbiAgYmFja1RvPzogc3RyaW5nO1xuXG4gIC8qKiBFbWl0dGVkIHdoZW4gdGhlIGJhY2sgYnV0dG9uIGlzIGFjdGl2YXRlZCAoYmFjayBtb2RlIG9ubHkpLiAqL1xuICBAT3V0cHV0KClcbiAgYmFjayA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBASG9zdEJpbmRpbmcoJ2NsYXNzLmJhY2snKVxuICBnZXQgaXNCYWNrKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmJhY2tUbyAhPSBudWxsO1xuICB9XG5cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5oYXMtZGVzY3JpcHRpb24nKVxuICBnZXQgaGFzRGVzY3JpcHRpb24oKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuICF0aGlzLmlzQmFjayAmJiAhIXRoaXMuZGVzY3JpcHRpb247XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJsZWFkaW5nXCI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJpc0JhY2s7IGVsc2UgdGl0bGVUZW1wbGF0ZVwiPlxuICAgIDxidXR0b24gY2xhc3M9XCJiYWNrLWJ1dHRvblwiIHR5cGU9XCJidXR0b25cIiAoY2xpY2spPVwiYmFjay5lbWl0KClcIj5cbiAgICAgIDxyaXYtaWNvbiBuYW1lPVwiQXJyb3dMZWZ0Q2lyY2xlXCIgW3NpemVdPVwiMTZcIj48L3Jpdi1pY29uPlxuICAgICAgPHNwYW4+QmFjayB0byB7eyBiYWNrVG8gfX08L3NwYW4+XG4gICAgPC9idXR0b24+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmctdGVtcGxhdGUgI3RpdGxlVGVtcGxhdGU+XG4gICAgPGgxIGNsYXNzPVwidGl0bGVcIj57eyB0aXRsZSB9fTwvaDE+XG4gICAgPHAgKm5nSWY9XCJkZXNjcmlwdGlvblwiIGNsYXNzPVwiZGVzY3JpcHRpb25cIj57eyBkZXNjcmlwdGlvbiB9fTwvcD5cbiAgPC9uZy10ZW1wbGF0ZT5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwiYWN0aW9uc1wiPlxuICA8bmctY29udGVudCBzZWxlY3Q9XCJbYWN0aW9uc11cIj48L25nLWNvbnRlbnQ+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -25,10 +25,10 @@ export class TooltipComponent {
|
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
28
|
-
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme", maxWidth: "maxWidth", preferredPosition: "preferredPosition" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, ngImport: i0, template: "<riv-callout\n *riv-overlay\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n (mouseenter)=\"_onMouseEnter($event)\"\n (mouseleave)=\"_onMouseLeave($event)\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small);overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i3.OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
28
|
+
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme", maxWidth: "maxWidth", preferredPosition: "preferredPosition" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, ngImport: i0, template: "<riv-callout\n *riv-overlay\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n (mouseenter)=\"_onMouseEnter($event)\"\n (mouseleave)=\"_onMouseLeave($event)\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-large);font:var(--body-small);overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i3.OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
29
29
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
30
30
|
type: Component,
|
|
31
|
-
args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n *riv-overlay\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n (mouseenter)=\"_onMouseEnter($event)\"\n (mouseleave)=\"_onMouseLeave($event)\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small);overflow-wrap:break-word}\n"] }]
|
|
31
|
+
args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n *riv-overlay\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n (mouseenter)=\"_onMouseEnter($event)\"\n (mouseleave)=\"_onMouseLeave($event)\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-large);font:var(--body-small);overflow-wrap:break-word}\n"] }]
|
|
32
32
|
}], propDecorators: { anchor: [{
|
|
33
33
|
type: Input
|
|
34
34
|
}], content: [{
|
|
@@ -710,10 +710,10 @@ class TooltipComponent {
|
|
|
710
710
|
}
|
|
711
711
|
}
|
|
712
712
|
TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
713
|
-
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme", maxWidth: "maxWidth", preferredPosition: "preferredPosition" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, ngImport: i0, template: "<riv-callout\n *riv-overlay\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n (mouseenter)=\"_onMouseEnter($event)\"\n (mouseleave)=\"_onMouseLeave($event)\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small);overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
713
|
+
TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme", maxWidth: "maxWidth", preferredPosition: "preferredPosition" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, ngImport: i0, template: "<riv-callout\n *riv-overlay\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n (mouseenter)=\"_onMouseEnter($event)\"\n (mouseleave)=\"_onMouseLeave($event)\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-large);font:var(--body-small);overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
714
714
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
715
715
|
type: Component,
|
|
716
|
-
args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n *riv-overlay\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n (mouseenter)=\"_onMouseEnter($event)\"\n (mouseleave)=\"_onMouseLeave($event)\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small);overflow-wrap:break-word}\n"] }]
|
|
716
|
+
args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n *riv-overlay\n [anchor]=\"anchor\"\n [preferredPosition]=\"preferredPosition\"\n [allowedPositions]=\"allowedPositions\"\n [isModal]=\"false\"\n [theme]=\"theme\"\n (mouseenter)=\"_onMouseEnter($event)\"\n (mouseleave)=\"_onMouseLeave($event)\"\n>\n <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #stringContent>\n <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n {{ content }}\n </div>\n </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-large);font:var(--body-small);overflow-wrap:break-word}\n"] }]
|
|
717
717
|
}], propDecorators: { anchor: [{
|
|
718
718
|
type: Input
|
|
719
719
|
}], content: [{
|
|
@@ -6530,7 +6530,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
6530
6530
|
* Page header used to display the page/product the user is on.
|
|
6531
6531
|
*
|
|
6532
6532
|
* It has two mutually-exclusive left-side modes:
|
|
6533
|
-
* - `title` mode (default): shows a plain page title
|
|
6533
|
+
* - `title` mode (default): shows a plain page title, with an optional
|
|
6534
|
+
* `description` beneath it.
|
|
6534
6535
|
* - `back` mode: when `backTo` is provided, the title is replaced by a
|
|
6535
6536
|
* "Back to <previous page>" button that emits `back` when activated. This is
|
|
6536
6537
|
* intended for when the user navigates a level deeper (e.g. worklist →
|
|
@@ -6564,14 +6565,19 @@ class PageHeaderComponent {
|
|
|
6564
6565
|
get isBack() {
|
|
6565
6566
|
return this.backTo != null;
|
|
6566
6567
|
}
|
|
6568
|
+
get hasDescription() {
|
|
6569
|
+
return !this.isBack && !!this.description;
|
|
6570
|
+
}
|
|
6567
6571
|
}
|
|
6568
6572
|
PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6569
|
-
PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PageHeaderComponent, selector: "riv-page-header", inputs: { title: "title", backTo: "backTo" }, outputs: { back: "back" }, host: { properties: { "class.back": "this.isBack" } }, ngImport: i0, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6573
|
+
PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PageHeaderComponent, selector: "riv-page-header", inputs: { title: "title", description: "description", backTo: "backTo" }, outputs: { back: "back" }, host: { properties: { "class.back": "this.isBack", "class.has-description": "this.hasDescription" } }, ngImport: i0, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n <p *ngIf=\"description\" class=\"description\">{{ description }}</p>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.has-description{align-items:flex-start}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.description{margin:var(--size-small) 0 0;max-width:100ch;font:var(--body-small);color:var(--type-light-low-contrast)}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6570
6574
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
6571
6575
|
type: Component,
|
|
6572
|
-
args: [{ selector: 'riv-page-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"] }]
|
|
6576
|
+
args: [{ selector: 'riv-page-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\">\n <ng-container *ngIf=\"isBack; else titleTemplate\">\n <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n <span>Back to {{ backTo }}</span>\n </button>\n </ng-container>\n <ng-template #titleTemplate>\n <h1 class=\"title\">{{ title }}</h1>\n <p *ngIf=\"description\" class=\"description\">{{ description }}</p>\n </ng-template>\n</div>\n\n<div class=\"actions\">\n <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.has-description{align-items:flex-start}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.description{margin:var(--size-small) 0 0;max-width:100ch;font:var(--body-small);color:var(--type-light-low-contrast)}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"] }]
|
|
6573
6577
|
}], propDecorators: { title: [{
|
|
6574
6578
|
type: Input
|
|
6579
|
+
}], description: [{
|
|
6580
|
+
type: Input
|
|
6575
6581
|
}], backTo: [{
|
|
6576
6582
|
type: Input
|
|
6577
6583
|
}], back: [{
|
|
@@ -6579,6 +6585,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
6579
6585
|
}], isBack: [{
|
|
6580
6586
|
type: HostBinding,
|
|
6581
6587
|
args: ['class.back']
|
|
6588
|
+
}], hasDescription: [{
|
|
6589
|
+
type: HostBinding,
|
|
6590
|
+
args: ['class.has-description']
|
|
6582
6591
|
}] } });
|
|
6583
6592
|
|
|
6584
6593
|
class TabComponent {
|