@rivet-health/design-system 40.1.0 → 40.2.0

package/esm2020/lib/navigation/views/view-menu/view-menu.component.mjs

@@ -13,7 +13,7 @@ export class ViewMenuComponent {
     }
 }
 ViewMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-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: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth"], outputs: ["close"] }, { kind: "component", type: i4.EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: i5.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: i6.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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: i2.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i3.DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth", "customBody", "customFooter"], outputs: ["close"] }, { kind: "component", type: i4.EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: i5.MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: i6.MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, decorators: [{
             type: Component,
             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"] }]

package/esm2020/lib/overlay/modal/dialog/dialog.component.mjs

@@ -5,6 +5,8 @@ import * as i1 from "../../../input/button/button.component";
 import * as i2 from "../modal.component";
 export class DialogComponent {
     constructor() {
+        this.customBody = false;
+        this.customFooter = false;
         this.close = new EventEmitter();
         this.hook = ANIMATION_CONSTANTS.DIALOG.HOOK;
     }
@@ -16,18 +18,22 @@ export class DialogComponent {
     }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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: 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 });
+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: 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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], minWidth: [{
                 type: Input
+            }], customBody: [{
+                type: Input
+            }], customFooter: [{
+                type: Input
             }], close: [{
                 type: Output
             }], handleKeydown: [{
                 type: HostListener,
                 args: ['document:keydown', ['$event']]
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL292ZXJsYXkvbW9kYWwvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9vdmVybGF5L21vZGFsL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOzs7O0FBUXJFLE1BQU0sT0FBTyxlQUFlO0lBTjVCO1FBY0UsVUFBSyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7UUFVeEIsU0FBSSxHQUFHLG1CQUFtQixDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUM7S0FDakQ7SUFSQyxhQUFhLENBQUMsS0FBb0I7UUFDaEMsSUFBSSxLQUFLLENBQUMsR0FBRyxLQUFLLFFBQVEsRUFBRTtZQUMxQixLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNuQjtJQUNILENBQUM7OzRHQWhCVSxlQUFlO2dHQUFmLGVBQWUsdU1DaEI1Qix5b0JBdUJBOzJGRFBhLGVBQWU7a0JBTjNCLFNBQVM7K0JBQ0UsWUFBWSxtQkFHTCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUkvQyxLQUFLO3NCQURKLEtBQUs7Z0JBSU4sUUFBUTtzQkFEUCxLQUFLO2dCQUlOLEtBQUs7c0JBREosTUFBTTtnQkFJUCxhQUFhO3NCQURaLFlBQVk7dUJBQUMsa0JBQWtCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBFdmVudEVtaXR0ZXIsXG4gIEhvc3RMaXN0ZW5lcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBBTklNQVRJT05fQ09OU1RBTlRTIH0gZnJvbSAnLi4vLi4vb3ZlcmxheS1vdXRsZXQuY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LWRpYWxvZycsXG4gIHRlbXBsYXRlVXJsOiAnLi9kaWFsb2cuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9kaWFsb2cuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgRGlhbG9nQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgdGl0bGU/OiBzdHJpbmc7XG5cbiAgQElucHV0KClcbiAgbWluV2lkdGg/OiBzdHJpbmc7XG5cbiAgQE91dHB1dCgpXG4gIGNsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIEBIb3N0TGlzdGVuZXIoJ2RvY3VtZW50OmtleWRvd24nLCBbJyRldmVudCddKVxuICBoYW5kbGVLZXlkb3duKGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgaWYgKGV2ZW50LmtleSA9PT0gJ0VzY2FwZScpIHtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICB0aGlzLmNsb3NlLmVtaXQoKTtcbiAgICB9XG4gIH1cblxuICByZWFkb25seSBob29rID0gQU5JTUFUSU9OX0NPTlNUQU5UUy5ESUFMT0cuSE9PSztcbn1cbiIsIjxyaXYtbW9kYWwgKGNsb3NlKT1cImNsb3NlLmVtaXQoKVwiIFtvYnNjdXJlXT1cInRydWVcIj5cbiAgPGRpdiBbYXR0ci5kYXRhLWFuaW1hdGlvbi1ob29rXT1cImhvb2tcIiBjbGFzcz1cIndyYXBwZXJcIj5cbiAgICA8ZGl2IGNsYXNzPVwiZGlhbG9nXCIgW3N0eWxlLm1pbi13aWR0aF09XCJtaW5XaWR0aFwiPlxuICAgICAgPGhlYWRlcj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJ0aXRsZVwiPlxuICAgICAgICAgIHt7IHRpdGxlIH19XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPGJ1dHRvblxuICAgICAgICAgIHJpdkJ1dHRvblxuICAgICAgICAgIFt2YXJpYW50XT1cIidnaG9zdCdcIlxuICAgICAgICAgIFtpY29uXT1cIidYJ1wiXG4gICAgICAgICAgKGNsaWNrKT1cImNsb3NlLmVtaXQoKVwiXG4gICAgICAgID48L2J1dHRvbj5cbiAgICAgIDwvaGVhZGVyPlxuICAgICAgPGRpdiBjbGFzcz1cImJvZHlcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiZm9vdGVyXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cImZvb3RlclwiPjwvbmctY29udGVudD5cbiAgICAgIDwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvcml2LW1vZGFsPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlhbG9nLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL292ZXJsYXkvbW9kYWwvZGlhbG9nL2RpYWxvZy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi9vdmVybGF5L21vZGFsL2RpYWxvZy9kaWFsb2cuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsWUFBWSxFQUNaLFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdDQUFnQyxDQUFDOzs7O0FBUXJFLE1BQU0sT0FBTyxlQUFlO0lBTjVCO1FBY0UsZUFBVSxHQUFHLEtBQUssQ0FBQztRQUduQixpQkFBWSxHQUFHLEtBQUssQ0FBQztRQUdyQixVQUFLLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQVV4QixTQUFJLEdBQUcsbUJBQW1CLENBQUMsTUFBTSxDQUFDLElBQUksQ0FBQztLQUNqRDtJQVJDLGFBQWEsQ0FBQyxLQUFvQjtRQUNoQyxJQUFJLEtBQUssQ0FBQyxHQUFHLEtBQUssUUFBUSxFQUFFO1lBQzFCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQztZQUN2QixJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ25CO0lBQ0gsQ0FBQzs7NEdBdEJVLGVBQWU7Z0dBQWYsZUFBZSwrUENoQjVCLHl0QkF1QkE7MkZEUGEsZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxZQUFZLG1CQUdMLHVCQUF1QixDQUFDLE1BQU07OEJBSS9DLEtBQUs7c0JBREosS0FBSztnQkFJTixRQUFRO3NCQURQLEtBQUs7Z0JBSU4sVUFBVTtzQkFEVCxLQUFLO2dCQUlOLFlBQVk7c0JBRFgsS0FBSztnQkFJTixLQUFLO3NCQURKLE1BQU07Z0JBSVAsYUFBYTtzQkFEWixZQUFZO3VCQUFDLGtCQUFrQixFQUFFLENBQUMsUUFBUSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBIb3N0TGlzdGVuZXIsXG4gIElucHV0LFxuICBPdXRwdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQU5JTUFUSU9OX0NPTlNUQU5UUyB9IGZyb20gJy4uLy4uL292ZXJsYXktb3V0bGV0LmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1kaWFsb2cnLFxuICB0ZW1wbGF0ZVVybDogJy4vZGlhbG9nLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vZGlhbG9nLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIERpYWxvZ0NvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIHRpdGxlPzogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIG1pbldpZHRoPzogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGN1c3RvbUJvZHkgPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBjdXN0b21Gb290ZXIgPSBmYWxzZTtcblxuICBAT3V0cHV0KClcbiAgY2xvc2UgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cbiAgQEhvc3RMaXN0ZW5lcignZG9jdW1lbnQ6a2V5ZG93bicsIFsnJGV2ZW50J10pXG4gIGhhbmRsZUtleWRvd24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpIHtcbiAgICBpZiAoZXZlbnQua2V5ID09PSAnRXNjYXBlJykge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIHRoaXMuY2xvc2UuZW1pdCgpO1xuICAgIH1cbiAgfVxuXG4gIHJlYWRvbmx5IGhvb2sgPSBBTklNQVRJT05fQ09OU1RBTlRTLkRJQUxPRy5IT09LO1xufVxuIiwiPHJpdi1tb2RhbCAoY2xvc2UpPVwiY2xvc2UuZW1pdCgpXCIgW29ic2N1cmVdPVwidHJ1ZVwiPlxuICA8ZGl2IFthdHRyLmRhdGEtYW5pbWF0aW9uLWhvb2tdPVwiaG9va1wiIGNsYXNzPVwid3JhcHBlclwiPlxuICAgIDxkaXYgY2xhc3M9XCJkaWFsb2dcIiBbc3R5bGUubWluLXdpZHRoXT1cIm1pbldpZHRoXCI+XG4gICAgICA8aGVhZGVyPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInRpdGxlXCI+XG4gICAgICAgICAge3sgdGl0bGUgfX1cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgcml2QnV0dG9uXG4gICAgICAgICAgW3ZhcmlhbnRdPVwiJ2dob3N0J1wiXG4gICAgICAgICAgW2ljb25dPVwiJ1gnXCJcbiAgICAgICAgICAoY2xpY2spPVwiY2xvc2UuZW1pdCgpXCJcbiAgICAgICAgPjwvYnV0dG9uPlxuICAgICAgPC9oZWFkZXI+XG4gICAgICA8ZGl2IGNsYXNzPVwiYm9keVwiIFtjbGFzcy5jdXN0b21dPVwiY3VzdG9tQm9keVwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJmb290ZXIgcml2LWRpYWxvZy1mb290ZXJcIiBbY2xhc3MuY3VzdG9tXT1cImN1c3RvbUZvb3RlclwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJmb290ZXJcIj48L25nLWNvbnRlbnQ+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L3Jpdi1tb2RhbD5cbiJdfQ==

package/fesm2015/rivet-health-design-system.mjs

@@ -5754,6 +5754,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class DialogComponent {
     constructor() {
+        this.customBody = false;
+        this.customFooter = false;
         this.close = new EventEmitter();
         this.hook = ANIMATION_CONSTANTS.DIALOG.HOOK;
     }
@@ -5765,14 +5767,18 @@ class DialogComponent {
     }
 }
 DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], minWidth: [{
                 type: Input
+            }], customBody: [{
+                type: Input
+            }], customFooter: [{
+                type: Input
             }], close: [{
                 type: Output
             }], handleKeydown: [{
@@ -6030,7 +6036,7 @@ class ViewMenuComponent {
     }
 }
 ViewMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-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 });
+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 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, decorators: [{
             type: Component,
             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"] }]