@rivet-health/design-system 39.4.1 → 39.5.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/overlay/modal/dialog/dialog.component.mjs +12 -3
- package/fesm2015/rivet-health-design-system.mjs +10 -1
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +10 -1
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/overlay/modal/dialog/dialog.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, } from '@angular/core';
|
|
1
|
+
import { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, Output, } from '@angular/core';
|
|
2
2
|
import { ANIMATION_CONSTANTS } from '../../overlay-outlet.component';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
import * as i1 from "../../../input/button/button.component";
|
|
@@ -8,9 +8,15 @@ export class DialogComponent {
|
|
|
8
8
|
this.close = new EventEmitter();
|
|
9
9
|
this.hook = ANIMATION_CONSTANTS.DIALOG.HOOK;
|
|
10
10
|
}
|
|
11
|
+
handleKeydown(event) {
|
|
12
|
+
if (event.key === 'Escape') {
|
|
13
|
+
event.preventDefault();
|
|
14
|
+
this.close.emit();
|
|
15
|
+
}
|
|
16
|
+
}
|
|
11
17
|
}
|
|
12
18
|
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13
|
-
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "riv-dialog", inputs: { title: "title", minWidth: "minWidth" }, outputs: { close: "close" }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:100%}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i2.ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
19
|
+
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "riv-dialog", inputs: { title: "title", minWidth: "minWidth" }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:100%}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}\n"], dependencies: [{ kind: "component", type: i1.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i2.ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
|
|
15
21
|
type: Component,
|
|
16
22
|
args: [{ selector: 'riv-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:100%}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}\n"] }]
|
|
@@ -20,5 +26,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
20
26
|
type: Input
|
|
21
27
|
}], close: [{
|
|
22
28
|
type: Output
|
|
29
|
+
}], handleKeydown: [{
|
|
30
|
+
type: HostListener,
|
|
31
|
+
args: ['document:keydown', ['$event']]
|
|
23
32
|
}] } });
|
|
24
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
33
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL292ZXJsYXkvbW9kYWwvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9vdmVybGF5L21vZGFsL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOzs7O0FBUXJFLE1BQU0sT0FBTyxlQUFlO0lBTjVCO1FBY0UsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFVeEIsU0FBSSxHQUFHLG1CQUFtQixDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7S0FDakQ7SUFSQyxhQUFhLENBQUMsS0FBb0I7UUFDaEMsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFFBQVEsRUFBRTtZQUMxQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNuQjtJQUNILENBQUM7OzRHQWhCVSxlQUFlO2dHQUFmLGVBQWUsdU1DaEI1Qix5b0JBdUJBOzJGRFBhLGVBQWU7a0JBTjNCLFNBQVM7K0JBQ0UsWUFBWSxtQkFHTCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUkvQyxLQUFLO3NCQURKLEtBQUs7Z0JBSU4sUUFBUTtzQkFEUCxLQUFLO2dCQUlOLEtBQUs7c0JBREosTUFBTTtnQkFJUCxhQUFhO3NCQURaLFlBQVk7dUJBQUMsa0JBQWtCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBTklNQVRJT05fQ09OU1RBTlRTIH0gZnJvbSAnLi4vLi4vb3ZlcmxheS1vdXRsZXQuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LWRpYWxvZycsXG4gIHRlbXBsYXRlVXJsOiAnLi9kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kaWFsb2cuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgRGlhbG9nQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgdGl0bGU/OiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgbWluV2lkdGg/OiBzdHJpbmc7XG5cbiAgQE91dHB1dCgpXG4gIGNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmtleWRvd24nLCBbJyRldmVudCddKVxuICBoYW5kbGVLZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgaWYgKGV2ZW50LmtleSA9PT0gJ0VzY2FwZScpIHtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICB0aGlzLmNsb3NlLmVtaXQoKTtcbiAgICB9XG4gIH1cblxuICByZWFkb25seSBob29rID0gQU5JTUFUSU9OX0NPTlNUQU5UUy5ESUFMT0cuSE9PSztcbn1cbiIsIjxyaXYtbW9kYWwgKGNsb3NlKT1cImNsb3NlLmVtaXQoKVwiIFtvYnNjdXJlXT1cInRydWVcIj5cbiAgPGRpdiBbYXR0ci5kYXRhLWFuaW1hdGlvbi1ob29rXT1cImhvb2tcIiBjbGFzcz1cIndyYXBwZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZGlhbG9nXCIgW3N0eWxlLm1pbi13aWR0aF09XCJtaW5XaWR0aFwiPlxuICAgICAgPGhlYWRlcj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJ0aXRsZVwiPlxuICAgICAgICAgIHt7IHRpdGxlIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIHJpdkJ1dHRvblxuICAgICAgICAgIFt2YXJpYW50XT1cIidnaG9zdCdcIlxuICAgICAgICAgIFtpY29uXT1cIidYJ1wiXG4gICAgICAgICAgKGNsaWNrKT1cImNsb3NlLmVtaXQoKVwiXG4gICAgICAgID48L2J1dHRvbj5cbiAgICAgIDwvaGVhZGVyPlxuICAgICAgPGRpdiBjbGFzcz1cImJvZHlcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiZm9vdGVyXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImZvb3RlclwiPjwvbmctY29udGVudD5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvcml2LW1vZGFsPlxuIl19
|
|
@@ -5458,9 +5458,15 @@ class DialogComponent {
|
|
|
5458
5458
|
this.close = new EventEmitter();
|
|
5459
5459
|
this.hook = ANIMATION_CONSTANTS.DIALOG.HOOK;
|
|
5460
5460
|
}
|
|
5461
|
+
handleKeydown(event) {
|
|
5462
|
+
if (event.key === 'Escape') {
|
|
5463
|
+
event.preventDefault();
|
|
5464
|
+
this.close.emit();
|
|
5465
|
+
}
|
|
5466
|
+
}
|
|
5461
5467
|
}
|
|
5462
5468
|
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5463
|
-
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "riv-dialog", inputs: { title: "title", minWidth: "minWidth" }, outputs: { close: "close" }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:100%}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5469
|
+
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "riv-dialog", inputs: { title: "title", minWidth: "minWidth" }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:100%}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5464
5470
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
|
|
5465
5471
|
type: Component,
|
|
5466
5472
|
args: [{ selector: 'riv-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n <div class=\"dialog\" [style.min-width]=\"minWidth\">\n <header>\n <span class=\"title\">\n {{ title }}\n </span>\n <button\n rivButton\n [variant]=\"'ghost'\"\n [icon]=\"'X'\"\n (click)=\"close.emit()\"\n ></button>\n </header>\n <div class=\"body\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer\">\n <ng-content select=\"footer\"></ng-content>\n </div>\n </div>\n </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:100%}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1)}\n"] }]
|
|
@@ -5470,6 +5476,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5470
5476
|
type: Input
|
|
5471
5477
|
}], close: [{
|
|
5472
5478
|
type: Output
|
|
5479
|
+
}], handleKeydown: [{
|
|
5480
|
+
type: HostListener,
|
|
5481
|
+
args: ['document:keydown', ['$event']]
|
|
5473
5482
|
}] } });
|
|
5474
5483
|
|
|
5475
5484
|
const titles = {
|