@rivet-health/design-system 40.20.1 → 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/fesm2015/rivet-health-design-system.mjs +12 -3
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +12 -3
- 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==
|
|
@@ -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 {
|