@rivet-health/design-system 40.1.0 → 40.2.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/views/view-menu/view-menu.component.mjs +1 -1
- package/esm2020/lib/overlay/modal/dialog/dialog.component.mjs +9 -3
- package/fesm2015/rivet-health-design-system.mjs +9 -3
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +9 -3
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/overlay/modal/dialog/dialog.component.d.ts +3 -1
- package/package.json +1 -1
- package/styles/global.css +14 -0
|
@@ -5937,6 +5937,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
|
|
|
5937
5937
|
|
|
5938
5938
|
class DialogComponent {
|
|
5939
5939
|
constructor() {
|
|
5940
|
+
this.customBody = false;
|
|
5941
|
+
this.customFooter = false;
|
|
5940
5942
|
this.close = new EventEmitter();
|
|
5941
5943
|
this.hook = ANIMATION_CONSTANTS.DIALOG.HOOK;
|
|
5942
5944
|
}
|
|
@@ -5948,14 +5950,18 @@ class DialogComponent {
|
|
|
5948
5950
|
}
|
|
5949
5951
|
}
|
|
5950
5952
|
DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5951
|
-
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:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}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);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}\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 });
|
|
5953
|
+
DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "riv-dialog", inputs: { title: "title", minWidth: "minWidth", customBody: "customBody", customFooter: "customFooter" }, 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\" [class.custom]=\"customBody\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer riv-dialog-footer\" [class.custom]=\"customFooter\">\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:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}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);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.body:not(.custom){padding:var(--size-large)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.footer:not(:has(> footer)){display:none}\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 });
|
|
5952
5954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
|
|
5953
5955
|
type: Component,
|
|
5954
|
-
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:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}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);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}\n"] }]
|
|
5956
|
+
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\" [class.custom]=\"customBody\">\n <ng-content></ng-content>\n </div>\n <div class=\"footer riv-dialog-footer\" [class.custom]=\"customFooter\">\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:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}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);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.body:not(.custom){padding:var(--size-large)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.footer:not(:has(> footer)){display:none}\n"] }]
|
|
5955
5957
|
}], propDecorators: { title: [{
|
|
5956
5958
|
type: Input
|
|
5957
5959
|
}], minWidth: [{
|
|
5958
5960
|
type: Input
|
|
5961
|
+
}], customBody: [{
|
|
5962
|
+
type: Input
|
|
5963
|
+
}], customFooter: [{
|
|
5964
|
+
type: Input
|
|
5959
5965
|
}], close: [{
|
|
5960
5966
|
type: Output
|
|
5961
5967
|
}], handleKeydown: [{
|
|
@@ -6210,7 +6216,7 @@ class ViewMenuComponent {
|
|
|
6210
6216
|
}
|
|
6211
6217
|
}
|
|
6212
6218
|
ViewMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
6213
|
-
ViewMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewMenuComponent, selector: "riv-view-menu", inputs: { manager: "manager", view: "view", menuContext: "menuContext" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"view\">\n <riv-menu\n #menu\n [preferredPosition]=\"'bottom-right'\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngIf=\"triggerTemplate\">\n <ng-template #trigger>\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </ng-template>\n </ng-container>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'menu'\n })\n \"\n [disabled]=\"view.system || view.temporary\"\n >\n {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: false, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Edit view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: true, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Rename view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n \"\n [disabled]=\"view.temporary\"\n >\n Duplicate view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setDeletingView',\n context: { id: view.id, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Delete view\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n [disabled]=\"view.temporary\"\n >\n Copy link to view\n </button>\n </riv-menu>\n\n <ng-container *ngIf=\"manager?.state | async; let state\">\n <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n <riv-edit-view\n *ngIf=\"\n editingViewContext.id === view.id &&\n editingViewContext.menuContext === menuContext\n \"\n [view]=\"view\"\n [userSource]=\"state.userSource\"\n [userSelectMode]=\"state.userSelectMode\"\n [onAddUser]=\"state.onAddUser\"\n [newTooltip]=\"state.newTooltip\"\n [autoSelectName]=\"editingViewContext.autoRename\"\n [anchor]=\"el.nativeElement\"\n (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n (close)=\"\n manager?.actions?.next({ type: 'setEditingView', context: null })\n \"\n ></riv-edit-view>\n </ng-container>\n\n <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n <riv-dialog\n *ngIf=\"\n deletingViewContext.id === view.id &&\n deletingViewContext.menuContext === menuContext\n \"\n [title]=\"'Delete view'\"\n (close)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n <div class=\"delete-dialog\">\n <div class=\"delete-title\">\n Are you sure you want to delete the following view?\n </div>\n <p>{{ view.title }}</p>\n </div>\n <footer class=\"delete-footer\">\n <button\n rivButton\n (click)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n Cancel\n </button>\n <button\n rivButton\n [variant]=\"'danger'\"\n (click)=\"\n manager?.actions?.next({\n type: 'deleteView',\n view\n })\n \"\n >\n Delete view\n </button>\n </footer>\n </riv-dialog>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth"], outputs: ["close"] }, { kind: "component", type: EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6219
|
+
ViewMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewMenuComponent, selector: "riv-view-menu", inputs: { manager: "manager", view: "view", menuContext: "menuContext" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"view\">\n <riv-menu\n #menu\n [preferredPosition]=\"'bottom-right'\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngIf=\"triggerTemplate\">\n <ng-template #trigger>\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </ng-template>\n </ng-container>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'menu'\n })\n \"\n [disabled]=\"view.system || view.temporary\"\n >\n {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: false, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Edit view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: true, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Rename view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n \"\n [disabled]=\"view.temporary\"\n >\n Duplicate view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setDeletingView',\n context: { id: view.id, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Delete view\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n [disabled]=\"view.temporary\"\n >\n Copy link to view\n </button>\n </riv-menu>\n\n <ng-container *ngIf=\"manager?.state | async; let state\">\n <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n <riv-edit-view\n *ngIf=\"\n editingViewContext.id === view.id &&\n editingViewContext.menuContext === menuContext\n \"\n [view]=\"view\"\n [userSource]=\"state.userSource\"\n [userSelectMode]=\"state.userSelectMode\"\n [onAddUser]=\"state.onAddUser\"\n [newTooltip]=\"state.newTooltip\"\n [autoSelectName]=\"editingViewContext.autoRename\"\n [anchor]=\"el.nativeElement\"\n (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n (close)=\"\n manager?.actions?.next({ type: 'setEditingView', context: null })\n \"\n ></riv-edit-view>\n </ng-container>\n\n <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n <riv-dialog\n *ngIf=\"\n deletingViewContext.id === view.id &&\n deletingViewContext.menuContext === menuContext\n \"\n [title]=\"'Delete view'\"\n (close)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n <div class=\"delete-dialog\">\n <div class=\"delete-title\">\n Are you sure you want to delete the following view?\n </div>\n <p>{{ view.title }}</p>\n </div>\n <footer class=\"delete-footer\">\n <button\n rivButton\n (click)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n Cancel\n </button>\n <button\n rivButton\n [variant]=\"'danger'\"\n (click)=\"\n manager?.actions?.next({\n type: 'deleteView',\n view\n })\n \"\n >\n Delete view\n </button>\n </footer>\n </riv-dialog>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth", "customBody", "customFooter"], outputs: ["close"] }, { kind: "component", type: EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
6214
6220
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, decorators: [{
|
|
6215
6221
|
type: Component,
|
|
6216
6222
|
args: [{ selector: 'riv-view-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"view\">\n <riv-menu\n #menu\n [preferredPosition]=\"'bottom-right'\"\n (click)=\"$event.stopPropagation()\"\n >\n <ng-container *ngIf=\"triggerTemplate\">\n <ng-template #trigger>\n <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n </ng-template>\n </ng-container>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEnabled',\n id: view.id,\n enabled: !view.enabled,\n source: 'menu'\n })\n \"\n [disabled]=\"view.system || view.temporary\"\n >\n {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: false, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Edit view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setEditingView',\n context: { id: view.id, autoRename: true, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Rename view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n \"\n [disabled]=\"view.temporary\"\n >\n Duplicate view\n </button>\n <button\n riv-menu-item\n (click)=\"\n manager?.actions?.next({\n type: 'setDeletingView',\n context: { id: view.id, menuContext }\n })\n \"\n [disabled]=\"view.system\"\n >\n Delete view\n </button>\n <div class=\"riv-divider\"></div>\n <button\n riv-menu-item\n (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n [disabled]=\"view.temporary\"\n >\n Copy link to view\n </button>\n </riv-menu>\n\n <ng-container *ngIf=\"manager?.state | async; let state\">\n <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n <riv-edit-view\n *ngIf=\"\n editingViewContext.id === view.id &&\n editingViewContext.menuContext === menuContext\n \"\n [view]=\"view\"\n [userSource]=\"state.userSource\"\n [userSelectMode]=\"state.userSelectMode\"\n [onAddUser]=\"state.onAddUser\"\n [newTooltip]=\"state.newTooltip\"\n [autoSelectName]=\"editingViewContext.autoRename\"\n [anchor]=\"el.nativeElement\"\n (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n (close)=\"\n manager?.actions?.next({ type: 'setEditingView', context: null })\n \"\n ></riv-edit-view>\n </ng-container>\n\n <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n <riv-dialog\n *ngIf=\"\n deletingViewContext.id === view.id &&\n deletingViewContext.menuContext === menuContext\n \"\n [title]=\"'Delete view'\"\n (close)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n <div class=\"delete-dialog\">\n <div class=\"delete-title\">\n Are you sure you want to delete the following view?\n </div>\n <p>{{ view.title }}</p>\n </div>\n <footer class=\"delete-footer\">\n <button\n rivButton\n (click)=\"\n manager?.actions?.next({ type: 'setDeletingView', context: null })\n \"\n >\n Cancel\n </button>\n <button\n rivButton\n [variant]=\"'danger'\"\n (click)=\"\n manager?.actions?.next({\n type: 'deleteView',\n view\n })\n \"\n >\n Delete view\n </button>\n </footer>\n </riv-dialog>\n </ng-container>\n </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"] }]
|